Components

The base clickable action element, with size/color/variant options and optional icon/link behavior.

A draggable, edge-snapping floating group of action buttons.

A pressed/unpressed button, for standalone toggles like a toolbar formatting button or a favorite/bookmark action — pair multiple instances with your own shared state for exclusive selection.

A filled trend over time — stacked to show a total, normalized to show share, or overlapping for two or three series. Strokes the top edge of each band so a stack stays readable where two fills meet, and takes `gradient` to fade the fill out toward its baseline.

Categorical comparison as bars, vertical or horizontal, with multiple series grouped, stacked, or normalized to 100%. Reach for `horizontal` whenever the category labels are words rather than dates.

The grid rules behind a cartesian plot, drawn from tick positions a chart has already computed. Paired with `ChartLabels`, which draws the text for the same ticks.

The shell every other chart is built in: it measures its container, reserves the axis margins, handles loading and empty states, places the legend and tooltip, and hands your default slot a plot rect to draw SVG into. Use it when the composition you need isn't one of the named charts.

Tick text and axis titles for a cartesian plot, positioned from ticks a chart has already computed. Paired with `ChartAxes`, which draws the rules for the same ticks.

The swatch-and-label list every multi-series chart renders under its plot. Presentational by default; `interactive` turns each entry into a button for an app that filters series.

The panel that follows the pointer across a plot, carrying a title and a list of swatch/label/value rows. Same chrome as `Tooltip`, but positioned from plot coordinates rather than anchored to an element.

A `PieChart` with its middle opened up and filled with the number the chart is actually about — a total, a headline share — as ordinary DOM rather than SVG text.

A single bounded value on a dial — an arc over a restricted sweep, with the exact number in the middle. Good for a status summary; a `Progress` bar is the better read when the value needs comparing to another one.

A matrix of cells coloured by magnitude on a single-hue sequential ramp, for spotting concentration across two categorical dimensions. Ships a ramp legend, since a cell's colour can't be read back to a number without one.

One or more trends over an ordered x axis, with a shared crosshair tooltip listing every series at the hovered position. The default for change over time — and with `guides="false"` and a small `height`, the inline sparkline in a stat tile or table cell.

Parts of a single whole as slices, sorted largest-first. Honest for two or three shares and a rough read of the rest; past about five slices a `BarChart` compares them far better.

Several comparable measures as one closed polygon per profile, for comparing shapes across five to eight axes. Every axis shares one radial scale, so the measures have to be normalized to a common range first.

Bars bent around a circle — a rose growing outward from a shared centre, or concentric activity rings. A compact summary; bending a bar makes its length depend on its radius, so a plain `BarChart` is the honest choice for close ranking.

Two quantities against each other as points, optionally grouped by colour and sized by a third value for a bubble chart. Keep colour groups to three — any two points can end up adjacent, which is a harder test than a bar chart's neighbours.

A ready-made conversation UI combining `ChatMessages` and `ChatInput` — pass a `messages` array in and handle `send`, no wiring between the two required.

A message composer with an auto-resizing textarea, an emoji picker, and file attachments — Enter sends, Shift+Enter for a newline.

A single chat bubble — avatar, name, content, timestamp, and delivery status — aligned left or right depending on who sent it.

A scrolling list of `ChatMessage`s that groups consecutive messages from the same sender, inserts date separators, and auto-scrolls to the newest message.

A list of items with a checked/unchecked circular indicator, either a static display or an interactive toggleable list.

An inline or block code snippet, with optional filename/language header and syntax highlighting.

A live-rendered preview above a collapsible `Code` block showing the source behind it — the pattern this very docs site uses for every component example.

A sortable data table with a card-styled header and per-column custom cell/header slots.

A vertical run of dated entries down a connecting line — a changelog, a version history, an audit log — each with a dot, icon or avatar marker, tags, and room for a body.

A collapsible, nested tree of selectable items.

A single node within `Tree`, used internally for recursive nesting.

A user or entity image with initials/icon fallback, presence status, and ring/shape options.

A stack of overlapping avatars with overflow collapsing into a "+N" indicator.

A small count or status indicator anchored to a corner of its content, or standalone.

Resolves a named icon to its component and renders it at a given size.

A small info-icon button that reveals a popover on hover — for an inline explanation next to a label or field.

A small pill representing a single keyboard key, for shortcut hints.

A collaborator's cursor — a fixed-orientation pointer icon with an optional name pill — for real-time multiplayer presence, optionally positioned absolutely via `x`/`y`.

The app's brand mark, with a collapsed (icon-only) state for compact sidebars.

A colored, iconed status dot with an optional label, opening a hover menu to switch to a different status.

A small soft/solid pill for labeling content, with optional leading/trailing icons.

A compact avatar + title/description row for representing a person.

An inline banner for a single important message, with a color, icon, and optional actions.

A progress indicator, determinate or indeterminate — bar or circular ring depending on `variant`.

The linear bar rendered by `Progress`'s bar variants, used internally.

The circular ring rendered by `Progress`'s circle variants, used internally.

An animated bright band sweeping across some text, or over whatever's in the default slot — for an 'AI is thinking...' indicator, a shimmering skeleton block, or a progress bar's buffering state.

A pulsing placeholder shape shown while content is loading.

A single dismissible notification, rendered by `Toaster`.

The fixed-position stack that renders and positions active toasts.

A text input that filters and selects from a list of suggestions as you type.

A single checkbox input with label and description.

A set of checkboxes sharing a single array `v-model`.

