Welcome to Vuetify0!

Want to skip this for now? Close the panel and reopen it anytime from the ☰ menu in the top left.

@vuetify/v0↗ gives you headless composables — selection, registration, forms, theming — without any markup opinions. You bring the HTML and CSS; v0 handles the logic. This editor is where you build with them: a Monaco-powered workspace with live preview, type checking, and every v0 export ready to import.

The environment

The editor ships a complete single-file component setup. Your App.vue runs inside a Vue 3 app with these already wired in:

• Monaco editor with full TypeScript IntelliSense — autocomplete, hover docs, and error checking for every @vuetify/v0 export
• Live preview that re-renders as you type
• UnoCSS runtime with presetWind4 (Tailwind v4 syntax) loaded automatically — no config needed
• createThemePlugin installed with light and dark themes; every theme color is defined and reactive to theme switches

Theme colors work two ways: CSS custom properties (var(--v0-primary)) and UnoCSS utilities (text-primary, bg-surface, border-divider). Use the utilities — they’re shorter and theme-aware by default.

Composables

Getting started

Use ☰ → File → Open example… to browse every docs demo from the official registry (same catalog as vuetify add). Pick a feature, then an example, and the workspace loads with files and a live preview. Or skip that entirely: open App.vue and start from scratch — the preview hot-reloads on every keystroke.

Short links also work:

/?example=dialog
/?example=dialog/basic
/?example=components/dialog/basic

Point ?registry= at a custom origin when testing a local docs build.

Sharing & Saving

• The URL updates as you edit — copy it to share exactly what you built
• Vuetify One playgrounds get a canonical URL: /playgrounds/:id (e.g. /playgrounds/abc123). The editor hash is preserved for sharing with content inline
• Save to Vuetify One via ☰ → File → Save to persist your work and get a shareable link
• Owners manage saved playgrounds from ☰ → File → Open → Vuetify One (rename, pin, favorite, visibility, delete)

Sending a theme

Any producer — docs, the builder, a host app — can ship a theme in the hash next to the files. v0play merges themes into the sandbox createThemePlugin and selects theme:

{
  "files": { "src/App.vue": "…" },
  "theme": "brand-light",
  "themes": {
    "brand-light": {
      "dark": false,
      "colors": { "primary": "#7453ec", "background": "#ffffff" }
    },
    "brand-dark": {
      "dark": true,
      "colors": { "primary": "#c4b5fd", "background": "#121212" }
    }
  }
}

Ids must be CSS identifiers. Light/dark pairs are {name}-light / {name}-dark — never a bare {name} for one side. Color values must be plain tokens (hex / rgb / names) — no url(), expression(), or braces. Include both records if the playground host toggle should stay on that palette; a single custom theme is enough when there is no pair.

Tips

• Ctrl+B toggles the file tree sidebar — or drag the panel edge to close it
• Double-click any resize handle to snap it back to its default width
• Switch between Preview Right and Preview Bottom via ☰ → View
• Add new files in the file tree and import them normally — multi-file projects work out of the box