Why v0

The meta-framework for building UI libraries.

v0 provides headless composables, unstyled components, and reactive primitives — the foundation layer that UI frameworks are built on. 46 components, 63+ composables — all unstyled, all accessible, built on standard Vue SFCs using the latest macros (defineModel, defineSlots, generics).

No custom compiler, no proprietary patterns. Use it to build a full design system shared across projects, or import a single composable to solve one problem in your app. v0 scales to your ambition.

From the creators of Vuetify↗ — 41K+ GitHub stars, 4M+ monthly downloads, a decade of production use. Vuetify itself is being rebuilt on v0.

Composable-First Architecture

Pure logic. Zero opinions. Your markup.

Logic Without Components

Most headless libraries give you components. v0 gives you composables that optionally have components. Use the logic without any rendering layer:

import { createSelection } from '@vuetify/v0'

// Pure logic - no components needed
const selection = createSelection({ multiple: true })

// Register items
const items = selection.onboard([
  { id: 'item-1', value: 'Item 1' },
  { id: 'item-2', value: 'Item 2' },
])

// Then select
selection.select('item-1')
selection.select('item-2')

console.log([...selection.selectedIds]) // ['item-1', 'item-2']
console.log(selection.selected('item-1')) // true
console.log(items[0].isSelected.value) // true

The same selection logic powers chips, listboxes, tabs, or whatever you build. That’s what a meta-framework does.

You can also use v0 composables inside an existing Vuetify application:

<script setup lang="ts">
  import { VBtn, VCard } from 'vuetify/components'
  import { createSelection } from '@vuetify/v0'

  const selection = createSelection({ multiple: true })

  const items = selection.onboard([
    { id: 1, value: 'Option A' },
    { id: 2, value: 'Option B' },
    { id: 3, value: 'Option C' },
  ])
</script>

<template>
  <VCard title="Select Options">
    <div class="d-flex ga-2 pa-4">
      <VBtn
        v-for="item in items"
        :key="item.id"
        :color="item.isSelected.value ? 'primary' : undefined"
        :variant="item.isSelected.value ? 'flat' : 'outlined'"
        @click="item.toggle()"
      >
        {{ item.value }}
      </VBtn>
    </div>
  </VCard>
</template>

The Trinity Pattern

v0’s Trinity pattern provides three layers that work together:

1. Context — Dependency injection via provide/inject

2. Composable — Reactive logic you can use anywhere

3. Component — Optional rendering layer with slot props

Use as many layers as you need. The same selection logic works whether you’re building a chip group, a listbox, tabs, or your own custom component — without wrappers or adapters.

Composing Primitives

The real power isn’t any single composable — it’s what you build when you combine them.

A Cmd+K command palette is just four v0 primitives working together:

// ~100 lines. No third-party command palette library needed.
// Dialog.Root wraps the palette (omitted for brevity)
import { createFilter, useHotkey, useVirtualFocus } from '@vuetify/v0'

// Open on Cmd+K
useHotkey('meta+k', () => open.value = true)

// Filter items as the user types
const filter = createFilter({ keys: ['label', 'description'] })
const { items: results } = filter.apply(query, commands)

// Keyboard navigation through results
const { highlightedId, next, prev } = useVirtualFocus(
  () => results.value.map(item => ({ id: item.id })),
  { control: inputRef },
)

That’s what a meta-framework does — composable primitives that combine cleanly, without fighting each other.

Adapter-Based Plugins

v0 defines contracts, not implementations. Plugins use adapters — swap the underlying library without changing a line of consumer code. Your components never know the difference.

Built-in adapters ship for the most common integrations:

Don’t have a built-in? Implement the adapter interface in ~10 lines and swap it in. No changes to your application code.

Performance by Design

Fast by default, not fixed after the fact.

Performance at the foundation layer compounds for everything built on top. Every composable is independently importable and tree-shakeable — only what you use ships. Zero runtime CSS. Published benchmarks back the claims.

Lazy rendering is built in: usePresence delays mounting until needed, useLazy defers content until it enters the viewport. Performance is a feature, not an afterthought.

Progressive Enhancement

Features that grow with your stack.

v0 features automatically upgrade when plugins are present. No wiring. No configuration. They just get better.

• Pagination + Locale: Uses a default label string out of the box. Add useLocale, define your pagination label, and the component picks it up automatically.

• Logger: console.log by default. Add the logger plugin and you get colored output and visual formatting — no code changes.

• Breakpoints: Add useBreakpoints and composables can consume it for responsive behavior — available throughout the system with zero configuration.

