Search

Search components and blocks

Sign in

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 page

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
AC

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

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

Event Calendar

ProOpen page

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.

pnpm dlx shadcn@latest add @ditherui/event-calendar
January 1970

Thursday, Jan 1

MeetingDesignPersonal

Props

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

Schedule Planner

ProOpen page

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.

pnpm dlx shadcn@latest add @ditherui/schedule-planner

November 2026

SuMoTuWeThFrSa

Duration

Thursday, Nov 5

Props

Room Booking

ProOpen page

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.

pnpm dlx shadcn@latest add @ditherui/room-booking-card

Book a room

Product sync · Thursday at 2:00 PM

Room

Floor 2

Atlas8 seats · whiteboard wall
Borealis4 seats · video wall

Floor 3

Cobalt12 seats · projector
Delta2 seats · phone booth

Roof

SunroomInformal · coffee bar
The NookInformal · sofas

Duration

Quick

15 minutes
30 minutes

Long

1 hour
90 minutes
2 hours

Repeat

Does not repeat
Daily
Weekly
Monthly
Atlas30 minutesDoes not repeat

Props

Suggested components