Supabase Design System

https://supabase-design-system.vercel.app/design-system
Admin
The Supabase Design System provides design resources, including atom and fragment components,...
Tokens:110,786
Snippets:960
Trust Score:7.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Background Utility Examples

Source: https://supabase-design-system.vercel.app/design-system/docs/tailwind-classes

Examples of using background primitives with the bg utility and text color utilities.

```text
bg-surface-100
bg-overlay
bg-alternative
text-background-surface-100
```

--------------------------------

### Border Utility Examples

Source: https://supabase-design-system.vercel.app/design-system/docs/tailwind-classes

Examples of applying border primitives and using them with text color utilities.

```text
border-overlay
border-alternative
text-border-control
```

--------------------------------

### Installation Command

Source: https://supabase-design-system.vercel.app/design-system/docs/components/input-otp

Command to add the input-otp component to your project.

```bash
npx shadcn-ui@latest add input-otp
```

--------------------------------

### Installation Command

Source: https://supabase-design-system.vercel.app/design-system/docs/components/resizable

Command to add the resizable component to your project.

```bash
npx shadcn-ui@latest add resizable
```

--------------------------------

### Installation Command

Source: https://supabase-design-system.vercel.app/design-system/docs/components/dropdown-menu

Use the CLI to add the dropdown menu component to your project.

```bash
npx shadcn-ui@latest add dropdown-menu
```

--------------------------------

### Render a simple PageHeader example

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/page-header

A concise example showing the basic composition of a PageHeader with a single action button.

```tsx
<PageHeader size="default">
  <PageHeaderMeta>
    <PageHeaderIcon>
      <Card className="flex h-14 w-14 shrink-0 items-center justify-center">
        <Database className="h-5 w-5" />
      </Card>
    </PageHeaderIcon>
    <PageHeaderSummary>
      <PageHeaderTitle>Templates</PageHeaderTitle>
      <PageHeaderDescription>Manage email templates for your project.</PageHeaderDescription>
    </PageHeaderSummary>
    <PageHeaderAside>
      <Button variant="primary" size="tiny">
        Create template
      </Button>
    </PageHeaderAside>
  </PageHeaderMeta>
</PageHeader>
```

--------------------------------

### Install Context Menu component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/context-menu

Use the CLI to add the component to your project.

```bash
npx shadcn-ui@latest add context-menu
```

--------------------------------

### Installation Dependencies

Source: https://supabase-design-system.vercel.app/design-system/docs/components/sonner

Command to install the required packages for Sonner.

```bash
npm install sonner next-themes
```

--------------------------------

### Install Pagination component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/pagination

Use the CLI to add the pagination component to your project.

```bash
npx shadcn-ui@latest add pagination
```

--------------------------------

### Install form component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/form

Command to add the form component to your project.

```bash
npx shadcn-ui@latest add form
```

--------------------------------

### Foreground Utility Examples

Source: https://supabase-design-system.vercel.app/design-system/docs/tailwind-classes

Examples of applying foreground color primitives to text and background elements.

```jsx
<div className="text-foreground">/div>
<div className="text-foreground-light">/div>
<div className="text-foreground-lighter">/div>
<div className="text-foreground-muted">/div>
<div className="bg-foreground-light">/div>
```

--------------------------------

### Install Navigation Menu

Source: https://supabase-design-system.vercel.app/design-system/docs/components/navigation-menu

Command to add the navigation menu component to your project.

```bash
npx shadcn-ui@latest add navigation-menu
```

--------------------------------

### Slider Installation

Source: https://supabase-design-system.vercel.app/design-system/docs/components/slider

Command to install the Slider component via shadcn-ui.

```bash
npx shadcn-ui@latest add slider
```

--------------------------------

### Install Select Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/select

Command to add the Select component to your project using shadcn-ui.

```bash
npx shadcn-ui@latest add select
```

--------------------------------

### Install Carousel Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/carousel

