Components

v0 components are Vue wrappers around composables. Composables hold logic, components provide Vue integration via slots, props, and emits.

Edit this page

Report a Bug

Copy Markdown

IntermediateJan 22, 2026

Component Philosophy

Headless: Zero styling - you own all CSS
Slot-driven: All customization through scoped slots
Accessible: ARIA attributes via attrs object
Composable-backed: Use components or composables directly

Tip

Always spread the attrs object onto your elements. It contains ARIA attributes and data attributes for accessibility and styling.

Component Categories

Category	Purpose	Examples
Primitives	Base building blocks	Atom
Providers	Pure state management, no DOM	Selection, Single, Group, Step
Forms	Form controls with accessibility	Checkbox
Semantic	Meaningful HTML defaults	Avatar, Pagination
Disclosure	Show/hide patterns	Dialog, ExpansionPanel, Popover

Atom: The Foundation

The Atom component is a polymorphic base element supporting any HTML tag:

vue

<script setup lang="ts">
  function onClick() {
    console.log('clicked')
  }
</script>

<template>
  <!-- Render as button -->
  <Atom as="button" @click="onClick">Click me</Atom>

  <!-- Render as link -->
  <Atom as="a" href="/path">Navigate</Atom>

  <!-- Renderless mode - slot only -->
  <Atom :as="null" v-slot="{ attrs }">
    <MyCustomComponent v-bind="attrs" />
  </Atom>
</template>

Rendering Modes

Mode	Usage	Output
Element	`as="button"`	`<button>` with slot content
Renderless	`:as="null"` or `renderless`	Slot only, no wrapper

Slot Props Pattern

Every component exposes attrs in its default slot. Spread onto your element for behavior and accessibility:

vue

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

  const items = ['Apple', 'Banana', 'Cherry']
</script>

<template>
  <Selection.Root>
    <Selection.Item v-for="item in items" v-slot="{ attrs, isSelected, toggle }">
      <button
        v-bind="attrs"
        :class="{ 'bg-primary': isSelected }"
        @click="toggle"
      >
        {{ item }}
      </button>
    </Selection.Item>
  </Selection.Root>
</template>

Common Slot Props

Component Type	Slot Props
Selection.Item	`attrs`, `isSelected`, `toggle`, `select`, `unselect`
Group.Item	`attrs`, `isSelected`, `isMixed`, `toggle`
ExpansionPanel.Activator	`attrs`, `isSelected`, `toggle`
Popover.Root	`id`, `isSelected`, `toggle`
Popover.Activator	`attrs`, `isOpen`
Popover.Content	`attrs`, `isOpen`

Data Attributes

Components emit data attributes for CSS styling:

css

[data-selected] { background: var(--primary); }
[data-disabled] { opacity: 0.5; }
[data-mixed] { /* tri-state checkbox */ }
[data-popover-open] { /* popover is visible */ }

Ask AI

How do I add styling or CSS classes to headless components?