For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A session picker whose 15 to 90 minute toggle rebuilds the 9 am to 5 pm slot list at that step, with a booked summary
When to use
- Booking a session or setting up a meeting: a day, a time slot, a duration and a confirm step
- A month view card with the picked day's events and attendees, or a team's attendance counts
- Creating a scheduled event with members and files, or an event's detail card with an RSVP
When not to use
- The slot belongs to a due date picked from shortcut rows like Tomorrow: use the Due Date Picker block
- The meeting also needs a repeat rule, a title and notes: use the Meeting Scheduler block
- A full page week or month grid where people drag, resize and create events: use the Event Calendar blocks
- A plain day or range field in a form, with no slots, agenda or booking card: use the Calendar component
- A drop zone for attachments on its own, with no booking or meeting fields: use the File Upload component
Agent notes
buildSlotsreturns every slot withavailableset to true; load real availability per day or no slot is ever disabledhandleBookonly setsconfirmed; sendselectedDate,selectedTimeanddurationto your booking API from there- Slots always span 9 am to 5 pm inside
buildSlots; change those bounds for your own working hours Scheduletakes no props and saves or sends nothing; add a callback to hand the picked day, time or form values to your app- Each
Schedulecaps its width with a max-w class on its rootFrame, and page.tsx centers it with p-10 md:p-20; drop both inside your layout
Third-party API docs
- React DayPicker v9: API reference, docs, through shadcn Calendar
https://web.dev.reui.io/blocks/application/schedule/schedule-9.mdget_block("schedule-9")npx shadcn@latest add @reui/schedule-9Shadcn Session Booking Block
Session booking scheduler with single-date calendar, duration toggle, and scrollable time slots. Part of the ReUI Shadcn Application Schedule blocks collection.
Appointment booking widget for meetings and consultations. Single-date Calendar with month and year dropdowns, 15m to 90m duration toggle, scrollable time-slot picker, confirm footer. ReUI Frame, shadcn Calendar, Select, ScrollArea, Button.
It is composed from Button, Calendar, Frame, Item, Scroll Area, Select, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Session Booking Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Application Schedule blocks to assemble a full screen instead of a single section.
All Shadcn Application Schedule Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Appointment Planner Schedule with date-picker calendar and filterable day agenda of status events
- Time Range Picker Session time picker card with start and end Selects, quick-duration presets and live duration
- Meeting Scheduler Meeting scheduler card with calendar, time-slot list, duration and recurrence selects, and switches
- Booking Page Calendly-style meeting booking widget with month calendar, availability dots, and time-slot picker
- Team Attendance Compact team attendance calendar card with status filter and bar-chart stat rows
- Create Schedule Schedule creation form with member multi-select, date picker, and file upload
- Webinar RSVP Webinar event detail card with collapsible overview, presenters, and Yes/Skip/Maybe RSVP sections
- Team Agenda Compact month calendar card with per-day category dots, filter chips, and attendee-avatar agenda
- Due Date Picker Date and Time Scheduling Popover with Quick Shortcut Rows, Calendar, and Time Slots
Related Shadcn Application Block Categories
- App Shell (35) App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.
- Auth (20) Login, register, forgot password, and two-factor authentication page layouts.
- Card (43) Card components for content display, data summaries, and interactive elements.
- Dashboard (8) Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Dialog (14) Dialog components for modal windows, alerts, confirmations, and content overlays.
- Empty State (14) Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Session Booking block?
Use it for a session picker whose 15 to 90 minute toggle rebuilds the 9 am to 5 pm slot list at that step, with a booked summary.
The Schedule category fits:
- Booking a session or setting up a meeting: a day, a time slot, a duration and a confirm step
- A month view card with the picked day's events and attendees, or a team's attendance counts
- Creating a scheduled event with members and files, or an event's detail card with an RSVP
For the slot belongs to a due date picked from shortcut rows like Tomorrow, use the Due Date Picker block. For the meeting also needs a repeat rule, a title and notes, use the Meeting Scheduler block. For a full page week or month grid where people drag, resize and create events, use the Event Calendar blocks. For a plain day or range field in a form, with no slots, agenda or booking card, use the Calendar component. For a drop zone for attachments on its own, with no booking or meeting fields, use the File Upload component.
What is the Session Booking block built with?
Can I restyle the Session Booking block?
How should I use Shadcn schedule blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.