Use the CLI to add the carousel component to your project.

```bash
npx shadcn-ui@latest add carousel
```

--------------------------------

### Install Menubar Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/menubar

Command to add the Menubar component to your project using the CLI.

```bash
npx shadcn-ui@latest add menubar
```

--------------------------------

### Install Sidebar Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/sidebar

Use the shadcn CLI to add the sidebar component to your project.

```bash
npx shadcn@latest add sidebar
```

--------------------------------

### Installation Command

Source: https://supabase-design-system.vercel.app/design-system/docs/components/calendar

Command to add the Calendar component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add calendar
```

--------------------------------

### Install Command Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/command

Command to add the component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add command
```

--------------------------------

### Basic Tooltip Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/tooltip

A minimal example of the Tooltip component structure.

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

--------------------------------

### Install Alert Dialog

Source: https://supabase-design-system.vercel.app/design-system/docs/components/alert-dialog

Use the shadcn-ui CLI to add the Alert Dialog component to your project.

```bash
npx shadcn-ui@latest add alert-dialog
```

--------------------------------

### Install Toggle Group via CLI

Source: https://supabase-design-system.vercel.app/design-system/docs/components/toggle-group

Use the shadcn-ui CLI to add the component to your project.

```bash
npx shadcn-ui@latest add toggle-group
```

--------------------------------

### Install Skeleton Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/skeleton

Command to add the Skeleton component to your project using shadcn-ui.

```bash
npx shadcn-ui@latest add skeleton
```

--------------------------------

### Label Import and Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/label

Shows the standard import path and a simple implementation example.

```tsx
import { Label } from '@/components/ui/label'
```

```tsx
<Label htmlFor="email">Your email address</Label>
```

--------------------------------

### Basic Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/resizable

Import statements and a minimal horizontal panel group example.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
```

```tsx
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
```

--------------------------------

### Install Card component via CLI

Source: https://supabase-design-system.vercel.app/design-system/docs/components/card

Use the shadcn-ui CLI to add the Card component to your project.

```bash
npx shadcn-ui@latest add card
```

--------------------------------

### Install Toggle Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/toggle

Command to add the toggle component to your project using shadcn-ui.

```bash
npx shadcn-ui@latest add toggle
```

--------------------------------

### Install Input Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/input

Command to add the Input component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add input
```

--------------------------------

### Install Switch Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/switch

Command to add the Switch component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add switch
```

--------------------------------

### Install Tooltip Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/tooltip

Command to add the tooltip component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add tooltip
```

--------------------------------

### Implement Confirmation Modal

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/confirmation-modal

Example implementation of a ConfirmationModal with state management for visibility and action handlers.

```javascript
export default function ConfirmationModalDemo() {
  const [visible, setVisible] = useState(false)
 
  return (
    <>
      <Button onClick={() => setVisible(true)}>Show Confirmation Modal</Button>
 
      <ConfirmationModal
        visible={visible}
        size="small"
        title="Resume this project"
        confirmLabel="Resume"
        confirmLabelLoading="Resuming"
        cancelLabel="Cancel"
        onConfirm={() => {
          setVisible(false)
        }}
        onCancel={() => {
          setVisible(false)
        }}
      >
        This will resume the project and restart any paused processes.
      </ConfirmationModal>
    </>
  )
}
```

--------------------------------

### Checkbox Installation

Source: https://supabase-design-system.vercel.app/design-system/docs/components/checkbox

Command to add the checkbox component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add checkbox
```

--------------------------------

### Install Textarea Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/textarea

Command to add the Textarea component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add textarea
```

--------------------------------

### Install Drawer Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/drawer

Command to add the drawer component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add drawer
```

--------------------------------

### Install Aspect Ratio

Source: https://supabase-design-system.vercel.app/design-system/docs/components/aspect-ratio

Command to add the Aspect Ratio component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add aspect-ratio
```

--------------------------------

