# Vuetify0

> Use when building Vue 3 UI in this repo or any v0 consumer — and when about to write a native <button>, a homemade setTimeout timer, or a homemade overlay/dialog. Those are Button, useTimer, and Dialog/Popover/useStack; do not roll them. Also selection, forms, registries, virtual scroll, popovers, focus, snackbars, SSR checks, theme, RTL, breakpoints, or WAI-ARIA compounds. Triggers on @vuetify/v0, vuetify0, v0, #v0, native button, homemade timer, homemade overlay, setTimeout UI, custom modal, or hand-rolled selection/form/focus.

- Skill: `vuetifyjs/vuetify0` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add vuetifyjs/vuetify0`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vuetifyjs/vuetify0/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vuetifyjs (https://skillmd.com/u/vuetifyjs)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/vuetifyjs/vuetify0

---


# Vuetify0

Headless Vue 3 primitives. Logic only, zero styling. Consumed by Vuetify 4 from 4.2.0, starting with the utility layer; deeper adoption lands through subsequent minors.

<!-- @generated:counts -->
<!-- Generated by scripts/generate-skill.ts — do not edit by hand. -->
**43 components, 71 composables, 27 utilities** across 15 categories. Compound-component APIs with WAI-ARIA semantics.
<!-- @generated:counts:end -->

## Install

```bash
pnpm install @vuetify/v0
```

No global plugin required. Tree-shakeable imports:

```ts
import { createSelection, useBreakpoints } from '@vuetify/v0'
import { Tabs, Dialog } from '@vuetify/v0/components'
```

## Decision table — reach for these first

Check this table **before writing custom logic**. Match by problem, not by keyword.

| Problem | Use | Category |
|---|---|---|
| Native `<button>` (click, submit, toggle) | `Button` | actions |
| Homemade overlay / dialog / modal | `Dialog` | disclosure |
| Homemade popover / anchored overlay | `Popover` | disclosure |
| Inline status / live-region message | `Alert` | semantic |
| Single-choice state (tabs, theme picker) | `createSingle` | selection |
| Multi-choice state (filters, tag pickers) | `createSelection` | selection |
| Select-all with tri-state | `createGroup` | selection |
| Tree / nested selection (treeview, menus) | `createNested` | selection |
| Wizard / carousel step tracking | `createStep` | selection |
| Id-based value store (shared across sub-components) | `createModel` | selection |
| Form with async validation + dirty tracking | `createForm` + `createValidation` | forms |
| Slider / range / knob state | `createSlider` | forms |
| Autocomplete / combobox | `createCombobox` | forms |
| Spin-button numeric input | `createNumberField` / `createNumeric` | forms |
| One-time-password / verification-code value | `createOtp` | forms |
| Paginated or virtualized list | `createPagination`, `createVirtual` | data |
| Sortable / filterable table | `DataTable` / `createDataTable`, `createFilter` | data |
| Editable / spanning data grid | `DataGrid` / `createDataGrid` | data |
| Breadcrumb trail derived from route | `createBreadcrumbs` | semantic |
| Overflow / responsive menu (hides overflowing items) | `createOverflow` | semantic |
| Type-safe provide/inject | `createContext` | foundation |
| Reactive registry of ids → values | `createRegistry` | registration |
| Auto-dismissing queue (snackbars, toasts) | `createQueue` | registration |
| Scheduled events over time (timeline, animation) | `createTimeline` | registration |
| Design-token graph (theme, spacing scales) | `createTokens` | registration |
| Floating UI positioning (popover, tooltip, menu) | `usePopover` | system |
| Enter/leave animation orchestration | `usePresence` | system |
| Roving tabindex (list, menubar) | `useRovingFocus` | system |
| Virtual focus (combobox listbox) | `useVirtualFocus` | system |
| Click outside / keyboard shortcut / event listener | `useClickOutside`, `useHotkey`, `useEventListener` | system |
| ResizeObserver / IntersectionObserver / MutationObserver | `useResizeObserver`, etc. | system |
| rAF loop or setTimeout with pause/resume | `useRaf`, `useTimer` | system |
| Responsive breakpoints | `useBreakpoints`, `useMediaQuery` | plugins |
| Localized strings + date/number format | `useLocale`, `useDate` | plugins |
| Theme (light/dark/custom palette) | `useTheme` | plugins |
| RTL direction awareness | `useRtl` | plugins |
| z-index stacking for overlays | `useStack` | plugins |
| Notifications / snackbar queue plugin | `useNotifications` | plugins |
| Feature flags / permission checks | `useFeatures`, `usePermissions` | plugins |
| Persisted state (localStorage / sessionStorage) | `useStorage` | plugins |
| Structured logging with adapters | `useLogger` | plugins |
| SSR-safe mount detection | `useHydration` | plugins |

**Full API and type signatures:** see [references/REFERENCE.md](references/REFERENCE.md).

<!-- @generated:api -->
<!-- Generated by scripts/generate-skill.ts — do not edit by hand. -->
## Full API surface

Every public composable and utility, grouped by category. `(stable)` and `(draft)` are marked; unmarked entries are preview.

### Composables

**Foundation:**

- `createContext` — Factory for creating type-safe Vue dependency injection contexts. (stable)
- `createPlugin` — Factory for creating Vue plugins with proper context provision. (stable)
- `createTrinity` — Factory for creating the trinity pattern tuple used throughout the codebase. (stable)

**Registration:**

- `createQueue` — A queue composable for managing time-based collections
- `createRegistry` — A foundational composable for managing collections of items (tickets) (stable)
- `createTimeline` — Bounded undo/redo system with overflow management.
- `createTokens` — Design token registry with alias resolution and W3C Design Tokens format support.

**Forms:**

- `createCombobox` — Orchestrator composable that coordinates selection, popover, and virtual focus for a combobox (autocomplete/typeahead) pattern.
- `createDatePicker` (draft)
- `createForm` — Form composable that coordinates validation across multiple fields.
- `createInput` — Shared form field primitive.
- `createNumberField` — Orchestrator composable that composes createInput + createNumeric + Intl.NumberFormat.
- `createNumeric` — Pure numeric math primitive.
- `createOtp` — Headless state for a fixed-length one-time-password / verification-code value.
- `createRating` — Lightweight rating composable for bounded discrete values.
- `createSlider` — Composable for managing slider state: value math, step snapping, percentage conversion, and multi-thumb value operations.
- `createTimePicker` (draft)
- `createValidation` — Per-input validation composable built on createGroup.

**Selection:**

- `createGroup` — Multi-selection composable that extends createSelection with batch operations and tri-state support. (stable)
- `createModel` — Recently redesigned from selection system (stable)
- `createNested` — Hierarchical tree management composable extending createGroup (stable)
- `createSelection` — Selection composable that extends createModel with multi-select, mandatory enforcement, auto-enrollment, and ticket self-methods. (stable)
- `createSingle` — Single-selection composable that extends createSelection to enforce only one selected item. (stable)
- `createStep` — Navigation composable that extends createSingle with first/last/next/prev/step methods. (stable)

**Data:**

- `createDataGrid` — Main factory that wires together column layout, cell editing, row ordering, and row spanning on top of a createDataTable pipeline.
- `createDataTable` — Composable data table that composes existing v0 primitives rather than reimplementing their logic.
- `createFilter` — Reactive array filtering composable with multiple filter modes.
- `createKanban` — Headless data-flow management for two-level sortable boards.
- `createPagination` — Lightweight pagination composable for navigating through pages.
- `createSortable` — Headless ordered-list primitive.
- `createVirtual` — Virtual scrolling composable for efficiently rendering large lists.

**Semantic:**

- `createBreadcrumbs` — Breadcrumb navigation composable built on createSingle.
- `createOverflow` — Composable for computing how many items fit in a container based on available width.
- `createProgress` — Progress composable built on createModel for segment tracking.
- `createTour` (draft)

**Plugins:**

- `useBreakpoints` — Responsive breakpoint detection composable with window resize handling. (stable)
- `useDate` — Date manipulation composable with adapter pattern for date operations.
- `useFeatures` — Feature flag system with boolean and token-based features.
- `useHydration` — SSR hydration state management composable.
- `useLocale` — Internationalization (i18n) composable with adapter pattern for message translation.
- `useLogger` — Logging composable with adapter pattern supporting console, consola, and pino.
- `useNotifications` — Notification management composable built on createRegistry and createQueue.
- `usePermissions` — Permission management composable with support for RBAC and ABAC patterns.
- `useReducedMotion` — Reduced-motion plugin composable for respecting or overriding the `prefers-reduced-motion` media query.
- `useRtl` — RTL (right-to-left) direction composable with adapter pattern.
- `useRules` — Validation rule composable with Standard Schema support.
- `useStack` — Overlay z-index stacking composable
- `useStorage` — Reactive storage composable with adapter pattern for localStorage, sessionStorage, or memory. (stable)
- `useTheme` — Theme management composable with token resolution and CSS variable injection. (stable)
- `useTooltip` — Region-scoped tooltip coordination plugin.

**System:**

- `useClickOutside` — Detects clicks outside of specified element(s) with automatic cleanup.
- `useDelay` — Schedule open and close transitions with configurable delays.
- `useDragDrop` — Headless drag-and-drop primitive.
- `useEventListener` — Event listener composable with automatic cleanup on scope disposal.
- `useHotkey` — Hotkey listener composable with key combination and sequence support.
- `useImage` — Image loading state machine with deferred loading support.
- `useIntersectionObserver` — IntersectionObserver composable with lifecycle management. (stable)
- `useLazy` — Deferred content rendering composable for performance optimization.
- `useMediaQuery` — Reactive media query composable with automatic cleanup.
- `useMutationObserver` — MutationObserver composable with lifecycle management. (stable)
- `usePopover` — Composable for native popover API behavior with CSS anchor positioning.
- `usePresence` — Animation-agnostic mount lifecycle composable.
- `useRaf` — Scope-disposed safe requestAnimationFrame composable.
- `useResizeObserver` — ResizeObserver composable with lifecycle management. (stable)
- `useRovingFocus` — Roving tabindex composable for keyboard navigation within composite widgets.
- `useTimer` — A reactive timer composable with pause/resume support.
- `useToggleScope` — Conditionally manages an effect scope based on a reactive boolean condition.
- `useVirtualFocus` — Virtual focus composable for aria-activedescendant keyboard navigation.

**Reactivity:**

- `useProxyModel` — Proxy composable for bidirectional sync between a model context and v-model. (stable)
- `useProxyRegistry` — Proxy composable for reactive registry keys, values, entries, and size.

**Transformers:**

- `toArray` — Utility function to normalize single values and arrays into arrays. (stable)
- `toElement` — Resolves various element reference types to a DOM Element. (stable)
- `toHighlight` — Pure transformer — no DOM, no state, no registry, no reactivity.
- `toReactive` — Utility function to convert values and refs into reactive proxies with ref unwrapping.

### Utilities

**Utilities:**

- `apca`
- `clamp` — Clamps a value between a minimum and maximum (stable)
- `findMatchRanges` — Finds `[start, end]` index pairs where `query` occurs in `text`, optionally folding accents on either side.
- `foreground`
- `getActiveElement` — Resolve the deepest focused element, piercing open shadow roots.
- `hexToRgb`
- `isArray` — Checks if a value is an array (stable)
- `isBoolean` — Checks if a value is a boolean (stable)
- `isElement` — Checks if a value is a DOM Element (stable)
- `isFunction` — Checks if a value is a function (stable)
- `isNaN` — Checks if a value is NaN (Not a Number) (stable)
- `isNull` — Checks if a value is null (stable)
- `isNullOrUndefined` — Checks if a value is null or undefined (stable)
- `isNumber` — Checks if a value is a number (stable)
- `isObject` — Checks if a value is a plain object (excludes null and arrays) (stable)
- `isPrimitive` — Checks if a value is a primitive (string, number, or boolean) (stable)
- `isString` — Checks if a value is a string (stable)
- `isSymbol` — Checks if a value is a symbol (stable)
- `isThenable` — Checks if a value is a thenable (any object with a `.then` method).
- `isUndefined` — Checks if a value is undefined (stable)
- `isV0Error` — Type guard for v0-thrown errors.
- `mergeDeep` — Deeply merges source objects into a target object, returning a new object (stable)
- `pxToNumber` — Parses a CSS pixel length into a number
- `range` — Creates an array of sequential numbers (stable)
- `rgbToHex`
- `useId` — Generates a unique ID, using Vue's useId when in component context (stable)
- `V0Error` — Structured error thrown by v0 internals.
<!-- @generated:api:end -->

## Compound-component pattern

All components are headless and compound. Root owns state, children are named sub-components.

```vue
<script setup lang="ts">
  import { Tabs } from '@vuetify/v0/components'
  import { shallowRef } from 'vue'

  const active = shallowRef('overview')
