The design system that governs itself. Every token and component on this page is extracted from this repo and kept on system by ChoiceUI.
The palette every surface, control, and state draws from.
Display type is set in the mono face; body copy in the sans.
Corner radii and shadows. Every surface on this page derives from your radius token.
Imported from @/components/ui/accordion
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 { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@/components/ui/alert-dialog";
<AlertDialog />Imported from @/components/ui/aspect-ratio
import { AspectRatio } from "@/components/ui/aspect-ratio";
<AspectRatio />Imported from @/components/ui/avatar
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 { Calendar } from "@/components/ui/calendar";
<Calendar />Imported from @/components/ui/card
import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "@/components/ui/card";
<Card />Imported from @/components/ui/carousel
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
<Carousel />Imported from @/components/ui/chart
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 { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
<Collapsible />Imported from @/components/ui/combobox
import { Combobox } from "@/components/ui/combobox";
<Combobox />Imported from @/components/ui/command
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 { DataTable } from "@/components/ui/data-table";
<DataTable />Imported from @/components/ui/date-picker
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 { 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 { 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 { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp";
<InputOTP />Imported from @/components/ui/label
Import from @/components/ui/label and compose per the design system.
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 { Progress } from "@/components/ui/progress";
<Progress />Imported from @/components/ui/radio-group
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
<RadioGroup />Imported from @/components/ui/resizable
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 { 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 { Skeleton } from "@/components/ui/skeleton";
<Skeleton />Imported from @/components/ui/slider
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 />