### Install Sheet Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/sheet

Command to add the Sheet component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add sheet
```

--------------------------------

### Install Progress Component via CLI

Source: https://supabase-design-system.vercel.app/design-system/docs/components/progress

Adds the progress component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add progress
```

--------------------------------

### Install Accordion Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/accordion

Command to add the accordion component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add accordion
```

--------------------------------

### Install Separator Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/separator

Command to add the separator component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add separator
```

--------------------------------

### Implement SkipToContent component

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/skip-to-content

A full implementation example showing the component structure and its interaction with the main content landmark.

```tsx
import { SkipToContent } from 'ui-patterns/SkipToContent'
 
export function SkipToContentDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-md border bg-studio">
      <div className="flex items-center border-b px-4 py-3 text-sm text-foreground-muted">
        Demo header / navigation
      </div>
      {/* Preview shows the focused appearance; production hides until Tab */}
      <SkipToContent href="#skip-demo-main" className="relative left-3 top-2 translate-y-0" />
      <main id="skip-demo-main" tabIndex={-1} className="outline-hidden p-6 pt-2">
        <p className="text-sm text-foreground-light">
          Main content landmark. In a real app, Tab once to reveal the skip link, then Enter to jump
          here.
        </p>
      </main>
    </div>
  )
}
```

--------------------------------

### Install Field component via CLI

Source: https://supabase-design-system.vercel.app/design-system/docs/components/field

Use the shadcn CLI to add the Field component to your project.

```bash
npx shadcn@latest add field
```

--------------------------------

### Aspect Ratio Demo

Source: https://supabase-design-system.vercel.app/design-system/docs/components/aspect-ratio

Example implementation of the Aspect Ratio component wrapping a Next.js Image.

```tsx
import Image from 'next/image'
import { AspectRatio } from 'ui'
 
export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <Image
        src="https://images.unsplash.com/photo-1560937526-61078e7eb7d8?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Photo by Drew Beamer"
        fill
        className="rounded-md object-cover"
      />
    </AspectRatio>
  )
}
```

--------------------------------

### Install Popover component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/popover

Command to add the Popover component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add popover
```

--------------------------------

### Install Avatar Component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/avatar

Command to add the Avatar component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add avatar
```

--------------------------------

### Basic Accordion Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/accordion

A minimal example showing how to implement a single collapsible accordion item.

```tsx
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Basic NavMenu structure

Source: https://supabase-design-system.vercel.app/design-system/docs/components/nav-menu

A minimal example showing the structure of the NavMenu component with active and inactive items.

```tsx
<NavMenu>
  <NavMenuItem active={true}>
    <Link href="#">Overview</Link>
  </NavMenuItem>
  <NavMenuItem active={false}>
    <Link href="#">Documentation</Link>
  </NavMenuItem>
</NavMenu>
```

--------------------------------

### Interstitial Layout Usage Examples

Source: https://supabase-design-system.vercel.app/design-system/docs/ui-patterns/connect-interstitials

Examples of using InterstitialLayout for standard flows and wider project linking flows.

```tsx
<InterstitialLayout
  logo={
    <LogoPair
      left={<PartnerLogo src={`${BASE_PATH}/img/icons/stripe-icon.svg`} alt="Stripe" />}
      right={<SupabaseLogo />}
    />
  }
  title="Authorize Stripe Projects"
  description="This will create an organization on your behalf in Supabase"
>
  <div className="px-6 pb-6">
    <InterstitialAccountRow displayName={displayName} />
    <Button variant="primary" block>
      Continue
    </Button>
  </div>
</InterstitialLayout>
```

```tsx
<InterstitialLayout
  logo={<LogoPair left={<VercelLogo />} right={<SupabaseLogo />} />}
  title="Connect Vercel project"
  containerClassName="items-start"
  cardClassName="max-w-[900px]"
>
  <div className="px-6 pb-6">{projectLinker}</div>