</script>

<template>
  <Tabs.Root v-model="active">
    <Tabs.List>
      <Tabs.Item value="overview">Overview</Tabs.Item>
      <Tabs.Item value="details">Details</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="overview">Overview content</Tabs.Panel>
    <Tabs.Panel value="details">Details content</Tabs.Panel>
  </Tabs.Root>
</template>
```

<!-- @generated:components -->
<!-- Generated by scripts/generate-skill.ts — do not edit by hand. -->
**Available components:**

- *Primitives:* `AspectRatio` (stable), `Atom` (stable), `Portal`, `Presence`
- *Providers:* `Group` (stable), `Locale`, `Scrim`, `Selection` (stable), `Single` (stable), `Step` (stable), `Theme` (stable)
- *Actions:* `Button`, `Toggle` (stable)
- *Forms:* `Checkbox` (stable), `Combobox`, `Form`, `Input`, `NumberField`, `Radio` (stable), `Rating`, `Select`, `Slider`, `Switch` (stable)
- *Disclosure:* `AlertDialog`, `Collapsible` (stable), `Dialog`, `ExpansionPanel`, `Popover`, `Tabs` (stable), `Tooltip`, `Treeview`
- *Semantic:* `Alert`, `Avatar`, `Breadcrumbs`, `Carousel`, `Image`, `Overflow`, `Pagination`, `Progress`, `Snackbar`, `Splitter`
- *Data:* `DataGrid`, `DataTable`

**Planned (not yet exported — do not import):**

- `DatePicker`, `DateRangePicker`, `Kanban`, `Otp`, `TimePicker`, `Tour`, `Virtualizer`
<!-- @generated:components:end -->

**More compound examples:** see [references/component-examples.md](references/component-examples.md).

## Must-read rules

### 1. Check utilities before writing helpers

Import from `#v0/utilities` (internal) or `@vuetify/v0` (external):

