Components

66 components across 53 pages — a few, like the card and its header, are documented together. Each page covers the props, the keyboard behaviour and the things worth knowing before you use it.

Primitives

The small parts that end up in every screen.

Button

Six variants, five sizes, a loading state and an anchor mode.

Badge

A small status label, with an optional leading dot.

Avatar

Picture, initials or a fallback glyph, with a status dot.

CopyButton

Copies a string and confirms it in place.

ThemeToggle

Light and dark, or a segmented control that adds system.

Spinner

A borrowed-border spinner that takes the current text colour.

Skeleton

Grey placeholder blocks, with a shortcut for stacked text lines.

Separator

A hairline, horizontal or vertical, optionally with a label.

Kbd

A key cap for documenting shortcuts.

Code

Inline code, bordered so it separates from the sentence.

Layout

Boxes to put the rest in.

Card

A bordered box with optional header, content and footer parts.

EmptyState

The dashed box for lists that have nothing in them yet.

Forms

Inputs, their labels and their error states.

Field

Wires a label, help text and error message to one control.

Input

Text input in three sizes, with slots inside either end.

NumberInput

A quantity field with step buttons that does not lose what you typed.

Textarea

Multi-line input that can grow with its content.

Select

The native select, styled, with an options array or your own markup.

Checkbox

Checkbox with a label, help text and an indeterminate state.

RadioGroup

A set of radios that share a name and a bound value.

SegmentedControl

A short list of options as one strip, for choices worth seeing.

Switch

An on/off toggle for settings that apply immediately.

Slider

A styled range input with an optional formatted value.

PinInput

One box per character, for verification codes.

TagInput

Free-text tags with keyboard editing and a limit.

FileDrop

A drop zone that is also a real file input.

Label

A form label with an optional required marker.

Feedback

Telling people what happened.

Alert

An inline message in six tones, optionally dismissible.

Toaster

The toast container, plus the `toast` function that feeds it.

Progress

A determinate or indeterminate bar.

ProgressRing

The round version, for tight spots and dashboards.

Tooltip

A short hint on hover and on keyboard focus.

Overlays

Everything that renders above the page.

Modal

A centred dialog with a backdrop, focus trap and footer slot.

Drawer

The same dialog, sliding in from any edge.

Popover

A positioned panel anchored to a trigger you supply.

DropdownMenu

An anchored menu with full keyboard control.

CommandPalette

Fuzzy search over a list of commands, on a global shortcut.

Navigation

Moving between views and pages.

Tabs

Underlined or pill tabs with arrow-key navigation.

Accordion

Collapsible sections, one at a time or several at once.

Breadcrumb

The trail back up, from an array of items.

Pagination

Page numbers with ellipses, and a compact mode on phones.

Data

Numbers and tables, without a chart library.

Table

Styling for plain table markup, in two tones.

Stat

A single number with a label and a trend.

Sparkline

A trend line that fills its container, without a chart library.

Heatmap

One cell per value, shaded with the accent.

Effects

Motion for landing pages and empty states.

Typewriter

Types a line, pauses, deletes it and moves to the next.

Terminal

A fake shell session that types itself.

Caret

The blinking bar on its own, in three shapes.

Scramble

Settles from random glyphs into the real text.

CountUp

Counts to a number when it scrolls into view.

Odometer

Digits that roll like a mechanical counter.

Marquee

A looping strip that pauses on hover.

Reveal

Fades content in as it scrolls into view.

Highlight

A marker stroke that draws itself across the text.