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
July 2025
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, July 3, 2025
Team Meeting
Team Meeting10:15 AM - 11:15 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, July 3, 2025
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:15 AM
Team Meeting
10:15 AM
Client Call
2:15 PM
Client Call
2:15 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} />