</InterstitialLayout>
```

--------------------------------

### SVG design examples

Source: https://supabase-design-system.vercel.app/design-system/docs/icons

Examples of invalid and valid SVG structures for custom icons. Valid icons must avoid hardcoded colors and use proper viewBox attributes.

```xml
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24" fill="#1E1E1E" /> <!-- ❌ Hardcoded color -->
  <path d="M..." fill="#404040" /> <!-- ❌ Hardcoded color -->
  <path d="M..." stroke="#EDEDED" stroke-linecap="round" /> <!-- ❌ Hardcoded color -->
</svg>
```

```xml
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 7C6 4.2 8.2 2 11 2H13C15.8 2 18 4.2 18 7" />
  <path d="M4.5 11H19.5" />
  <path d="M6 11L6.8 20C6.9 21.1 7.9 22 9 22H12" />
</svg>
```

```xml
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M..." fill="currentColor" />
</svg>
```

```xml
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 7C6 4.2 8.2 2 11 2H13C15.8 2 18 4.2 18 7" />
  <path d="M4.5 11H19.5" />
  <path d="M6 11L6.8 20C6.9 21.1 7.9 22 9 22H12" />
</svg>
```

--------------------------------

### Implement a full-featured Context Menu

Source: https://supabase-design-system.vercel.app/design-system/docs/components/context-menu

Demonstrates a comprehensive implementation including sub-menus, checkboxes, radio groups, and keyboard shortcuts.

```tsx
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'ui'
 
export function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem inset>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem inset disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem inset>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-48">
            <ContextMenuItem>
              Save Page As...
              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
            <ContextMenuItem>Name Window...</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked>
          Show Bookmarks Bar
          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value="pedro">
          <ContextMenuLabel inset>People</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

--------------------------------

### Dropdown Menu Implementation

Source: https://supabase-design-system.vercel.app/design-system/docs/components/dropdown-menu

A comprehensive example demonstrating nested sub-menus, keyboard shortcuts, icons, and disabled states.

```tsx
import {
  Cloud,
  CreditCard,
  Github,
  Keyboard,
  LifeBuoy,
  LogOut,
  Mail,
  MessageSquare,
  Plus,
  PlusCircle,
  Settings,
  User,
  UserPlus,
  Users,
} from 'lucide-react'
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from 'ui'
 
export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User className="mr-2 h-4 w-4" />
            <span>Profile</span>
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCard className="mr-2 h-4 w-4" />
            <span>Billing</span>
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings className="mr-2 h-4 w-4" />
            <span>Settings</span>
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Keyboard className="mr-2 h-4 w-4" />
            <span>Keyboard shortcuts</span>
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <Users className="mr-2 h-4 w-4" />
            <span>Team</span>
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <UserPlus className="mr-2 h-4 w-4" />
              <span>Invite users</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuItem>
                  <Mail className="mr-2 h-4 w-4" />
                  <span>Email</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <MessageSquare className="mr-2 h-4 w-4" />
                  <span>Message</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <PlusCircle className="mr-2 h-4 w-4" />
                  <span>More...</span>
                </DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuPortal>
          </DropdownMenuSub>
          <DropdownMenuItem>
            <Plus className="mr-2 h-4 w-4" />
            <span>New Team</span>
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Github className="mr-2 h-4 w-4" />
          <span>GitHub</span>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <LifeBuoy className="mr-2 h-4 w-4" />
          <span>Support</span>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <Cloud className="mr-2 h-4 w-4" />
          <span>API</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOut className="mr-2 h-4 w-4" />
          <span>Log out</span>
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

--------------------------------

### Install Scroll Area

Source: https://supabase-design-system.vercel.app/design-system/docs/components/scroll-area

Command to add the ScrollArea component to your project.

```bash
npx shadcn-ui@latest add scroll-area
```

--------------------------------

### Install Breadcrumb component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/breadcrumb

Command to add the Breadcrumb component to your project.

```bash
npx shadcn-ui@latest add breadcrumb
```

--------------------------------

### Basic Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/dropdown-menu

Import the necessary components and structure the menu with triggers and items.

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
```

