# Components

88 components with editable source, complete examples, and current API references.

Complete [installation](/docs/installation/) once, then add the components your application needs. Each preview includes a full standalone TSX file. Field is installed with Input; support modules are installed as dependencies.

## Actions

- [Button](/docs/components/button/): Trigger an action with a text label, an icon, or both.
- [Copy Button](/docs/components/copy-button/): Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement.
- [Toggle](/docs/components/toggle/): Toggle a button between pressed and unpressed states.
- [Toggle Group](/docs/components/toggle-group/): Group related pressed-state buttons.
- [Toolbar](/docs/components/toolbar/): Group related actions with directional keyboard navigation.

## Forms & selection

- [Input](/docs/components/input/): Enter a single line of text or a native input value.
- [Textarea](/docs/components/textarea/): Enter and edit multiline text.
- [Number Field](/docs/components/number-field/): Edit a numeric value with typing, stepping or scrubbing.
- [OTP Field](/docs/components/otp-field/): Enter a short verification code in separate or joined slots.
- [Label](/docs/components/label/): Give a native form control a visible accessible name.
- [Field](/docs/components/field/): Connect a control with its label, help and validation.
- [Fieldset](/docs/components/fieldset/): Group related form fields under a shared legend.
- [Form](/docs/components/form/): Submit related fields and display validation feedback.
- [Checkbox](/docs/components/checkbox/): Select or clear an independent option.
- [Checkbox Group](/docs/components/checkbox-group/): Choose any number of related options.
- [Radio Group](/docs/components/radio-group/): Choose one option from a related set.
- [Switch](/docs/components/switch/): Turn a setting on or off.
- [Slider](/docs/components/slider/): Choose a numeric value or range by moving one or more thumbs.
- [Select](/docs/components/select/): Choose from a fixed set of options without text filtering.
- [Combobox](/docs/components/combobox/): Search and choose from known options.
- [Autocomplete](/docs/components/autocomplete/): Suggest completions while allowing free text.
- [List Box](/docs/components/list-box/): Choose one item from a visible list.
- [Input Group](/docs/components/input-group/): Attach text, icons or actions to an input surface.
- [Group](/docs/components/group/): Join related controls into one visual group.

## Navigation

- [Command](/docs/components/command/): Find and run actions in an inline list or a dialog.
- [Breadcrumb](/docs/components/breadcrumb/): Show the current location within a navigation hierarchy.
- [Navigation Menu](/docs/components/navigation-menu/): Open site sections from a row of links with dropdown panels.
- [Pagination](/docs/components/pagination/): Move between pages of a long list or table.
- [Tabs](/docs/components/tabs/): Switch between associated content panels.
- [Sidebar](/docs/components/sidebar/): Build application navigation with desktop collapse and a mobile sheet.
- [Dashboard Shell](/docs/components/dashboard-shell/): Compose a sidebar, header, and scrolling application content.

## Overlays & disclosure

- [Accordion](/docs/components/accordion/): Expand or collapse related content sections.
- [Collapsible](/docs/components/collapsible/): Show or hide a single section of content.
- [Context Menu](/docs/components/context-menu/): Show actions for an element on right-click or long press.
- [Menu](/docs/components/menu/): Offer a compact list of actions and choices.
- [Dropdown Menu](/docs/components/dropdown-menu/): Build a menu with DropdownMenu-prefixed part names.
- [Dialog](/docs/components/dialog/): Display a focused task in an overlay with a title and a clear close action.
- [Alert Dialog](/docs/components/alert-dialog/): Ask for a deliberate decision before continuing.
- [Drawer](/docs/components/drawer/): Open an edge panel with swipe dismissal.
- [Detail Drawer](/docs/components/detail-drawer/): Show record details in a right-side drawer.
- [Sheet](/docs/components/sheet/): Open content in an edge panel.
- [Popover](/docs/components/popover/): Open contextual content next to a trigger.
- [Preview Card](/docs/components/preview-card/): Preview a link’s destination without leaving the current page.
- [Tooltip](/docs/components/tooltip/): Add a short description to a control on hover or focus.

## Date & color

