Components

Triggers an action. Seven variants, from the violet primary to the gradient signature CTA, in five sizes plus icon-only sizes.

Attached button clusters: split buttons, segmented controls and stacked avatar groups, composed from Button and Avatar.

Compact, selectable and dismissible tags for filters, labels and multi-select values.

Single-line and multi-line text fields, plus Field and Label for adding a label, helper text and a validation message.

One box per digit for verification codes, with auto-advance, backspace to go back, arrow key movement and paste to fill every slot.

An input-styled dropdown for picking one option from a short list, built on Radix Select.

A searchable select: an input-styled trigger opens a popover that filters options as you type.

A box for turning an option on or off, with an indeterminate state for partially selected groups. Built on Radix Checkbox.

A toggle for settings that take effect immediately, built on Radix Switch.

A set of options where exactly one can be selected. Built on Radix Radio Group with a violet indicator and full keyboard support.

Picks a number from a continuous or stepped range by dragging a thumb along a track. Wraps Radix Slider.

A button trigger that opens a single-month calendar in a popover. Picks one date, with no external date library.

Picks a start and end date from two months side by side, with quick presets and Cancel / Apply buttons.

A drag-and-drop zone with click-to-browse, plus file rows that show upload progress, success and retryable errors.

A surface for grouping related content, with header, content, footer and media parts in four variants.

A KPI tile with a mono label, a large value and an optional trend delta compared with last month.

Styled table primitives with sortable header cells, built on native table elements so you control data, sorting and selection.

Sits above a data table with search, filters and actions, and switches to a bulk-action bar when rows are selected.

Tappable rows in a bordered surface, each with an optional leading icon, a subtitle and a trailing chevron.

A small pill for status and labels, in neutral, accent, success, warning, error and outline variants.

An initials avatar in a violet-tinted circle, generated from a name, in three sizes.

A lightweight bar chart made with CSS and flexbox, no chart library, with one bar highlighted in the signature gradient.

Stacked sections that expand and collapse, built on Radix Accordion, for FAQs and long settings pages.

An inline status strip with a colored icon, a title, an optional description and an optional action, in four semantic variants.

A compact notification card with a status icon, a message and an optional dismiss button. Presentational: you own when it shows and hides.

A labeled horizontal progress bar with a percentage readout, exported as ProgressRow from the chart module.

A radial progress ring with an optional percentage in the center, in four status colors and any pixel size.

An indeterminate loading indicator in three sizes that inherits its color from the text color.

A zero-data placeholder with an icon, title, description and call to action. Full size for pages, compact for inside tables and panels.

The top of a screen: a mono eyebrow or breadcrumb, the page title, an optional status badge and description, and the primary actions.

Switch between related views in the same place. A segmented pill list by default, or an underlined line list for page sections.

Shows where the current page sits in the hierarchy, with links back to each parent. The last item reads as the current page.

Previous and next arrows with numbered pages, the current page in violet. Long ranges collapse to first, last and the pages around the current one.

Segmented progress for multi-step flows: a bar and numbered label per step, filled up to the current step.

A centered modal over a scrim, with a title bar and close button, a body and a footer. Three widths, built on Radix Dialog.

A panel that slides in from the left or right edge over a scrim, for detail views, edit forms and filters. Same anatomy as Dialog.

A Cmd/Ctrl+K search over grouped pages and actions with keyboard navigation. Mounted once in the app shell and opened from anywhere.

A menu of actions that opens from a trigger, with separators and a destructive item style. Built on Radix Dropdown Menu.

A small dark label with an arrow that appears on hover or keyboard focus, on any side of its trigger. Built on Radix Tooltip.