```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Display Python Code Block

Source: https://supabase-design-system.vercel.app/design-system/docs/ui-patterns/markdown

A basic example of a Python code block.

```python
def hello_world():
    print("Hello, World!")
```

--------------------------------

### Display JavaScript Code Block

Source: https://supabase-design-system.vercel.app/design-system/docs/ui-patterns/markdown

A basic example of a JavaScript code block.

```javascript
const greeting = 'Hello, World!'
console.log(greeting)
```

--------------------------------

### StatusCode Basic Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/status-codes

A minimal example of rendering a single StatusCode component.

```tsx
<StatusCode method="GET" statusCode="200" />
```

--------------------------------

### Drawer Demo with Chart

Source: https://supabase-design-system.vercel.app/design-system/docs/components/drawer

A complete example demonstrating a drawer containing a state-managed goal tracker and a Recharts bar chart.

```tsx
'use client'
 
import { Minus, Plus } from 'lucide-react'
import * as React from 'react'
import { Bar, BarChart, ResponsiveContainer } from 'recharts'
import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from 'ui'
 
const data = [
  {
    goal: 400,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 278,
  },
  {
    goal: 189,
  },
  {
    goal: 239,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 278,
  },
  {
    goal: 189,
  },
  {
    goal: 349,
  },
]
 
export function DrawerDemo() {
  const [goal, setGoal] = React.useState(350)
 
  function onClick(adjustment: number) {
    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
  }
 
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="default" size="small">
          Open Drawer
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Move Goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <div className="p-4 pb-0">
            <div className="flex items-center justify-center space-x-2">
              <Button
                variant="outline"
                size="small"
                className="h-8 w-8 shrink-0 rounded-full"
                onClick={() => onClick(-10)}
                disabled={goal <= 200}
              >
                <Minus className="h-4 w-4" />
                <span className="sr-only">Decrease</span>
              </Button>
              <div className="flex-1 text-center">
                <div className="text-7xl font-bold tracking-tighter">{goal}</div>
                <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
              </div>
              <Button
                variant="outline"
                size="small"
                className="h-8 w-8 shrink-0 rounded-full"
                onClick={() => onClick(10)}
                disabled={goal >= 400}
              >
                <Plus className="h-4 w-4" />
                <span className="sr-only">Increase</span>
              </Button>
            </div>
            <div className="mt-3 h-[120px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                  <Bar
                    dataKey="goal"
                    style={
                      {
                        fill: 'var(--foreground-default)',
                        opacity: 0.9,
                      } as React.CSSProperties
                    }
                  />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose asChild>
              <Button variant="outline">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

--------------------------------

### Menubar Component Implementation

Source: https://supabase-design-system.vercel.app/design-system/docs/components/menubar

A comprehensive example demonstrating the structure of a Menubar with multiple menus, submenus, checkboxes, and radio groups.

```tsx
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'ui'
 
export function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>New Incognito Window</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print... <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Find</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Search the web</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Find...</MenubarItem>
              <MenubarItem>Find Next</MenubarItem>
              <MenubarItem>Find Previous</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
          <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarItem inset>
            Reload <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled inset>
            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Hide Sidebar</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarRadioGroup value="benoit">
            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
          </MenubarRadioGroup>
          <MenubarSeparator />
          <MenubarItem inset>Edit...</MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Add Profile...</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

--------------------------------

### Basic SingleValueFieldArray usage

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/single-value-field-array

A minimal implementation example showing the required props for the component.

```jsx
<SingleValueFieldArray
  control={form.control}
  name="redirectUris"
  valueFieldName="value"
  createEmptyRow={() => ({ value: '' })}
  placeholder="https://example.com/callback"
  addLabel="Add redirect URI"
/>
```

--------------------------------

### FormItemLayout Implementation

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/form-item-layout

A complete example demonstrating the integration of FormItemLayout with react-hook-form and zod validation.

```typescript
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form, FormControl, FormField } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
 