AI-Native Ecosystem

Your AI already knows v0.

v0 was built in the AI era. Not retrofitted — designed from day one to be consumed by both humans and machines.

MCP Server

First-class Model Context Protocol server for Claude, Cursor, and other AI assistants. Structured access to v0’s full API — accurate, versioned, complete. No hallucinations, no outdated docs. See the full AI Tools guide for setup and usage.

Ask AI — Built Into Every Page

A context-aware AI assistant embedded in the documentation. It has access to the current page, the full docs, examples, API specs, and benchmarks. Not a chatbot bolted on — part of the documentation architecture.

Personalized Documentation

vuetify-cli analyze scans your project, finds which v0 features you actually use, and generates a personalized docs URL filtered to your stack. Share it with your team for focused onboarding.

AI-Friendly Exports

llms.txt, llms-full.txt, and SKILL.md — structured exports designed for LLM consumption. Your AI tools get first-class data, not HTML scraping.

Developer Experience

Documentation that adapts to you.

The docs aren’t a reference manual. They’re a living environment designed to meet you where you are and grow with you.

Skill-Based Content Filtering

Set your skill level — Beginner, Intermediate, or Advanced. The entire documentation adapts: navigation, page visibility, content depth. It persists across sessions and grows with you as you level up.

Interactive Playground

Every example runs live in the browser. Edit code, see results instantly, and share your experiments with a single link. Vuetify Play for full experiments, Vuetify Bin for shareable snippets — integrated into every docs page.

Examples as Lessons

Examples aren’t throwaway demos. Each one teaches a concept — multi-file, ordered, with descriptions explaining why, not just what. Open any example in the playground to experiment further.

A Decade of Battle-Testing

Built on what works.

While v0 is new, its patterns are not. Registration, selection, theming, forms — Vuetify has used some form of these approaches since its founding. Every version refined them. v0 is the extraction and formalization of a decade of production-tested architecture.

The Platform Behind v0

• 41K+ GitHub stars, 4M+ monthly downloads, 324K+ dependent projects

• 10+ years of continuous development

• Weekly release cadence maintained consistently

• Thousands of issues dispositioned, thousands of PRs merged, tens of thousands of commits

• Enterprise adoption across industries

Community

Active Discord. Weekly releases. Responsive maintainers. The kind of support that comes from 10 years of earning trust — not a weekend project that might go quiet.

Vuetify Convergence

Vuetify0 is already being merged into Vuetify’s next major release. The first PR has landed. Investing in v0 now means your foundation aligns with where the entire Vuetify ecosystem is actively heading.

Road to v1

Alpha (April 7, 2026) → Beta (June 2026) → v1.0 (July 2026) — see the full roadmap.

What comes after v1: Vuetify Paper — a styled layer built on v0 that provides opinionated design system primitives. Emerald and Onyx are the first design systems. Build on v0 today; Paper gives you a head start on the styled layer when you’re ready.

For Your Leadership

Need to justify the choice to management? Here’s what matters to them:

• Proven track record: 10+ years, 41K+ stars, 324K+ dependents — not a gamble

• Active development: Weekly releases, thousands of PRs merged, public roadmap

• Ecosystem convergence: v0 is already being merged into Vuetify’s next major release

• Enterprise adoption: Production use across industries

• Community health: Active Discord, dedicated maintainer team, massive documentation investment

• Enterprise support: Dedicated support options available↗ for teams that need SLA guarantees

Professional Tooling

From scaffold to ship.

Learn by Doing

Level up with Vuetify0 Skillz.

The documentation isn’t just reference — it’s a training ground. Vuetify0 Skillz offers interactive challenges designed to build real proficiency.

Available now:

• Interactive challenges organized by topic

• Three learning tracks: Fundamentals, Features, Integration

• Progress tracking that persists across sessions

• Prerequisite chains — unlock skills as you advance

Coming soon:

• Tests and challenges to prove mastery

• Skill-based progression that improves how you work with v0 and with AI tools

Beyond a Component Library

Headless component libraries solve one problem well: unstyled UI primitives. v0 solves the layer beneath — the composable architecture, plugin system, and developer ecosystem that UI libraries are built on.

Need a full styled framework today? Vuetify 4↗ has 80+ Material Design components ready to go. Need headless components that v0 doesn’t have yet? Other options exist. v0 complements all of them — it’s the foundation layer, not a replacement.

Get Started

Ready to build? Pick your path:

pnpm add @vuetify/v0

• Install v0 and start building

• Explore the playground and experiment live

• Browse composables to see what’s available