Components

A collapsible for displaying content.

Display an action bar for selected items.

Dialog for displaying important content.

Displays an alert for user attention.

A compound badge designed to display announcements.

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.