Components

A collapsible for displaying content.

Display an action bar for selected items.

Dialog for displaying important content.

Displays an alert for user attention.

Inline notice for short, prominent updates.

Wrapper that maintains aspect ratio for content.

Displays a searchable list of options.

Displays a user's profile image with fallback.

A badge or an element styled as a badge.

Fixed bottom nav for mobile-first apps.

Shows user location within a hierarchy.

Group button elements together.

A button or an element styled as a button.

Select a date or a range of dates.

Displays content about a single subject.

Lets users cycle through a series of items.

Visualize data with beautiful charts.

Control for multiple selections in a set.

Shows task progress with a circular indicator.

Circular slider for selecting values.

Copy text to the clipboard.

Collapsible content in a vertical stack.

Pick colors with hue and alpha controls.

Displays a searchable list of options.

Searchable command input with filtering.

A menu shown on right-click.

A list of label-value pairs.

Input with a built-in calendar.

A dialog for displaying content.

A sliding panel with swipe support.

Allows user to edit text in-place.

Container for inputs, labels, and helper text.

A component that allows users to upload files.

Anchor an element to the edge of a container.

Displays content in a floating window.

Bordered box for grouping related content.

Minimal tooltip for showing information.

Popover that appears on hover.

Crop and transform images.

Group input elements together.

Accessible one-time password input.

A field that allows users to enter text.

A versatile component for displaying content.

Styled representation of a single key.

Makes the whole card or article clickable.

Select a single or multiple items from a list.

Scrolls items in a horizontal container.

List of options on button interaction.

Styled native HTML select element.

Numeric input for entering values.

Navigate through a list of items.

Overlay with extra info or options on trigger.

Displays task progress with a linear indicator.

Typography styles for HTML content.

Displays a QR code.

Allows single selection from multiple options.

Show reviews and ratings in a visual format.

Divides the interface into resizable sections.

Custom scrollable area with styled scrollbars.

Follows the selected item.

Displays a list of options.

Visually separate content with a line.

Content that slides in from the screen edge.

A sidebar for navigation and app structure.

Capture hand-drawn signatures.

Displays a loading state.

Lets keyboard users skip to main content.

A slider for selecting a value from a range.

A spinner for displaying a loading state.

Color-coded status for process or state.

Steps in a wizard-like format.

A switch for toggling a binary state.

A responsive table component.

A tabs for navigating between content.

Form textarea or textarea-styled component.

Countdown or stopwatch with controls.

Provides feedback on an action.

Toggle buttons for selecting a value.

Display information on click.

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

Display information on hover or focus.

Displays a guided tour of the application.

Hierarchical data in a tree structure.