Components
v0 components are Vue wrappers around composables. Composables hold logic, components provide Vue integration via slots, props, and emits.
Component Philosophy
- Headless: Zero styling - you own all CSS
- Slot-driven: All customization through scoped slots
- Accessible: ARIA attributes via
attrsobject - 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.
Ask AI
How do I add styling or CSS classes to headless components?
Component Categories
| Category | Purpose | Examples |
|---|---|---|
| Primitives | Base building blocks | Atom |
| Providers | Pure state management, no DOM | Selection, Single, Group, Step |
| Semantic | Meaningful HTML defaults | Avatar, Pagination |
| Disclosure | Show/hide patterns | ExpansionPanel, Popover |
Atom: The Foundation
The Atom component is a polymorphic base element supporting any HTML tag:
vue
<script lang="ts" setup>
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 */ }Component Reference
Primitives
- Atom — Polymorphic base element
Providers
- Selection — Multi-selection state
- Single — Single-selection state
- Group — Multi-select with tri-state
- Step — Sequential navigation
Semantic
- Avatar — Image with fallback
- Pagination — Page navigation
Disclosure
- ExpansionPanel — Accordion pattern
- Popover — Floating content