Components
76 accessible components, each one command away.
- AccordionStacked sections that expand one at a time, or several at once.
- AlertA message that stays on the page, with an optional icon.
- Alert DialogA modal that asks the user to confirm or cancel; clicking outside does not dismiss it.
- Aspect RatioA box that keeps a width-to-height ratio, filled by its content.
- AutocompleteA text input with suggestions; the value is whatever the user types.
- AvatarA person's picture, with initials while it loads or if it fails. Includes a status badge and overlapping groups.
- BadgeA short status or count label.
- BreadcrumbWhere the current page sits in the site's hierarchy.
- ButtonAn action trigger with default, outline, secondary, ghost, destructive, and link variants.
- Button GroupJoins related Buttons into one row that shares borders.
- CalendarA month grid for picking a single date, a range, or several dates, built on react-day-picker.
- CardA surface that groups related content.
- CarouselA slideshow built on Embla, composed from Root, Content, Item, Previous, and Next.
- ChartThe shared parts of every chart: frame, grid, axes, tooltip, and a legend that hides series.
- Area ChartAn area chart for trends over a range, with a soft fill under each line.
- Bar ChartA bar chart for comparing values across categories, grouped, stacked, or horizontal.
- Funnel ChartA funnel chart for drop-off through ordered steps.
- HeatmapA heatmap for intensity across two categories, as an accessible table of tinted cells.
- Line ChartA line chart for change over a range, with one or more series.
- Pie ChartA pie or donut chart for the parts of a whole, with an optional total in the middle.
- Radar ChartA radar chart for comparing a few series across the same axes.
- Radial ChartA radial chart for progress toward a goal, or a few values on concentric rings.
- Sankey ChartA sankey chart for flow between stages.
- Scatter ChartA scatter chart for how two measures relate, with optional dot size for a third.
- TreemapA treemap for sizes within a whole, as nested rectangles.
- CheckboxA checkbox with checked, unchecked, and indeterminate states.
- Checkbox GroupShares one array value between a set of Checkboxes, with optional select-all.
- CollapsibleA section that shows and hides its panel.
- ComboboxPicks a value from a list you can filter by typing.
- CommandA searchable command list with groups, shortcuts, and an empty state, inline or in a dialog.
- Context MenuA menu opened by right-clicking or long-pressing an area.
- Data TableA table with sortable columns, row selection, and pagination, built on Table in plain React state.
- Date PickerA button that opens a Calendar in a Popover to pick a date or a date range.
- DialogA modal window composed from Root, Trigger, Content, Header, Footer, Title, Description, and Close.
- DrawerA modal panel that slides in from any edge and can be swiped away. Set swipeDirection to right or left for a side sheet.
- Dropdown MenuA menu of actions opened from a button, with checkbox, radio, and submenu items.
- EmptyAn empty state with media, a title, a description, and actions.
- FieldGroups a control with its label, description, and error, and wires up accessibility and validation.
- FieldsetGroups related fields under a legend; disabling it disables every field inside.
- FormA form that validates its Fields together and focuses the first invalid one on submit.
- Hover CardA preview of a link's destination, shown while a pointer rests on the link.
- IconsThe icons Shelf components use, in one file you own. lucide-react by default; swap the imports to change libraries.
- InputA text input that takes part in a Field's label, description, and validation.
- Input GroupAn input with text, icons, or buttons attached inside its border.
- Input OTPA one-time code input with one slot per character and paste support.
- ItemA list row of media, a title, a description, and actions, that can render as a link.
- KbdA keyboard key.
- LabelA text label for a form control.
- MenubarA row of menus, as in a desktop app, with arrow-key movement between them.
- MeterA measurement within a known range, such as storage used.
- Native SelectThe browser's own select, styled to match Input and Select, with option groups.
- Navigation MenuSite navigation where items open panels of links in one shared surface.
- Number FieldA number input with step buttons, keyboard stepping, and locale-aware formatting.
- PaginationLinks between the pages of a long list.
- PopoverRich, interactive content in a floating panel opened from a button.
- ProgressHow far along a task is, or that it is in progress.
- Radio GroupA set of options where exactly one can be chosen, with arrow-key navigation.
- ResizablePanels resized by dragging or the keyboard, composed from Group, Panel, and Handle.
- Scroll AreaA native scrolling region with thin, themed scrollbars.
- SelectPicks one value from a list of options.
- SeparatorA horizontal or vertical dividing line.
- SidebarAn app-shell sidebar that collapses offcanvas or to icons and becomes a sheet on small screens.
- SkeletonA placeholder shape while content loads.
- SliderA draggable input for a single value or a range.
- SparklineA tiny line with no axes, for a table cell or a stat.
- SpinnerA spinning loading indicator.
- SwitchAn on/off control that takes effect immediately.
- TableA semantic HTML table with Shelf styles.
- TabsSwitches between panels of related content.
- TextareaA multi-line text input that grows with its content and takes part in a Field.
- ToastBrief notifications queued from anywhere in the app: stacked, swipeable, with success, error, and loading states.
- ToggleA two-state button with default and outline variants.
- Toggle GroupA set of Toggles sharing one value, with arrow-key navigation.
- ToolbarA row of controls that is one Tab stop, with arrow-key movement.
- TooltipA short label shown on hover and keyboard focus.
- TypographyProse styles for headings, paragraphs, lead text, quotes, lists, and inline code.