Every token and component below is captured straight from this repo by ChoiceUI, and governed by it. This is the living catalog: what exists, how it varies, and how to drop it in.
The monochrome palette every surface, control, and state draws from.
Inter for the interface, Geist Mono for code.
Corner radii and elevation. Every surface on this page derives from the radius token.
Imported from @/components/ui/accordion
Import from @/components/ui/accordion and compose per the design system.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
<Accordion />Imported from @/components/ui/alert
| Axis | Options (default in bold) |
|---|---|
| variant | default, destructive, caution |
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="default" />Imported from @/components/ui/alert-dialog
Import from @/components/ui/alert-dialog and compose per the design system.
import { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@/components/ui/alert-dialog";
<AlertDialog />Imported from @/components/ui/aspect-ratio
Import from @/components/ui/aspect-ratio and compose per the design system.
import { AspectRatio } from "@/components/ui/aspect-ratio";
<AspectRatio />Imported from @/components/ui/avatar
Import from @/components/ui/avatar and compose per the design system.
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar />Imported from @/components/ui/badge
| Axis | Options (default in bold) |
|---|---|
| variant | default, secondary, destructive, outline |
import { Badge } from "@/components/ui/badge";
<Badge variant="default" />Imported from @/components/ui/calendar
Import from @/components/ui/calendar and compose per the design system.
import { Calendar } from "@/components/ui/calendar";
<Calendar />Imported from @/components/ui/card
Import from @/components/ui/card and compose per the design system.
import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "@/components/ui/card";
<Card />Imported from @/components/ui/carousel
Import from @/components/ui/carousel and compose per the design system.
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
<Carousel />Imported from @/components/ui/chart
Import from @/components/ui/chart and compose per the design system.
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
<ChartContainer />Imported from @/components/ui/checkbox
import { Checkbox } from "@/components/ui/checkbox";
<Checkbox />Imported from @/components/ui/collapsible
Import from @/components/ui/collapsible and compose per the design system.
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
<Collapsible />Imported from @/components/ui/combobox
Import from @/components/ui/combobox and compose per the design system.
import { Combobox } from "@/components/ui/combobox";
<Combobox />Imported from @/components/ui/command
Import from @/components/ui/command and compose per the design system.
import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@/components/ui/command";
<Command />Imported from @/components/ui/luma-spin
Import from @/components/ui/luma-spin and compose per the design system.
import { Component } from "@/components/ui/luma-spin";
<Component />Imported from @/components/ui/data-table
Import from @/components/ui/data-table and compose per the design system.
import { DataTable } from "@/components/ui/data-table";
<DataTable />Imported from @/components/ui/date-picker
Import from @/components/ui/date-picker and compose per the design system.
import { DatePicker, DateRangePicker, DatePickerCombined } from "@/components/ui/date-picker";
<DatePicker />Imported from @/components/ui/dialog
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
<Dialog />Imported from @/components/ui/drawer
Import from @/components/ui/drawer and compose per the design system.
import { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "@/components/ui/drawer";
<Drawer />Imported from @/components/ui/form
Import from @/components/ui/form and compose per the design system.
import { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from "@/components/ui/form";
<Form />Imported from @/components/ui/hover-card
Import from @/components/ui/hover-card and compose per the design system.
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";
<HoverCard />Imported from @/components/ui/input
import { Input } from "@/components/ui/input";
<Input />Imported from @/components/ui/input-otp
Import from @/components/ui/input-otp and compose per the design system.
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp";
<InputOTP />Imported from @/components/ui/label
import { Label } from "@/components/ui/label";
<Label />Imported from @/components/ui/multi-select
Import from @/components/ui/multi-select and compose per the design system.
import { MultiSelect } from "@/components/ui/multi-select";
<MultiSelect />Imported from @/components/ui/popover
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
<Popover />Imported from @/components/ui/progress
Import from @/components/ui/progress and compose per the design system.
import { Progress } from "@/components/ui/progress";
<Progress />Imported from @/components/ui/radio-group
Import from @/components/ui/radio-group and compose per the design system.
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
<RadioGroup />Imported from @/components/ui/resizable
Import from @/components/ui/resizable and compose per the design system.
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
<ResizablePanelGroup />Imported from @/components/ui/scroll-area
Import from @/components/ui/scroll-area and compose per the design system.
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
<ScrollArea />Imported from @/components/ui/select
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select";
<Select />Imported from @/components/ui/separator
Import from @/components/ui/separator and compose per the design system.
import { Separator } from "@/components/ui/separator";
<Separator />Imported from @/components/ui/sheet
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "@/components/ui/sheet";
<Sheet />Imported from @/components/ui/skeleton
Import from @/components/ui/skeleton and compose per the design system.
import { Skeleton } from "@/components/ui/skeleton";
<Skeleton />Imported from @/components/ui/slider
Import from @/components/ui/slider and compose per the design system.
import { Slider } from "@/components/ui/slider";
<Slider />Imported from @/components/ui/switch
import { Switch } from "@/components/ui/switch";
<Switch />Imported from @/components/ui/table
Import from @/components/ui/table and compose per the design system.
import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "@/components/ui/table";
<Table />Imported from @/components/ui/tabs
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs />Imported from @/components/ui/textarea
import { Textarea } from "@/components/ui/textarea";
<Textarea />Imported from @/components/ui/sonner
Import from @/components/ui/sonner and compose per the design system.
import { Toaster } from "@/components/ui/sonner";
<Toaster />Imported from @/components/ui/toast
Import from @/components/ui/toast and compose per the design system.
import { Toaster } from "@/components/ui/toast";
<Toaster />Imported from @/components/ui/toggle
| Axis | Options (default in bold) |
|---|---|
| variant | default, outline |
| size | default, sm, lg |
import { Toggle } from "@/components/ui/toggle";
<Toggle variant="default" size="default" />Imported from @/components/ui/toggle-group
Import from @/components/ui/toggle-group and compose per the design system.
| Axis | Options (default in bold) |
|---|---|
| variant | default, outline |
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
<ToggleGroup variant="default" />Imported from @/components/ui/tooltip
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
<Tooltip />Imported from @/components/ui/v0-ai-chat
Import from @/components/ui/v0-ai-chat and compose per the design system.
import { VercelV0Chat } from "@/components/ui/v0-ai-chat";
<VercelV0Chat />