---
title: Getting Started - Install Vuetify0 Headless UI
meta:
  - name: description
    content: Get started with Vuetify0 headless UI primitives for Vue 3. Install, configure, and build your own design system with unstyled, accessible components.
  - name: keywords
    content: vuetify0, getting started, installation, Vue 3, headless ui, composables, npm, pnpm
features:
  order: 1
  level: 1
related:
  - /guide/essentials/using-the-docs
  - /guide/tooling/ai-tools
  - /guide/tooling/agents
  - /composables
  - /components
---

<script setup lang="ts">
  import { john } from '@/constants/identities'
</script>

# Get started with Vuetify0

Vuetify0 provides headless UI primitives and composables for Vue 3. Components are unstyled and logic-focused, giving you complete control over styling while handling accessibility, keyboard navigation, and state management.

<DocsPageFeatures :frontmatter />

## Quick Start

The fastest way to start a new Vuetify0 project is with the CLI.

### Vuetify Create

Standalone scaffolding tool for Vuetify0 projects using <AppIcon icon="vuetify-create" class="align-sub" /> [Vuetify Create](https://github.com/vuetifyjs/cli/tree/master/packages/create0).

::: code-group no-filename

```bash pnpm
pnpm create vuetify0
```

```bash npm
npm create vuetify0
```

```bash yarn
yarn create vuetify0
```

```bash bun
bun create vuetify0
```

:::

### Vuetify CLI

Full-featured CLI with additional presets and options using <AppIcon icon="vuetify-cli" class="align-sub" /> [Vuetify CLI](/guide/tooling/vuetify-cli).

::: code-group no-filename

```bash pnpm
pnpm dlx @vuetify/cli init --type vuetify0
```

```bash npm
npx @vuetify/cli init --type vuetify0
```

```bash yarn
yarn dlx @vuetify/cli init --type vuetify0
```

```bash bun
bunx @vuetify/cli init --type vuetify0
```

:::

Both options scaffold a complete project with UnoCSS, theming, and example components pre-configured — the same shape as [DevKey](/guide/integration/devkey), the reference v0 starter project.

> [!TIP]
> Use the Skill Filter to narrow down navigation to match your experience level: <AppSkillFilter />

## Manual Setup

To add v0 to an existing project, follow the steps below.

### Create Vue Project

::: code-group no-filename

```bash pnpm
pnpm create vue@latest
```

```bash npm
npm create vue@latest
```

```bash yarn
yarn create vue
```

```bash bun
bun create vue@latest
```

:::

### Installation

Install `@vuetify/v0` with your preferred package manager:

::: code-group no-filename

```bash pnpm
pnpm add @vuetify/v0
```

```bash npm
npm install @vuetify/v0
```

```bash yarn
yarn add @vuetify/v0
```

```bash bun
bun add @vuetify/v0
```

:::

Create a plugin file to configure v0:

```ts src/plugins/vuetify0.ts collapse
import { createThemePlugin } from '@vuetify/v0'
import type { App } from 'vue'

export default function vuetify0 (app: App) {
  app.use(
    createThemePlugin({
      default: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            primary: '#3b82f6',
            surface: '#ffffff',
            'on-primary': '#ffffff',
            'on-surface': '#212121',
          },
        },
      },
    }),
  )
}
```

Register the plugin in your app entry:

```ts src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import vuetify0 from './plugins/vuetify0'

const app = createApp(App)

vuetify0(app)

app.mount('#app')
```

> [!NOTE]
> For additional plugins, theming options, and advanced configuration, see the [Guide](/guide).

## Requirements

- Vue 3.5.0 or higher
- Node 22+

## Usage

Import and use components directly - no plugin installation required:

```vue QuickStart.vue playground no-filename collapse
<script setup lang="ts">
  import { ExpansionPanel } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const expanded = shallowRef([])
</script>

<template>
  <ExpansionPanel.Group v-model="expanded" multiple>
    <ExpansionPanel.Root value="item-1">
      <ExpansionPanel.Activator>
        Section 1
        <ExpansionPanel.Cue />
      </ExpansionPanel.Activator>

      <ExpansionPanel.Content>
        Content for section 1
      </ExpansionPanel.Content>
    </ExpansionPanel.Root>
  </ExpansionPanel.Group>
</template>
```

Components are completely unstyled. Add your own classes using Tailwind, UnoCSS, or plain CSS.

## Styling

v0 is style-agnostic. Choose your preferred CSS framework and map theme colors to v0's CSS variables.

### UnoCSS

[UnoCSS](https://unocss.dev) is our recommended choice for its speed and flexibility.

#### 1. Install

::: code-group no-filename

```bash pnpm
pnpm add -D unocss @unocss/preset-wind
```

```bash npm
npm install -D unocss @unocss/preset-wind
```

```bash yarn
yarn add -D unocss @unocss/preset-wind
```

```bash bun
bun add -D unocss @unocss/preset-wind
```

:::

#### 2. Configure

```ts uno.config.ts
import { defineConfig, presetWind } from 'unocss'

export default defineConfig({
  presets: [presetWind()],
  theme: {
    colors: {
      primary: 'var(--v0-primary)',
      surface: 'var(--v0-surface)',
      'on-primary': 'var(--v0-on-primary)',
      'on-surface': 'var(--v0-on-surface)',
      // Add more theme colors as needed
    },
  },
})
```

#### 3. Add Vite Plugin

```ts vite.config.ts
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
  ],
})
```

#### 4. Import Styles

```ts src/main.ts
import 'virtual:uno.css'
```

Now use utility classes in your components:

```vue
<template>
  <button class="bg-primary text-on-primary px-4 py-2 rounded">
    Click me
  </button>
</template>
```

### Tailwind CSS v4

[Tailwind v4](https://tailwindcss.com) uses CSS-first configuration with native cascade layers.

#### 1. Install

::: code-group no-filename

```bash pnpm
pnpm add -D tailwindcss @tailwindcss/vite
```

```bash npm
npm install -D tailwindcss @tailwindcss/vite
```

```bash yarn
yarn add -D tailwindcss @tailwindcss/vite
```

```bash bun
bun add -D tailwindcss @tailwindcss/vite
```

:::

#### 2. Add Vite Plugin

```ts vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})
```

#### 3. Create Stylesheet

```css src/styles/main.css
@import "tailwindcss";

@theme {
  --color-primary: var(--v0-primary);
  --color-surface: var(--v0-surface);
  --color-on-primary: var(--v0-on-primary);
  --color-on-surface: var(--v0-on-surface);
}
```

#### 4. Import Styles

```ts src/main.ts
import './styles/main.css'
```

Now use utility classes in your components:

```vue
<template>
  <button class="bg-primary text-on-primary px-4 py-2 rounded">
    Click me
  </button>
</template>
```

### CSS Modules

Vue's built-in [CSS Modules](https://vuejs.org/api/sfc-css-features#css-modules) require zero configuration.

```vue Button.vue no-filename
<template>
  <button :class="$style.btn">
    Click me
  </button>
</template>

<style module>
  .btn {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
```

Type-safe access via `useCssModule()`:

```vue
<script setup lang="ts">
  import { useCssModule } from 'vue'

  const $style = useCssModule()
</script>

<template>
  <button :class="$style.btn">Click me</button>
</template>
```

> [!TIP]
> For dark mode, custom themes, and design tokens, see the [Theming Guide](/guide/features/theming).

## Nuxt

v0 works with Nuxt via a standard plugin.

### 1. Create Plugin

```ts plugins/vuetify0.ts collapse
import { createThemePlugin } from '@vuetify/v0'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createThemePlugin({
      default: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            primary: '#3b82f6',
            surface: '#ffffff',
            'on-primary': '#ffffff',
            'on-surface': '#212121',
          },
        },
        dark: {
          dark: true,
          colors: {
            primary: '#60a5fa',
            surface: '#1e1e1e',
            'on-primary': '#1a1a1a',
            'on-surface': '#e0e0e0',
          },
        },
      },
    }),
  )
})
```

### 2. Configure Nuxt

```ts nuxt.config.ts
export default defineNuxtConfig({
  build: {
    transpile: ['@vuetify/v0'],
  },
})
```

> [!TIP]
> For auto-imports, SSR hydration, and theme persistence, see the [Nuxt Guide](/guide/integration/nuxt).

## Exposed Exports

The following export paths exist for the Vuetify0 framework:

| Name | Description |
| ---- | ----------- |
| `@vuetify/v0` | Main entry point exposing all components, composables, and utilities. |
| `@vuetify/v0/components` | Components only. |
| `@vuetify/v0/composables` | Composables only. |
| `@vuetify/v0/utilities` | Utilities only. |
| `@vuetify/v0/constants` | Constants only (not included in main entry). |
| `@vuetify/v0/locale/messages/en` | Optional canonical English aria-string map for component accessible names. Never imported by the runtime. |

```ts
// Everything
import { ExpansionPanel, createSelection } from '@vuetify/v0'

// Components only
import { ExpansionPanel, Single, Group } from '@vuetify/v0/components'

// Composables only
import { createSelection, useTheme, createForm } from '@vuetify/v0/composables'

// Utilities only
import { isObject, isString } from '@vuetify/v0/utilities'

// Constants only
import { IN_BROWSER } from '@vuetify/v0/constants'
```

## Agents

Click the portrait to copy John's identity into [Grok Bot](https://x.ai/bot). Setup prompts live on [Agents](/guide/tooling/agents).

<DocsIdentity v-bind="john" dense />

## Next Steps

Now that v0 is installed, choose your path:

| Goal | Start Here |
| - | - |
| Understand the architecture | [Components](/guide/fundamentals/components) → [Composables](/guide/fundamentals/composables) → [Core](/guide/fundamentals/core) |
| Build production UIs now | [Theming](/guide/features/theming) → [Accessibility](/guide/features/accessibility) |
| Build a component library | [Building Frameworks](/guide/fundamentals/building-frameworks) |
| Set up an AI agent | [Agents](/guide/tooling/agents) → [AI Tools](/guide/tooling/ai-tools) |
| Explore interactively | [Playground](/playground) |

> [!TIP]
> Use `Cmd+/` on any documentation page to ask AI questions about v0.

> [!TOUR] using-search

## Support v0

v0 is built and maintained in the open. If it's useful to you or your team, sponsoring funds the work and keeps it moving — and need a hand shipping? The [Services](/services) page covers direct support plans and fixed-scope project builds.

::: sponsor
:::

> [!DISCORD]