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 to choose from.

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 a card with header, content, and footer.

Interactive slideshow for cycling through content.

Visualize data with beautiful charts.

Control for multiple selections in a set.

Displays the status of a task in a circular indicator.

Circular slider for selecting values.

A component to copy text to the clipboard.

Collapsible content in a vertical stack.

Pick colors with hue and alpha controls.

Searchable select for filtering and choosing options.

Searchable command input with filtering.

A menu that appears when a user right-clicks on an element

A list of similar data items with labels and values.

A popover date picker with an input and calendar.

A dialog for displaying content.

A panel that slides in from the edge of the screen.

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.

Used to display content in a non-modal floating window

A framed container for grouping related information.

A lightweight, minimal tooltip that shows information.

A card that appears when a user hovers over an element.

Crop images with zoom, rotation, and aspect ratio.

Group input elements together.

Accessible one-time password input component

A field that allows users to enter text

A versatile component for displaying any content.

A keyboard shortcut component

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.

A number input component for entering numeric values

Navigate through a list of items.

Overlay with extra info or options on trigger.

Displays the status of a task that takes a long time.

Used to style remote HTML content.

Displays a QR code.

Allows single selection from multiple options.

Used to show reviews and ratings in a visual format.

Divides the interface into resizable sections.

A custom scrollable area component with styled scrollbars

Follows the selected item.

Displays a list of options to choose from.

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.

Looks like a tooltip, but works like a popover.

A 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.