01

Color

The monochrome palette every surface, control, and state draws from.

Swatches
zinc
#71717a
red
#ef4444
amber
#fffbeb
emerald
#ecfdf5
green
#f0fdf4
white
#ffffff
background
oklch(1 0 0)
foreground
oklch(0.129 0 0)
sidebar-ring
oklch(0.704 0 0)
sidebar-border
oklch(0.929 0 0)
sidebar-accent-foreground
oklch(0.208 0 0)
sidebar-accent
oklch(0.968 0 0)
sidebar-primary-foreground
oklch(0.984 0 0)
sidebar-primary
oklch(0.208 0 0)
sidebar-foreground
oklch(0.129 0 0)
sidebar
oklch(0.984 0 0)
chart-5
oklch(0.769 0.188 70.08)
chart-4
oklch(0.828 0.189 84.429)
chart-3
oklch(0.398 0.07 227.392)
chart-2
oklch(0.6 0.118 184.704)
chart-1
oklch(0.646 0.222 41.116)
ring
oklch(0.704 0 0)
input
oklch(0.929 0 0)
border
oklch(0.929 0 0)
destructive
oklch(0.577 0.245 27.325)
accent-foreground
oklch(0.208 0 0)
accent
oklch(0.968 0 0)
muted-foreground
oklch(0.554 0 0)
muted
oklch(0.968 0 0)
secondary-foreground
oklch(0.208 0 0)
secondary
#6b7280
primary-foreground
#ffffff
primary
#18181b
popover-foreground
oklch(0.129 0 0)
popover
oklch(1 0 0)
card-foreground
oklch(0.129 0 0)
card
oklch(1 0 0)
neutral
#6b7280
zinc ramp
red ramp
white ramp
secondary ramp
primary-foreground ramp
primary ramp
neutral ramp
02

Typography

Inter for the interface, Geist Mono for code.

Families
sans: Inter, system-ui, sans-serif
mono: Geist Mono, ui-monospace, monospace
Scale
5xlThe quick brown fox jumps over the lazy dog
3xlThe quick brown fox jumps over the lazy dog
xlThe quick brown fox jumps over the lazy dog
baseThe quick brown fox jumps over the lazy dog
smThe quick brown fox jumps over the lazy dog
03

Radius and elevation

Corner radii and elevation. Every surface on this page derives from the radius token.

Radius
base0.625rem
md0.625rem
lg0.625rem
xl0.625rem
04

Accordion

Imported from @/components/ui/accordion

Import from @/components/ui/accordion and compose per the design system.

Usage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";

<Accordion />
05

Alert

Imported from @/components/ui/alert

Variants
AxisOptions (default in bold)
variantdefault, destructive, caution
Usage
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert variant="default" />
06

AlertDialog

Imported from @/components/ui/alert-dialog

Import from @/components/ui/alert-dialog and compose per the design system.

Usage
import { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@/components/ui/alert-dialog";

<AlertDialog />
07

AspectRatio

Imported from @/components/ui/aspect-ratio

Import from @/components/ui/aspect-ratio and compose per the design system.

Usage
import { AspectRatio } from "@/components/ui/aspect-ratio";

<AspectRatio />
08

Avatar

Imported from @/components/ui/avatar

Import from @/components/ui/avatar and compose per the design system.

Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

<Avatar />
09

Badge

Imported from @/components/ui/badge

Badge
Variants
AxisOptions (default in bold)
variantdefault, secondary, destructive, outline
Usage
import { Badge } from "@/components/ui/badge";

<Badge variant="default" />
11

Button

Imported from @/components/ui/button

Variants
AxisOptions (default in bold)
variantdefault, destructive, outline, secondary, ghost, link
sizedefault, sm, lg, icon
radiusnone, sm, md, lg, xl, full
Usage
import { Button } from "@/components/ui/button";

<Button variant="default" size="default" radius="md" />
12

Calendar

Imported from @/components/ui/calendar

Import from @/components/ui/calendar and compose per the design system.

Usage
import { Calendar } from "@/components/ui/calendar";

<Calendar />
13

Card

Imported from @/components/ui/card

Import from @/components/ui/card and compose per the design system.

Usage
import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "@/components/ui/card";

<Card />
15

ChartContainer

Imported from @/components/ui/chart

Import from @/components/ui/chart and compose per the design system.

Usage
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";

<ChartContainer />
16

Checkbox

Imported from @/components/ui/checkbox

Usage
import { Checkbox } from "@/components/ui/checkbox";

<Checkbox />
17

Collapsible

Imported from @/components/ui/collapsible

Import from @/components/ui/collapsible and compose per the design system.

Usage
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

<Collapsible />
18

Combobox

Imported from @/components/ui/combobox

Import from @/components/ui/combobox and compose per the design system.

Usage
import { Combobox } from "@/components/ui/combobox";

<Combobox />
19

Command

Imported from @/components/ui/command

Import from @/components/ui/command and compose per the design system.

Usage
import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@/components/ui/command";

<Command />
20

Component

Imported from @/components/ui/luma-spin

Import from @/components/ui/luma-spin and compose per the design system.

Usage
import { Component } from "@/components/ui/luma-spin";

<Component />
21

ContextMenu

Imported from @/components/ui/context-menu

Import from @/components/ui/context-menu and compose per the design system.

Usage
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup } from "@/components/ui/context-menu";

