Vuetify Zero - Vuetify Zero

Everything you need to build great UIs

A comprehensive framework with headless components, powerful composables, and extensible adapters

Headless by Design

Components provide logic and accessibility without imposed styling. Complete control over your design.

40+ Composables

Powerful composables for selection, forms, observers, plugins, and more. Build complex UIs with ease.

TypeScript Native

Full type safety with generics for extensibility. Built for modern TypeScript development.

Quick start

Get up and running with Vuetify Zero in minutes

Install the package

Install Vuetify Zero using your preferred package manager:

npm install @vuetify/v0

Import a component

Import components from the package and use them in your Vue 3 application:

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

const isOpen = ref(false)
</script>

<template>
  <Dialog.Root v-model="isOpen">
    <Dialog.Activator>
      <button>Open Dialog</button>
    </Dialog.Activator>
    <Dialog.Content>
      <Dialog.Title>Hello World</Dialog.Title>
      <Dialog.Description>
        This is a headless dialog component
      </Dialog.Description>
    </Dialog.Content>
  </Dialog.Root>
</template>

Style your components

Apply your own styles using CSS, Tailwind, or any styling solution. Vuetify Zero provides the logic, you provide the design:

button {
  padding: 0.5rem 1rem;
  background: #1495f5;
  color: white;
  border-radius: 0.5rem;
}

Explore by category

Discover components, composables, and adapters for every use case

Components

17 headless components including Dialog, Tabs, Checkbox, and more

Composables

40+ composables for selection, forms, observers, and plugins

Adapters

Extend functionality with adapters for logging, theming, features, and more

API Reference

Complete API documentation for types, utilities, and constants

Ready to build?

Start building your design system with headless components and powerful composables

Get Started