const formSchema = z.object({
  username: z.string().min(2, {
    message: 'Username must be at least 2 characters.',
  }),
})
 
export function FormItemLayoutDemo() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
    },
  })
 
  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values)
    // action('form form.handleSubmit(onSubmit)')(values)
  }
  return (
    <Form {...form}>
      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          name="username"
          control={form.control}
          render={({ field }) => (
            <FormItemLayout
              label="Username"
              description="This is your public display name"
              labelOptional="optional"
            >
              <FormControl>
                <Input placeholder="mildtomato" {...field} />
              </FormControl>
            </FormItemLayout>
          )}
        />
        <Button size="small" variant="secondary" type="submit">
          Submit
        </Button>
      </form>
    </Form>
  )
}
```

--------------------------------

### Resizable Handle Example

Source: https://supabase-design-system.vercel.app/design-system/docs/components/resizable

Shows how to display a handle icon using the withHandle prop.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}
```

--------------------------------

### Implement basic Admonition

Source: https://supabase-design-system.vercel.app/design-system/docs/fragments/admonition

Render a standard Admonition with a title and description.

```jsx
<Admonition
  type="default"
  title="Is it accessible?"
  description="Yes. It adheres to the WAI-ARIA design pattern."
/>
```

--------------------------------

### Vertical Orientation Example

Source: https://supabase-design-system.vercel.app/design-system/docs/components/resizable

Demonstrates using the direction prop to create a vertical layout.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}
```

--------------------------------

### Horizontal Scrolling Example

Source: https://supabase-design-system.vercel.app/design-system/docs/components/scroll-area

Implementation of a horizontal scroll area using the ScrollBar component.

```tsx
import Image from 'next/image'
import * as React from 'react'
import { ScrollArea, ScrollBar } from 'ui'
 
export interface Artwork {
  artist: string
  art: string
}
 
export const works: Artwork[] = [
  {
    artist: 'Ornella Binni',
    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Tom Byrom',
    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Vladimir Malyavko',
    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
  },
]
 
export function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
      <div className="flex w-max space-x-4 p-4">
        {works.map((artwork) => (
          <figure key={artwork.artist} className="shrink-0">
            <div className="overflow-hidden rounded-md">
              <Image
                src={artwork.art}
                alt={`Photo by ${artwork.artist}`}
                className="aspect-3/4 h-fit w-fit object-cover"
                width={300}
                height={400}
              />
            </div>
            <figcaption className="pt-2 text-xs text-muted-foreground">
              Photo by <span className="font-semibold text-foreground">{artwork.artist}</span>
            </figcaption>
          </figure>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}
```

--------------------------------

### Input OTP with Separator

Source: https://supabase-design-system.vercel.app/design-system/docs/components/input-otp

Example of using the separator component to group input slots.

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
 
...
 
<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>
```

--------------------------------

### Basic Menubar Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/menubar

Minimal implementation showing the required imports and basic structure of a single menu.

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar'
```

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

--------------------------------

### Avatar Component Usage

Source: https://supabase-design-system.vercel.app/design-system/docs/components/avatar

Basic usage example for rendering an Avatar with an image and fallback.

```tsx
<Avatar>
  <AvatarImage src="https://github.com/mildtomato.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

--------------------------------

### Import Context Menu components

Source: https://supabase-design-system.vercel.app/design-system/docs/components/context-menu

Import the necessary components from your local UI directory.

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'
```

--------------------------------

### Install Tabs component

Source: https://supabase-design-system.vercel.app/design-system/docs/components/tabs

Command to add the Tabs component to your project using the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add tabs
```
Tokens:
Raw