Shadcn Schedule Blocks

Calendar views for events and bookings — day/week/month grids, availability pickers, and booking flows built on shadcn primitives.

Booking Scheduler

shadcn'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.

pnpm dlx shadcn@latest add @ditherui/booking-scheduler

Ava Chen

Product Designer

30 min intro call

November 2026

Thursday, Nov 5

Select a date and time

Install

$ pnpm dlx shadcn@latest add @ditherui/booking-scheduler

Props

PropTypeDefault

className / ...div propsReact.ComponentProps<"div">—

Suggested components

Create an account
Start building with DitherUI in seconds.
or continue with email
Name
Email
Password
I agree to the Terms & Privacy Policy.
Already have an account? Sign in
Auth BlocksSign-in, sign-up and join cards.
0
Active Agents
+3 today
0
Tasks Completed
+18% this week
0
Failed Tasks
No significant change
0.0K
Tokens Used
82% of monthly quota
Card BlocksMeeting, connector and score cards to drop into dashboards.
January 1970
MeetingDesignPersonalDeadline
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Calendar BlocksEvent calendars with color-coded entries.

Shadcn Schedule Blocks

Booking Scheduler

Install

Props

Suggested components

Create an account