Design System

A showcase of the design system components and patterns

OverviewAI GuideTypographyComponentsLayoutsPatternsColors & AnimationsAdvancedAdditionalApp ShellSchedulingRich Text Editor

App Shell

Sidebar

Sidebar Component
Navigation sidebar with collapsible sections

Usage:

<Sidebar
  title="My App"
  logo={<Logo />}
  items={[
    {
      title: "Dashboard",
      href: "/dashboard",
      icon: <HomeIcon />,
      active: true,
    },
    {
      title: "Users",
      icon: <UsersIcon />,
      children: [
        {
          title: "List",
          href: "/users",
        },
        {
          title: "Create",
          href: "/users/create",
        },
      ],
    },
  ]}
  collapsed={sidebarCollapsed}
  onToggle={toggleSidebar}
/>

Navbar

Navbar Component
Top navigation bar with user menu and notifications

Usage:

<Navbar
  title="My App"
  logo={<Logo />}
  items={[
    { title: "Dashboard", href: "/dashboard", active: true },
    { title: "Users", href: "/users" },
    { title: "Settings", href: "/settings" },
  ]}
  user={{
    name: "John Doe",
    email: "john@example.com",
  }}
  userMenuActions={[
    { label: "Profile", href: "/profile", icon: <UserIcon /> },
    { label: "Logout", onClick: handleLogout, icon: <LogOutIcon /> },
  ]}
  onSidebarToggle={toggleSidebar}
  showThemeToggle
  showNotifications
  unreadNotificationsCount={3}
/>

Complete App Shell

App Shell Component
Combined sidebar and navbar for a complete application shell

Dashboard

Dashboard

Welcome to the application dashboard.

Card 1

This is a sample card in the dashboard.

Card 2

This is a sample card in the dashboard.

Card 3

This is a sample card in the dashboard.

Usage:

<AppShell
  sidebar={
    <Sidebar title="My App">
      <nav className="px-4 py-2 space-y-1">
        {sidebarItems.map((item) => (
          <a
            key={item.title}
            href={item.href}
            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium"
          >
            {item.icon}
            <span>{item.title}</span>
          </a>
        ))}
      </nav>
    </Sidebar>
  }
  navbar={
    <Navbar
      left={<h2 className="text-xl font-bold">Dashboard</h2>}
      right={
        <div className="flex items-center gap-4">
          <NotificationsButton count={3} onClick={handleNotifications} />
          <UserMenu user={user} actions={userMenuActions} />
        </div>
      }
    />
  }
>
  <div className="p-6">
    <h1>Main Content</h1>
    {/* Your application content goes here */}
  </div>
</AppShell>