Documentation
Next.js 16 · Tailwind v4 · shadcn/ui

Component Documentation

A living catalogue of every component in this design system. Each page shows a live preview and the code, styled entirely from the 1,804 Figma design tokens — colors, spacing, radius, and typography map 1:1 to Tailwind classes.

Browse components View design tokens

Form & Input

17
Button
/docs/button
Button Group
/docs/button-group
Checkbox
/docs/checkbox
Field
/docs/field
Input
/docs/input
Input Group
/docs/input-group
Input OTP
/docs/input-otp
Label
/docs/label
Native Select
/docs/native-select
Combobox
/docs/combobox
Radio Group
/docs/radio-group
Select
/docs/select
Slider
/docs/slider
Switch
/docs/switch
Textarea
/docs/textarea
Toggle
/docs/toggle
Toggle Group
/docs/toggle-group

Display

12
Avatar
/docs/avatar
Badge
/docs/badge
Card
/docs/card
Carousel
/docs/carousel
Chart
/docs/chart
Empty
/docs/empty
Item
/docs/item
Kbd
/docs/kbd
Progress
/docs/progress
Skeleton
/docs/skeleton
Spinner
/docs/spinner
Table
/docs/table

Navigation

6
Breadcrumb
/docs/breadcrumb
Menubar
/docs/menubar
Navigation Menu
/docs/navigation-menu
Pagination
/docs/pagination
Sidebar
/docs/sidebar
Tabs
/docs/tabs

Overlay

9
Alert Dialog
/docs/alert-dialog
Context Menu
/docs/context-menu
Dialog
/docs/dialog
Drawer
/docs/drawer
Dropdown Menu
/docs/dropdown-menu
Hover Card
/docs/hover-card
Popover
/docs/popover
Sheet
/docs/sheet
Tooltip
/docs/tooltip

Data

5
Accordion
/docs/accordion
Collapsible
/docs/collapsible
Command
/docs/command
Data Table
/docs/data-table
Separator
/docs/separator

Feedback

2
Alert
/docs/alert
Sonner
/docs/sonner

Utility

4
Aspect Ratio
/docs/aspect-ratio
Calendar
/docs/calendar
Date Picker
/docs/date-picker
Scroll Area
/docs/scroll-area

Foundations

1
Icons
/docs/icons

Design Tokens

4
Colors
/docs/colors
Typography
/docs/typography
Spacing
/docs/spacing
Radius
/docs/radius

60 documented entries · Add a new one by appending to components/docs/registry.tsx.