Design System

A showcase of the design system components and patterns

OverviewAI GuideTypographyComponentsLayoutsPatternsColors & AnimationsAdvancedAdditionalApp ShellSchedulingRich Text Editor

Advanced UI Patterns

Modal for Quick Actions

Modal Example
Use modals for quick interactions like adding a relationship or confirming a deletion

Usage:

<Modal
  open={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  title="Add Relationship"
  description="Add a new relationship to this contact"
  footer={
    <div className="flex justify-end gap-2 w-full">
      <Button variant="outline" onClick={() => setIsModalOpen(false)}>Cancel</Button>
      <Button onClick={() => setIsModalOpen(false)}>Add</Button>
    </div>
  }
>
  <div className="space-y-4">
    {/* Form content */}
  </div>
</Modal>

Drawer for Quick Information

Drawer Example
Use drawers for showing supplementary information without leaving the current context
JD

John Doe

Family Member

Email

john.doe@example.com

Phone

(123) 456-7890

Usage:

<Drawer
  open={isDrawerOpen}
  onClose={() => setIsDrawerOpen(false)}
  direction="right"
  title="Contact Preview"
>
  <div className="p-4 space-y-4">
    {/* Drawer content */}
  </div>
</Drawer>

Secondary Sidebar for Calendar/Scheduling

Secondary Sidebar Example
Use a secondary sidebar for scheduling assistants with calendars

Schedule Visit

Visit Details

Calendar

SuMoTuWeThFrSa
Available Slots

Usage:

<SidebarLayout
  sidebar={
    <div className="p-4 space-y-4">
      {/* Calendar and time slots */}
    </div>
  }
  sidebarPosition="right"
  sidebarWidth="320px"
>
  <div className="p-6">
    {/* Main content */}
  </div>
</SidebarLayout>

Step Wizard for Multi-Step Forms

Step Wizard Example
Use step wizards for breaking complex forms into manageable steps
Create New Employee
Complete the following steps to create a new employee
Basic Info
2
Contact
3
Role

Contact Details

Usage:

<StepWizard
  title="Create New Employee"
  description="Complete the following steps to create a new employee"
  steps={[
    { label: "Basic Info", completed: true },
    { label: "Contact", completed: false },
    { label: "Role", completed: false },
  ]}
  currentStep={1}
  previousUrl="/employees/create/basic-info"
  nextUrl="/employees/create/role"
>
  <div className="space-y-4">
    {/* Step content */}
  </div>
</StepWizard>

Server Component Implementation

This StepWizard component is designed to work with Next.js routing. Each step is a separate page, and navigation between steps is handled by links rather than client-side state.

For example, you might have routes like:

  • /employees/create/basic-info
  • /employees/create/contact
  • /employees/create/role