Components

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention with optional glassy variant.

A modal dialog that interrupts the user with important content and expects a response.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge with glassy variant.

Displays the path to the current resource using a hierarchy of links.

Displays a button or a component that looks like a button with glassy variants.

A date field component that allows users to enter and edit date.

Displays a card with optional glassy variant.

Chart components built with Recharts with optional glassy variant.

A control that allows the user to toggle between checked and not checked with optional glassy variant.

An interactive component which expands/collapses a panel.

Fast, composable, unstyled command menu for React.

An image cropper component with optional glassy variant.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A drawer component for mobile with optional glassy variant.

Displays a menu to the user — such as a set of actions or functions — triggered by a button with optional glassy variant.

For sighted users to preview content available behind a link.

Displays a form input field with optional glassy variant.

Accessible one-time password component with copy paste functionality.

Renders an accessible label associated with controls.

A theme switcher component with optional glassy variant.

A collection of links for navigating websites.

Pagination with page navigation with optional glassy variant.

Displays rich content in a portal, triggered by a button with optional glassy variant.

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time with optional glassy variant.

Augments native scroll functionality for custom, cross-browser styling.

Displays a list of options for the user to pick from—triggered by a button with optional glassy variant.

Visually or semantically separates content with optional glassy variant.

Extends the Dialog component to display content that complements the main content of the screen.

A sidebar component with optional glassy variant.

Use to show a placeholder while content is loading with optional glassy variant.

An input where the user selects a value from within a given range.

An opinionated toast component for React.

A control that allows the user to toggle between checked and not checked with optional glassy variant.

A responsive table component with optional glassy variant.

A set of layered sections of content—known as tab panels—that are displayed one at a time with optional glassy variant.

Displays a form textarea with optional glassy variant.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it with optional glassy variant.