Design System

A showcase of the design system components and patterns

OverviewAI GuideTypographyComponentsLayoutsPatternsColors & AnimationsAdvancedAdditionalApp ShellSchedulingRich Text Editor

Components

PageHeader

Page Title

This is a description of the page content.

Page content would go here

Usage:

<PageHeader 
  title="Page Title" 
  description="This is a description of the page content."
  actions={
    <div className="flex gap-2">
      <Button variant="outline">Secondary Action</Button>
      <Button>Primary Action</Button>
    </div>
  }
/>

BackButton

Back

Usage:

<BackButton href="/path/to/previous/page" />

Card Components

Card Title
Card description goes here

This is the main content of the card.

Tabs

Content for Tab 1