<ContextMenu />
22

DataTable

Imported from @/components/ui/data-table

Import from @/components/ui/data-table and compose per the design system.

Usage
import { DataTable } from "@/components/ui/data-table";

<DataTable />
23

DatePicker

Imported from @/components/ui/date-picker

Import from @/components/ui/date-picker and compose per the design system.

Usage
import { DatePicker, DateRangePicker, DatePickerCombined } from "@/components/ui/date-picker";

<DatePicker />
24

Dialog

Imported from @/components/ui/dialog

Usage
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

<Dialog />
25

Drawer

Imported from @/components/ui/drawer

Import from @/components/ui/drawer and compose per the design system.

Usage
import { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "@/components/ui/drawer";

<Drawer />
27

Form

Imported from @/components/ui/form

Import from @/components/ui/form and compose per the design system.

Usage
import { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from "@/components/ui/form";

<Form />
28

HoverCard

Imported from @/components/ui/hover-card

Import from @/components/ui/hover-card and compose per the design system.

Usage
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";

<HoverCard />
29

Input

Imported from @/components/ui/input

Usage
import { Input } from "@/components/ui/input";

<Input />
30

InputOTP

Imported from @/components/ui/input-otp

Import from @/components/ui/input-otp and compose per the design system.

Usage
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp";

<InputOTP />
31

Label

Imported from @/components/ui/label

Usage
import { Label } from "@/components/ui/label";

<Label />
33

MultiSelect

Imported from @/components/ui/multi-select

Import from @/components/ui/multi-select and compose per the design system.

Usage
import { MultiSelect } from "@/components/ui/multi-select";

<MultiSelect />
35

Popover

Imported from @/components/ui/popover

Usage
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";

<Popover />
36

Progress

Imported from @/components/ui/progress

Import from @/components/ui/progress and compose per the design system.

Usage
import { Progress } from "@/components/ui/progress";

<Progress />
37

RadioGroup

Imported from @/components/ui/radio-group

Import from @/components/ui/radio-group and compose per the design system.

Usage
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<RadioGroup />
38

ResizablePanelGroup

Imported from @/components/ui/resizable

Import from @/components/ui/resizable and compose per the design system.

Usage
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";

<ResizablePanelGroup />
39

ScrollArea

Imported from @/components/ui/scroll-area

Import from @/components/ui/scroll-area and compose per the design system.

Usage
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

<ScrollArea />
40

Select

Imported from @/components/ui/select

Usage
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select";

<Select />
41

Separator

Imported from @/components/ui/separator

Import from @/components/ui/separator and compose per the design system.

Usage
import { Separator } from "@/components/ui/separator";

<Separator />
42

Sheet

Imported from @/components/ui/sheet

Usage
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "@/components/ui/sheet";

<Sheet />
43

SidebarProvider

Imported from @/components/ui/sidebar

Import from @/components/ui/sidebar and compose per the design system.

Usage
import { SidebarProvider, Sidebar, SidebarHeader, SidebarFooter, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from "@/components/ui/sidebar";

<SidebarProvider />
44

Skeleton

Imported from @/components/ui/skeleton

Import from @/components/ui/skeleton and compose per the design system.

Usage
import { Skeleton } from "@/components/ui/skeleton";

<Skeleton />
45

Slider

Imported from @/components/ui/slider

Import from @/components/ui/slider and compose per the design system.

Usage
import { Slider } from "@/components/ui/slider";

<Slider />
46

Switch

Imported from @/components/ui/switch

Usage
import { Switch } from "@/components/ui/switch";

<Switch />
47

Table

Imported from @/components/ui/table

Import from @/components/ui/table and compose per the design system.

Usage
import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "@/components/ui/table";

<Table />
48

Tabs

Imported from @/components/ui/tabs

Account settings.
Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

<Tabs />
49

Textarea

Imported from @/components/ui/textarea

Usage
import { Textarea } from "@/components/ui/textarea";

<Textarea />
50

Toaster

Imported from @/components/ui/sonner

Import from @/components/ui/sonner and compose per the design system.

Usage
import { Toaster } from "@/components/ui/sonner";

<Toaster />
51

Toaster

Imported from @/components/ui/toast

Import from @/components/ui/toast and compose per the design system.

Usage
import { Toaster } from "@/components/ui/toast";

<Toaster />
52

Toggle

Imported from @/components/ui/toggle

Variants
AxisOptions (default in bold)
variantdefault, outline
sizedefault, sm, lg
Usage
import { Toggle } from "@/components/ui/toggle";

<Toggle variant="default" size="default" />
53

ToggleGroup

Imported from @/components/ui/toggle-group

Import from @/components/ui/toggle-group and compose per the design system.

Variants
AxisOptions (default in bold)
variantdefault, outline
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

<ToggleGroup variant="default" />
54

Tooltip

Imported from @/components/ui/tooltip

Usage
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";

<Tooltip />
55

VercelV0Chat

Imported from @/components/ui/v0-ai-chat

Import from @/components/ui/v0-ai-chat and compose per the design system.

Usage
import { VercelV0Chat } from "@/components/ui/v0-ai-chat";

<VercelV0Chat />