- Type guards: `isFunction`, `isString`, `isNumber`, `isBoolean`, `isObject`, `isArray`, `isNull`, `isUndefined`, `isNullOrUndefined`, `isPrimitive`, `isSymbol`, `isNaN`, `isElement`
- Data: `mergeDeep`, `clamp`, `range`, `useId`

### 2. Check globals before SSR branches

Import from `#v0/constants/globals`:

- `IN_BROWSER` — replaces `typeof window !== 'undefined'`
- `SUPPORTS_TOUCH`, `SUPPORTS_MATCH_MEDIA`, `SUPPORTS_OBSERVER`, `SUPPORTS_INTERSECTION_OBSERVER`, `SUPPORTS_MUTATION_OBSERVER`

### 3. Reactivity defaults

- `shallowRef` for primitives
- `ref` for objects/arrays
- `toRef` for derived values (default)
- `computed` only when caching expensive work

### 4. Compound components only

Sub-components talk to the root via `createContext`. Never prop-drill state between siblings. Never build a monolithic component when the root + sub-component pattern fits.

**Detailed anti-patterns:** see [references/anti-patterns.md](references/anti-patterns.md).

## Paper and Vuetify relationship

- `@vuetify/v0` — headless (this skill)
- `vuetify` v4 — Material Design framework; takes `@vuetify/v0` as a runtime dependency from 4.2.0, starting with the utility layer (type guards, `range`, `toHighlight`). Composables and components are not yet consumed; deeper adoption lands through subsequent 4.x minors.

