01

Color

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

Swatches
primary
#18181b
neutral
#6b7280
success
#22c55e
warning
#f59e0b
error
#ef4444
primary ramp
neutral ramp
success ramp
warning ramp
error ramp
02

Typography

Display type is set in the mono face; body copy in the sans.

Display
The quick brown fox
Geist Mono, ui-monospace, monospace
Body
The quick brown fox jumps over the lazy dog. Body copy is set in the sans face for readability at long lengths.
Inter, system-ui, sans-serif
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 shadows. Every surface on this page derives from your radius token.

Radius
base0.375rem
md0.625rem
lg0.875rem
xl1.125rem
04

Accordion

Imported from @/components/ui/accordion

Usage
tsx
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
tsx
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert variant="default" />
06

AlertDialog

Imported from @/components/ui/alert-dialog

Usage
tsx
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

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

<AspectRatio />
08

Avatar

Imported from @/components/ui/avatar

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

<Avatar />
09

Badge

Imported from @/components/ui/badge

Variants
AxisOptions (default in bold)
variantdefault, secondary, destructive, outline
Usage
tsx
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
tsx
import { Button } from "@/components/ui/button";

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

Calendar

Imported from @/components/ui/calendar

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

<Calendar />
13

Card

Imported from @/components/ui/card

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

<Card />
15

ChartContainer

Imported from @/components/ui/chart

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

<ChartContainer />
16

Checkbox

Imported from @/components/ui/checkbox

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

<Checkbox />
17

Collapsible

Imported from @/components/ui/collapsible

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

<Collapsible />
18

Combobox

Imported from @/components/ui/combobox

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

<Combobox />
19

Command

Imported from @/components/ui/command

Usage
tsx
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
tsx
import { Component } from "@/components/ui/luma-spin";

<Component />
21

ContextMenu

Imported from @/components/ui/context-menu

Usage
tsx
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

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

<DataTable />
23

DatePicker

Imported from @/components/ui/date-picker

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

<DatePicker />
24

Dialog

Imported from @/components/ui/dialog

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

<Dialog />
25

Drawer

Imported from @/components/ui/drawer

Usage
tsx
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
tsx
import { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from "@/components/ui/form";

<Form />
28

HoverCard

Imported from @/components/ui/hover-card

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

<HoverCard />
29

Input

Imported from @/components/ui/input

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

<Input />
30

InputOTP

Imported from @/components/ui/input-otp

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

<InputOTP />
31

Label

Imported from @/components/ui/label

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

Usage
tsx
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
tsx
import { MultiSelect } from "@/components/ui/multi-select";

<MultiSelect />
35

Popover

Imported from @/components/ui/popover

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

<Popover />
36

Progress

Imported from @/components/ui/progress

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

<Progress />
37

RadioGroup

Imported from @/components/ui/radio-group

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

<RadioGroup />
38

ResizablePanelGroup

Imported from @/components/ui/resizable

Usage
tsx
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
tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

<ScrollArea />
40

Select

Imported from @/components/ui/select

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

<Select />
41

Separator

Imported from @/components/ui/separator

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

<Separator />
42

Sheet

Imported from @/components/ui/sheet

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

<Sheet />
43

SidebarProvider

Imported from @/components/ui/sidebar

Usage
tsx
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

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

<Skeleton />
45

Slider

Imported from @/components/ui/slider

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

<Slider />
46

Switch

Imported from @/components/ui/switch

Usage
tsx
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
tsx
import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "@/components/ui/table";

<Table />
48

Tabs

Imported from @/components/ui/tabs

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

<Tabs />
49

Textarea

Imported from @/components/ui/textarea

Usage
tsx
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
tsx
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
tsx
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
tsx
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
tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

<ToggleGroup variant="default" />
54

Tooltip

Imported from @/components/ui/tooltip

Usage
tsx
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
tsx
import { VercelV0Chat } from "@/components/ui/v0-ai-chat";

<VercelV0Chat />