Components
Components
45 components, all built on the same tokens. Open one to see it in light and dark, its props, and how to install it.
Actions
4
- ButtonTriggers an action.
- DropdownMenuA menu of actions behind a button: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem (destructive, inset, leadingIcon, shortcut, asChild), DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal.
- ToggleA button with a persistent on or off state.
- ToggleGroupA keyboard-navigable group of single or multiple toggle choices.
Forms
14
- CalendarA month grid for picking one date inline.
- CheckboxA 16px box that turns one option on or off, or shows partly on (indeterminate).
- ColorPickerPicks a color from a 2D saturation and brightness area, a hue bar and a hex field, in a Popover.
- ComboboxPicks one value from a long list by typing to filter it: Combobox (value, defaultValue, onValueChange, open, emptyText, placeholder, size, name) with ComboboxItem and ComboboxGroup children.
- DatePickerA field-looking trigger that opens a Calendar in a Popover, for picking one date in a form.
- FieldOne form field: FieldLabel, FieldControl, FieldDescription and FieldError, with the ids linked and required, disabled and invalid set once.
- InputSingle-line text field.
- LabelVisible name of a form control, with an optional required marker or "(optional)" note, and an optional info button with a tooltip.
- RadioGroupOne choice out of a few options: RadioGroup with RadioGroupItem, each with a label and an optional description.
- SelectPicks one value from a list.
- SliderPicks a number, or a range of two, by dragging a thumb: one thumb per value.
- SwitchTurns a setting on or off at once.
- TextareaText field over several lines, with Input's look and states.
- TokenizerA field that collects several short values as Tokens: Enter or a comma adds one, Backspace removes the last.
Overlays
7
- AlertDialogConfirmation for a destructive action: Dialog's look, focus on Cancel, no close on a scrim click.
- CommandSearches and runs actions inline or in a dialog.
- DialogModal dialog with scrim and focus trap.
- PopoverA panel anchored to its trigger for a short form, filters or a share link: Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose.
- SheetA dialog that slides in from an edge: Sheet, SheetTrigger, SheetContent (side: top, right, bottom, left; size: sm, md, lg, full; showCloseButton), SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose.
- ToastA short message after an action, in the corner of the screen: mount one Toaster at the root and call toast({ title, description, variant, action, duration }).
- TooltipShort text hint for the element it wraps, on hover and keyboard focus: <Tooltip content="Copy link">.
Navigation
5
- BreadcrumbThe path to the current page: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink (asChild), BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis.
- LinkAn underlined destination with optional external indicator.
- PaginationMoves between pages: Pagination with page, pageCount, siblingCount and getHref (links) or onPageChange (buttons); or PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis for your own layout.
- SidebarApp shell navigation: SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarSection, SidebarItem, SidebarTrigger.
- TabsSwitches between panels in place.
Layout
3
Data display
7
- AvatarA person, team or workspace as a photo, or one or two initials on a hue pair when there is no photo.
- BadgeCompact status or category label.
- ImageDisplays an image in a frame that keeps its size, with a blurred placeholder that the full image fades in over.
- KbdDisplays a keyboard shortcut or key sequence.
- MetadataRead-only label and value pairs in a description list: <MetadataItem label="Owner">.
- TableRows of data: Table, TableHeader, TableBody, TableFooter, TableRow (selected), TableHead (align, numeric, fit, sortDirection, onSort), TableCell (align, numeric, fit), TableCaption, TableEmpty, and TableToolbar with TableActions for the bars above and below.
- TokenPill that names a token or short machine value, on a soft hue pair (pink by default), with an optional 12px icon, color swatch or 16px avatar, and an optional remove button (onRemove, removeLabel).
Feedback
5
- AlertAn inline named message with optional action and dismissal.
- EmptyStateExplains an empty successful result and its next action.
- ProgressA bar for how much of a task is done; no value makes it indeterminate.
- SkeletonA gray block that holds the place of content while it loads.
- SpinnerA turning arc for work of unknown length, with a visually hidden label.