Headless UI primitives
for Vue

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

Get Started Why Vuetify0

See how Vuetify0 compares to other libraries →

—

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.

Vapor Ready

100% compatible with Vue Vapor mode. Built for the future of Vue performance without the virtual DOM.

Works with

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