Components

A modal dialog that interrupts the user with important content and expects a response. Scales in on a spring.

A window overlaid on the primary window, rendering the content underneath inert. Scales in from 96% on a spring.

A drawer component for React, built on vaul. Slides with transforms; its content rises in just after the sheet.

For sighted users to preview content available behind a link. Grows out of the link on a spring.

Displays rich content in a portal, triggered by a button. Grows out of its trigger on a spring.

Extends the Dialog component to display content that complements the main content of the screen. Slides its full width in on a spring.

An opinionated toast component for React. Toasts move on a spring with transform and opacity only; heights snap.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Grows out of its trigger after the delay; hops between triggers without re-animating.

Autocomplete input and command palette with a list of suggestions. The popup grows on a spring; chips pop in, and the chips after a removed one slide over.

Fast, composable, unstyled command menu for React. One highlight slides to the selected item.

Displays a menu to the user, such as a set of actions or functions, triggered by a right click. Grows out of the pointer; checks pop in.

Displays a menu to the user, such as a set of actions or functions, triggered by a button. Grows out of its trigger; checks pop in.

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. Each menu grows out of its trigger; hopping swaps menus.

Displays a list of options for the user to pick from, triggered by a button. Grows on a spring; the selected check pops in.

Displays a button or a component that looks like a button. Presses down on a spring.

A date field component that allows users to enter and edit date. Months drift in layers; a picked day pops and a range sweeps in.

A control that allows the user to toggle between checked and not checked. The check pops in from half size; the box presses on a spring.

Displays a form input field or a component that looks like an input field. The focus ring snaps, with no box-shadow transition.

Display additional information or actions to an input or textarea. The focus ring fades and grows in on its own layer.

Accessible one-time password component with copy paste functionality. Each digit rises into its slot; the caret blinks with opacity only.

A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. The dot grows in; items press on a spring.

An input where the user selects a value from within a given range. The thumb grows on a spring while you hold it.

A control that allows the user to toggle between checked and not checked. The thumb slides on a spring; the track color crossfades.

Displays a form textarea or a component that looks like a textarea. The focus ring snaps, with no box-shadow transition.

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

A set of two-state buttons that can be toggled on or off. Single-select groups slide one indicator to the pressed item.

A vertically stacked set of interactive headings that each reveal a section of content. The edge sweeps over still text; the rows ride it.

An interactive component which expands/collapses a panel. The panel's height snaps and the content after it slides into place.

A collection of links for navigating websites. Switching items slides the content in from the side you moved toward; the viewport snaps to size.

A composable, themeable and customizable sidebar component. Widths snap; the panel slides and the content beside it glides along.

A set of layered sections of content, known as tab panels, that are displayed one at a time. One indicator slides between tabs.

A carousel with motion and swipe built using Embla. Embla already slides the track on the GPU; reduced motion jumps instead.

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. The fill glides to each value on a spring; indeterminate bars sweep.

Use to show a placeholder while content is loading. A soft band sweeps across the block instead of a fade.