Components

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

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

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 compact avatar + title/description row for representing a person.

A count or bare dot anchored to a corner of its content, or standalone. For labelled text — a status word, a category — reach for Tag instead.

A small soft/solid pill for labelled text — a status word, a category, a chip — with optional leading/trailing icons. Badge is the one for counts and dots anchored to something else.

A colored, iconed status dot with an optional label, opening a hover menu to switch to a different status. The interactive one of the three: Tag labels, Badge counts, Status changes.

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

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

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 base clickable action element, with size/color/variant options and optional icon/link behavior.

A row (or column) of controls welded into one — a segmented row of buttons, an `Input` with a `Button` on its end, a `Select` and the action that goes with it. Squares off every interior corner, rounds the two ends, and leaves a hairline seam between neighbours.

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

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 draggable, edge-snapping floating group of action buttons.

Wraps the app to set the language every component renders in and to mount the toast stack.

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

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

A scrollable region with slim, themed scrollbars in place of the native ones.

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

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 sticky top bar with title/description and left/right action slots.

A collapsible, resizable application sidebar with header/footer slots, a drag-to-resize edge and a collapse toggle in its header.

A ghost icon button that collapses and expands a `Sidebar`, with the icon following the state so it always shows which way the click will go. Stateless: bind `v-model` to whatever owns the open state. `Sidebar` renders one in its header, and the same component works standalone in a navbar.

A draggable divider that resizes the panel beside it — a pixel size over `v-model`, clamped between `min` and `max`, on either axis. Pointer travel past a bound is reported through `overdrag` rather than swallowed, which is how a parent turns a hard drag into a collapse. Also keyboard-operable, and double-clickable to reset.

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

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

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 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 single-line text input with optional leading/trailing icon and validation states.

A multi-line text input with optional autosize.

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 row of single-character boxes for entering a PIN or verification code.

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

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

A month grid for picking a date or date range — navigation, today/clear actions, and min/max bounds. Powers `DateInput`'s popover, but also usable standalone for an inline calendar.

A time or time-range picker.

A text input that turns entries into removable tag chips.

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

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

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 native-feeling dropdown select over a list of items.

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

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

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 single checkbox input with label and description.

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

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

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

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

A draggable single- or dual-thumb range input.

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 row of hex color swatches to pick a single value from, sharing a `v-model` like a radio group.

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 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 sortable data table with a card-styled header, per-column custom cell/header slots and optional drag-to-resize columns.

A collapsible, nested tree of selectable items.

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

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 list of items with a checked/unchecked circular indicator, either a static display or an interactive toggleable list.

A list whose order the user sets by dragging rows around, with the rows they pass sliding aside to open the gap. Reorders by pointer, by touch and by keyboard alike (space to pick up, arrows to move, space to drop), auto-scrolls when a drag reaches the edge of its container, and hands the whole reordered array back through `v-model`.

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 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.

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

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

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

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 centered dialog overlay with header/body/footer slots.

A panel that slides in over the page from a viewport edge, for larger contextual content — or, with `dock`, into the layout beside it.

Where a docked Slideover appears in the layout. Place it once, next to the main content.

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

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

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

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

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

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

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.

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

A single dismissible notification, rendered by `Toaster`.

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

A bell trigger opening a `Popover` panel listing notifications — unread markers, a mark-all-as-read action, and an optional per-entry dismiss button — for a persistent inbox rather than `Toast`'s transient popups.

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.

One progress bar split into colored segments, with a legend — a breakdown of a total (disk usage, seats by plan, spend by category) rather than a single measure.

A pulsing placeholder shape shown while content is loading.

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 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 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.

The row of 'Continue with Google/Apple/GitHub' buttons under a sign-in form, with bundled brand logos for ten providers — stacked and labelled, or icon-only side by side. Emits `select` with the provider's id; starting the OAuth flow is yours. Already built into `LoginForm`/`SignupForm` via their `providers` prop.

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

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 single chat bubble — avatar, name, content, timestamp, and delivery status — aligned left or right depending on who sent it.

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

The responsive row a set of `PricingPlan`s sits in — pass a `plans` array or write the cards out yourself, and it handles the columns, the equal heights and scaling the highlighted plan above its neighbours.

A single plan on a pricing page — name, price, a `CheckList` of what it includes, and a call to action. `highlight` marks the recommended one, which colors the card and turns its button solid.

The feature-by-feature comparison under a set of plans: tiers across the top, features grouped into sections down the side, and a checkmark, a rule or a value in each cell. `orientation="vertical"` re-reads the same data as one `PricingPlan` per tier for small screens.

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.

The workspace picker at the top of an app sidebar — current team's avatar and name in the trigger, the rest in a dropdown under it. Three weights via `variant`, a `collapsed` state that drops to just the avatar, and room for a "Create team" action below the list. `UserMenu` is its opposite number at the sidebar's foot.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

Overlapping sets as area-proportional circles, for how much two or three audiences, tags or cohorts share. Exact at three sets and no further — four circles can't draw all fifteen of their regions, so a `BarChart` of the combinations is the honest chart past that.

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.

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.

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, with an optional muted value per entry and a slot for custom rows. 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 dashed rule across a cartesian plot at one value on either axis, ending in a note — a release date on a timeline, a target on a bar chart — with an optional tooltip on hover. Placed in a `LineChart`, `AreaChart`, `BarChart` or `ScatterChart`'s default slot, it reads that chart's scales, so it takes a data value rather than a pixel.