Components

Complete 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: Trigger an action with a text label, an icon, or both.
• 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: Toggle a button between pressed and unpressed states.
• Toggle Group: Group related pressed-state buttons.
• Toolbar: Group related actions with directional keyboard navigation.

Forms & selection

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

Navigation

• Command: Find and run actions in an inline list or a dialog.
• Breadcrumb: Show the current location within a navigation hierarchy.
• Navigation Menu: Open site sections from a row of links with dropdown panels.
• Pagination: Move between pages of a long list or table.
• Tabs: Switch between associated content panels.
• Sidebar: Build application navigation with desktop collapse and a mobile sheet.
• Dashboard Shell: Compose a sidebar, header, and scrolling application content.

Overlays & disclosure

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

Date & color

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

Data display

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

Charts

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

Feedback

• Alert: Present an inline message with a title and optional actions.
• Empty State: Explain why a collection has no content and what to do next.
• Meter: Measure a current value within a known range.
• Progress: Show how much of an operation has completed.
• Skeleton: Reserve space while application content loads.
• Spinner: Indicate that an operation is still in progress.
• Toast: Show temporary feedback with dismissible notifications.

Layout & utilities

• Frame: Group raised panels inside a shared frame.
• Kbd: Display a key or keyboard shortcut.
• Motion: Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code.
• Scroll Area: Constrain overflowing content with styled scrollbars.
• Separator: Divide related sections with a horizontal or vertical line.
• Code: Display inline code or a copyable block of text.
• 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: Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label.
• Icon Morphs: Animate a menu trigger between closed and open states.
• Theme Toggles: Switch between light and dark mode with an animated sun and moon toggle.

Glass

• Glass: A translucent variant of Button, Tooltip, Popover, Menu, Context Menu and Card for surfaces over a picture.