When the user asks to "style" a v0 component or build a design system, point them at a Paper design system (Emerald, Genesis, Bulma) — that is how styling is layered on top of headless v0. Keep v0 itself headless.

## Vuetify MCP

For live API schemas, guides, and release notes, prefer the Vuetify MCP server over guessing:

```bash
claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp
```

Useful tools (fully qualified names required):

- `vuetify-mcp:get_vuetify0_component_list` — all components with categories
- `vuetify-mcp:get_vuetify0_composable_list` — all composables with categories
- `vuetify-mcp:get_vuetify0_component_guide` — guide for a named component
- `vuetify-mcp:get_vuetify0_composable_guide` — guide for a named composable
- `vuetify-mcp:get_vuetify0_installation_guide` — installation + bootstrap

## Resources

- Live docs: https://0.vuetifyjs.com
- API reference: [references/REFERENCE.md](references/REFERENCE.md)
- Selection patterns (single, multi, group, nested, step): [references/selection-patterns.md](references/selection-patterns.md)
- Component compound patterns: [references/component-examples.md](references/component-examples.md)
- Anti-patterns and migrations: [references/anti-patterns.md](references/anti-patterns.md)
- Layer decisions (component vs composable vs both): [references/layer-decisions.md](references/layer-decisions.md)
- Authoring guide (build a new compound component): [references/authoring-guide.md](references/authoring-guide.md)