- [Calendar](/docs/components/calendar/): Choose a date, several dates or a date range.
- [Date Field](/docs/components/date-field/): Edit a date with keyboard segments or a calendar.
- [Date Picker](/docs/components/date-picker/): Choose a date from a button-triggered calendar.
- [Date Range Picker](/docs/components/date-range-picker/): Edit and select a start and end date.
- [Date Time Picker](/docs/components/date-time-picker/): Edit a local date and time in one control.
- [Time Field](/docs/components/time-field/): Edit an hour and minute with segments or a selector.
- [Color Picker](/docs/components/color-picker/): Choose a hex color with a swatch, hue slider, and channel fields.
- [Color Swatch Picker](/docs/components/color-swatch-picker/): Select a named color or image from an application-owned palette.

## Data display

- [Avatar](/docs/components/avatar/): Represent a person with an image or a text fallback.
- [Avatar Group](/docs/components/avatar-group/): Show several people as a row of overlapping avatars with an optional overflow count.
- [Badge](/docs/components/badge/): Label a status, category, or count.
- [File Type Icon](/docs/components/file-type-icon/): Show a file’s type as a document icon with its extension.
- [Card](/docs/components/card/): Group related content and actions on a surface.
- [Data List](/docs/components/data-list/): Show the details of one record as label and value rows, side by side or stacked.
- [Tag Group](/docs/components/tag-group/): Display, select, and remove a keyboard-navigable collection of tags.
- [Table](/docs/components/table/): Display structured data with keyboard navigation, optional sorting, and row selection.
- [Resource List](/docs/components/resource-list/): Display resources with status indicators, metadata and optional interactive rows.
- [Filter Bar](/docs/components/filter-bar/): Arrange search, filters and actions above a collection.
- [Settings List](/docs/components/settings-list/): Arrange labeled settings and their controls in a shared card.
- [Stepper](/docs/components/stepper/): Show ordered steps and their progress.
- [Timeline](/docs/components/timeline/): Present events in chronological order.

## Charts

- [Bar Chart](/docs/components/bar-chart/): Compare values across categories as columns or horizontal bars, side by side or stacked.
- [Line Chart](/docs/components/line-chart/): Show how one or several measures change over time or across ordered categories.
- [Area Chart](/docs/components/area-chart/): Show how one or several measures change over time as filled areas, overlaid or stacked.
- [Pie Chart](/docs/components/pie-chart/): Show how a total divides into shares as a donut or pie chart.
- [Bar List](/docs/components/bar-list/): Rank labelled values with a bar for each, relative to the largest.
- [Sparkline](/docs/components/sparkline/): Show the trend of one or several measures in a small chart without axes.

## Feedback

- [Alert](/docs/components/alert/): Present an inline message with a title and optional actions.
- [Empty State](/docs/components/empty-state/): Explain why a collection has no content and what to do next.
- [Meter](/docs/components/meter/): Measure a current value within a known range.
- [Progress](/docs/components/progress/): Show how much of an operation has completed.
- [Skeleton](/docs/components/skeleton/): Reserve space while application content loads.
- [Spinner](/docs/components/spinner/): Indicate that an operation is still in progress.
- [Toast](/docs/components/toast/): Show temporary feedback with dismissible notifications.

## Layout & utilities

- [Frame](/docs/components/frame/): Group raised panels inside a shared frame.
- [Kbd](/docs/components/kbd/): Display a key or keyboard shortcut.
- [Motion](/docs/components/motion/): Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code.
- [Scroll Area](/docs/components/scroll-area/): Constrain overflowing content with styled scrollbars.
- [Separator](/docs/components/separator/): Divide related sections with a horizontal or vertical line.
- [Code](/docs/components/code/): Display inline code or a copyable block of text.
- [Truncate](/docs/components/truncate/): Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip.

## Animated

- [Animated Buttons](/docs/components/animated-buttons/): Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label.
- [Icon Morphs](/docs/components/icon-morphs/): Animate a menu trigger between closed and open states.
- [Theme Toggles](/docs/components/theme-toggles/): Switch between light and dark mode with an animated sun and moon toggle.

## Glass

- [Glass](/docs/components/glass/): A translucent variant of Button, Tooltip, Popover, Menu, Context Menu and Card for surfaces over a picture.