You are viewing Pre-Alpha documentation. Some features may not work as expected.

Headless UI primitives
for Vue

Unstyled, accessible components and composables for building design systems and modern applications.

Get Started Components

—

GitHub Stars

—

Monthly Downloads

40+

Composables

Why Vuetify0?

Built for developers who want complete control without sacrificing developer experience.

Unstyled & Headless

Zero CSS opinions. Complete control over markup, classes, and design tokens. Build any visual identity without fighting defaults.

Composable Architecture

Tree-shakable utilities with consistent patterns. Mix and match components with composables. Use only what you need.

Accessibility First

WAI-ARIA patterns, keyboard navigation, focus management, and screen reader support baked into every component.

TypeScript Native

Full type inference, strict mode, and IntelliSense support. Designed from the ground up with TypeScript.

CSS Framework Ready

Works seamlessly with Tailwind CSS, UnoCSS, or any utility-first framework. Style components your way.

Vuetify Play Support

Prototype and share components instantly in Vuetify Play. Test ideas without local setup.

Works with

Tailwind CSS

UnoCSS

Vuetify Play

Vuetify MCP

Simple by Design

Primitives that handle the hard parts—state, accessibility, keyboard navigation—while you control the styling.

Selection.vue View docs →

<script setup lang="ts">
  import { Selection } from '@vuetify/v0'
  import { ref } from 'vue'

  const items = [
    { id: 1, label: 'Option A' },
    { id: 2, label: 'Option B' },
    { id: 3, label: 'Option C' },
  ]

  const selected = ref([])
</script>

<template>
  <Selection.Root v-model="selected" multiple>
    <Selection.Item
      v-for="item in items"
      :key="item.id"
      v-slot="{ isSelected, toggle }"
      :value="item.id"
    >
      <button
        :class="isSelected && 'selected'"
        @click="toggle"
      >
        {{ item.label }}
      </button>
    </Selection.Item>

    <p>Selected: {{ selected }}</p>
  </Selection.Root>
</template>

Open in Vuetify Play

Selected: none