# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/piece/calendar21. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- 1. / 2. [Pieces](/pieces) 3. / 4. [Calendar](/pieces/calendar) 5. / 6. Reservation Detail # Reservation Detail Reservation card with a status pill, confirmation code, check-in/out split, party size, and total price. Casa Mariposa · LisbonBooking #A-7812-55 Confirmed Check-inJun 14 · After 16:00 Check-outJun 18 · Before 11:00 2 guests€736 · 4 nights CLICode Base UI ![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/piece/r-base/calendar21` New here? Read the [installation guide](/docs/installation). Import & useCopy ``` import { Calendar21 } from "@/components/beste/piece/calendar21"; ``` ## More Calendar pieces [View all Calendar](/pieces/calendar) [](/piece/calendar14) Meeting booked Discovery call with Kestrel Labs Thu, Apr 30 · 14:00 – 14:30Google Meet · meet.beste.co/kestrel3 invited Add to calendarReschedule ### Booking Confirmed Meeting-booked card with an emerald check header, when/where/guests rows, and add to calendar plus reschedule. [](/piece/calendar4) TodayThuApr 2314:00 ### Date Pill Horizontal pill combining a relative label, weekday, mono date, and an optional time separated by thin rules. [](/piece/calendar29) 12May· Monday ### Month Pill Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button. [](/piece/calendar31) Today Tue, 12 May 09:00New member intake 11:30Care plan review 14:00Billing sync 16:15Follow-up call ### Daily Agenda Card A day view listing time-stamped agenda rows, each with a colored marker and a truncating title. [](/piece/calendar10) Today · Thu 23 Apr 09:30 Design reviewFigma 11:00 1:1 with MiraMeet 14:30 Ship roomOffice · 4F ### Day Agenda Today's schedule card with left-ruled event rows colored by accent and a leading start-time column. [](/piece/calendar11) Book a 30-minute callThursday, Apr 23 · Europe/Istanbul (UTC+3) 09:3010:0011:0013:3014:0015:30 ### Booking Slots Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.