Design System
A showcase of the design system components and patterns
OverviewAI GuideTypographyComponentsLayoutsPatternsColors & AnimationsAdvancedAdditionalApp ShellSchedulingRich Text Editor
Scheduling & Availability
Availability Grid
Availability Grid Component
Grid for selecting available time slots
Weekly Availability
Select your available time slots
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
Usage:
<AvailabilityGrid
timeSlots={timeSlots}
onTimeSlotToggle={handleTimeSlotToggle}
startHour={9}
endHour={17}
title="Weekly Availability"
description="Select your available time slots"
onSave={handleSave}
onReset={handleReset}
/>Schedule Calendar
Schedule Calendar Component
Calendar for displaying and managing events
My Schedule
View and manage your schedule
February 2026
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
Wednesday, February 4, 2026
Team Meeting
Team Meeting10:57 AM - 11:57 AM
Events
Usage:
<ScheduleCalendar
events={events}
onEventClick={handleEventClick}
onDateClick={handleDateClick}
title="My Schedule"
description="View and manage your schedule"
onAddClick={handleAddEvent}
/>Resource Scheduler
Resource Scheduler Component
Scheduler for managing multiple resources
Resource Scheduler
Schedule rooms and people
Wednesday, February 4, 2026
Time
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
Conference Room A
Conference Room B
Meeting Room 1
John Doe
Jane Smith
Team Meeting
10:57 AM
Team Meeting
10:57 AM
Client Call
2:57 PM
Client Call
2:57 PM
5 resources, 3 events
Usage:
<ResourceScheduler
resources={resources}
events={events}
onEventClick={handleEventClick}
onTimeSlotClick={handleTimeSlotClick}
title="Resource Scheduler"
description="Schedule rooms and people"
onAddClick={handleAddEvent}
startHour={9}
endHour={17}
interval={60}
/>