Search
Search components and blocks
Shadcn Schedule Blocks
Calendar views for events and bookings — day/week/month grids, availability pickers, and booking flows built on shadcn primitives.
Booking Scheduler
Open pageshadcn's Calendar as the base, with the micro-interactions it doesn't ship: a host profile up top (with a pulsing available-now indicator) so you know who you're booking, a crossfade between months, a press-squish on every day cell, a staggered entrance for the time-slot grid, a sliding highlight on the selected slot, and a Book → Booked! confirmation before it resets.
Ava Chen
Product Designer
Thursday, Nov 5
Select a date and time
Install
Props
className / ...div propsReact.ComponentProps<"div">—The other half of 'calendar views' — an agenda view instead of a booking flow. Days with events get a small dot, picking a day crossfades in its agenda with a staggered entrance, and each event card gets a category color-bar and badge, an attendee stack, and — when there's a location or description — expands in place with a rotating chevron instead of needing a separate dialog.
Thursday, Jan 1
Props
className / ...div propsReact.ComponentProps<"div">—Built on Calendar: pick a day, a duration and a time, then confirm. The duration and time selections share sliding highlights, the time slots stagger in whenever the day changes, and the button swaps to Scheduled! before resetting.
November 2026
Duration
Thursday, Nov 5
Props
A meeting-room booking card. Room, duration and repeat are each a Morph Select — the trigger grows into a grouped, scrollable list with keyboard and type-ahead — and the choices roll up into a live summary line.
Book a room
Product sync · Thursday at 2:00 PM
Room
Duration
Repeat