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
May 2026
Su
Mo
Tu
We
Th
Fr
Sa
27
28
29
30
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
29
30
31
Thursday, May 7, 2026
Team Meeting
Team Meeting10:27 AM - 11:27 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
Thursday, May 7, 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:27 AM
Team Meeting
10:27 AM
Client Call
2:27 PM
Client Call
2:27 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}
/>