A hex text input, sized to its own value, with a live `ColorSwatch` preview that falls back to transparent while the typed text isn't a valid hex color. Optionally opens a `ColorPicker` popover, and optionally supports an alpha channel via `alpha`.

A hue/saturation/lightness picker over a hex `v-model`, with an optional alpha track for an 8-digit hex and a `ColorSwatch` + hex code preview of the current selection.

A single color swatch with a checkmark when `selected` and a checkerboard behind translucent colors — purely presentational, so a parent like `ColorSwatchPicker` owns the actual selection and listens for a click. Also usable standalone with a custom `icon`, or as a plain non-interactive preview by leaving `selected` unbound.

A row of hex color swatches to pick a single value from, sharing a `v-model` like a radio group.

A searchable, richer alternative to `Select`, supporting icons/avatars and multi-select.

A live, flippable card visual — front number/name/expiry, back magstripe/CVC — with automatic network detection. Powers `CreditCardInput`'s preview but also usable standalone to just display a card.

The card network logo/wordmark rendered on `CreditCard`, used internally.

A card number/name/expiry/CVC entry with a live, flipping card preview and network detection.

A date or date-range picker backed by a calendar popover.

A drag-and-drop/click file picker with a list of selected files.

The state and validation container the other form pieces sit in: it validates on submit, routes each error to the `FormField` carrying that `name`, and emits `submit` only once everything passes. Takes a rules record or any Standard Schema validator (zod, valibot, arktype) — neither is a dependency.

A label/description/error wrapper standardizing the layout around a form control. Inside a `Form`, `name` is what pairs it with a value and pulls in that field's error.

A single-line text input with optional leading/trailing icon and validation states.

A styled label/legend with an optional description and required asterisk, rendered as whichever tag fits the context — used internally by `FormField`, `Checkbox`, `Radio`, `Switch`, `CheckboxGroup`, and `RadioGroup`, but usable on its own for a custom field layout.

A language picker showing each language in its own name, with an optional flag — as a full-width field with search, or a compact icon button for a navbar.

A ready-made email/password sign-in form with 'remember me', a forgot-password link, and client-side validation — emits `submit` with the collected values instead of calling an API itself.

A numeric input with increment/decrement controls and min/max/step support.

A password input with a show/hide toggle and an optional live checklist of length/character requirements.

A text input paired with a searchable country picker, showing a flag and dial code.

A row of single-character boxes for entering a PIN or verification code.

A single radio button with label and description, for use inside `RadioGroup`.

A set of mutually-exclusive radio options sharing a single `v-model`.

A native-feeling dropdown select over a list of items.

A ready-made account-creation form — name/email/password/confirm fields, a live password-strength checklist, and a required terms checkbox — emits `submit` with the collected values instead of calling an API itself.

A draggable single- or dual-thumb range input.

An on/off switch, with color and label/description options.

A text input that turns entries into removable tag chips.

A multi-line text input with optional autosize.

A time or time-range picker.

A generic surface container with color/variant/rounding options, optionally clickable.

A horizontal or vertical rule, optionally with centered label text.

A horizontal or vertical strip of content that scrolls in an infinite loop.

A sticky top bar with title/description and left/right action slots.

A collapsible, resizable application sidebar with header/footer slots and a drag-to-resize rail.

A row of grouped actions with dividers, matching a toolbar's compact layout.

A stack of collapsible panels, either one at a time or several open at once.

A trail of linked ancestor pages ending in the current, non-interactive page, with optional per-crumb icons.

A single expand/collapse panel — any trigger content toggling any panel content, height-animated open. The one-off, roll-your-own building block behind `Accordion`'s multi-item list.

A styled anchor/NuxtLink with active-state awareness and disabled support.

A nested, collapsible navigation tree for a table of contents or docs sidebar.

A single row within `Navigation`, used internally for recursive nesting.

A row (or stack) of triggers/links, with children opening a panel of grouped links in a shared, animated viewport.

Page-number controls for navigating a paged list, with sibling/boundary truncation.

Previous/next links for paging between adjacent pages of content.

A list of in-page anchor links that highlights the section currently in view.

A horizontal sequence of steps showing progress through a multi-stage flow.

A set of panels shown one at a time, switched via a row of tab triggers.

A keyboard-driven modal for finding and running commands over grouped, filterable items.

A trigger button styled to open a `CommandPalette`, showing a placeholder and shortcut hint.

A right-click-triggered menu of grouped, possibly nested actions.

A panel that slides in from a viewport edge, for mobile-style navigation or actions.

A trigger-activated menu of grouped, possibly nested actions, with optional avatars/badges.

A trigger-activated emoji panel — grouped into labeled categories with a recently-used section, and searchable by name. Wraps `Popover` internally; pass a custom trigger via the default slot or use the built-in icon button.

A single row within menu-like components (`DropdownMenu`, `ContextMenu`), used internally.

A centered dialog overlay with header/body/footer slots.

A trigger-activated floating panel of arbitrary content, positioned relative to its trigger.

A two-pane settings dialog — a `Navigation` sidebar of sections on the left, the selected section's panel on the right — in the style of Discord's or Claude's settings.

A panel that slides in over the page from a viewport edge, for larger contextual content.

A guided tour overlay that dims the page and highlights one target element at a time, with a positioned card of title/description and step navigation — for onboarding walkthroughs and feature tutorials.

A hover/focus-triggered label shown next to its trigger element.

A sidebar/navbar-footer trigger showing the current user's avatar and name, opening a menu with a built-in presence status switcher and custom actions like settings or sign out.