Components

Pick colors with hue and alpha controls.

Allows user to edit text in-place.

Container for inputs, labels, and helper text.

A component that allows users to upload files.

A field that allows users to enter text.

Group input elements together.

Accessible one-time password input.

Numeric input for entering values.

A field for entering secure text.

Capture hand-drawn signatures.

Allows users to add tags to an input field.

Form textarea or textarea-styled component.

A searchable input that suggests options while allowing custom values.

Control for multiple selections in a set.

Displays a searchable list of options.

Select a single or multiple items from a list.

Styled native HTML select element.

Allows single selection from multiple options.

Show reviews and ratings in a visual format.

Follows the selected item.

Displays a list of options.

A switch for toggling a binary state.

Two-state button that can be toggled on or off.

Toggle buttons for selecting a value.

Select a date, dates, or a range from an inline calendar.

Segmented input for dates and times.

Input with a built-in calendar.

A control for selecting an angle in a circular range.

A progress-ring dial for selecting an angle.

A slider for selecting a value from a range.

Countdown or stopwatch with controls.

Triggers an action or navigates when used as a link.

Visually connected buttons and related controls.

Copy text to the clipboard.

Display information on click.

Display an action bar for selected items.

A modal for critical confirmations and destructive actions.

Searchable command input with filtering.

A modal window that appears on top of the main content.

A sliding panel with swipe support.

Displays content in a floating window.

Popover that appears on hover.

Overlay with extra info or options on trigger.

Content that slides in from the screen edge.

Display information on hover or focus.

Displays a guided tour of the application.

A menu shown on right-click.

Open one panel or many. For FAQs, settings, and other disclosure UI.

Collapsible content in a vertical stack.

Hierarchical data in a tree structure.

Fixed bottom nav for mobile-first apps.

Shows the current page in a hierarchy.

Makes the whole card or article clickable.

Navigate through a list of items.

A sidebar for navigation and app structure.

Lets keyboard users skip to main content.

Steps in a wizard-like format.

Highlights the heading in view on docs and long pages.

Mutually exclusive panels in one region.

Displays an alert for user attention.

Inline notice for short, prominent updates.

A compact label for status, counts, and categories.

Shows task progress with a circular indicator.

Minimal tooltip for showing information.

Displays task progress with a linear indicator.

Displays a loading state.

A spinner for displaying a loading state.

Color-coded status for process or state.

Provides feedback on an action.

Wrapper that maintains aspect ratio for content.

A surface for a single subject: header, media, body, and footer.

Anchor an element to the edge of a container.

Bordered box for grouping related content.

A versatile component for displaying content.

Divides the interface into resizable sections.

Custom scrollable area with styled scrollbars.

Visually separate content with a line.

Visualize data with beautiful charts.

A list of label-value pairs.

A responsive table component.

Displays a user's profile image with fallback.

An interactive slideshow for cycling through items.

Crop and transform images.

Click to zoom images, SVG, and diagrams.

Scrolls items in a horizontal container.

Displays a QR code.

Styled representation of a single key.

Typography styles for HTML content.

Labeled part diagrams for component docs.

Key / Description rows with keycap shortcuts.

Expandable Prop / Type rows for component APIs.