Styling Headless Components

v0 components are headless—they provide behavior and accessibility, you provide the styling. This guide covers two first-class patterns for styling based on component state.

Two Approaches

v0 exposes component state in two ways:

Both approaches work with any CSS framework. Data attributes are set automatically via the attrs object—slot props give you reactive booleans for template logic.

Data Attributes Reference

All v0 components expose state via data-* attributes in the attrs object:

Styling with Data Attributes

Data attribute selectors let you style based on state purely in CSS. This works with Tailwind, UnoCSS, plain CSS, or any framework supporting attribute selectors.

Tailwind / UnoCSS

Use the data-[attr]: variant↗︎ to apply classes when an attribute is present:

CSS Modules

Target data attributes in your module styles↗︎:

Plain CSS

Standard attribute selectors↗︎ work in any stylesheet:

/* Single state */
[data-selected] {
  background: var(--v0-primary);
  color: var(--v0-on-primary);
}

/* Compound states */
[data-selected][data-disabled] {
  background: color-mix(in srgb, var(--v0-primary) 60%, transparent);
  cursor: not-allowed;
}

Styling with Slot Props

Slot props provide reactive state as JavaScript booleans. Use them when you need:

• Multiple dependent states: isSelected && !isDisabled && isFocused

• Computed class names from external logic

• Conditional rendering (icons, badges, text)

• Dynamic inline styles (progress bars, animations)

Advanced Patterns

Transitions

Add CSS transitions for smooth state changes:

Focus States

Combine focus-visible with selection state for keyboard navigation feedback:

<template>
  <Tabs.Item
    class="focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
           data-[selected]:bg-primary"
    :value="item"
  >
    {{ item }}
  </Tabs.Item>
</template>

Compound States

Style combinations using CSS attribute selectors:

Parent-Child Styling

Use Tailwind’s group utilities to style children based on parent state:

<template>
  <Tabs.Item class="group inline-flex items-center gap-2" :value="item">
    <span class="group-data-[selected]:font-bold">{{ item }}</span>
    <CheckIcon class="size-4 opacity-0 group-data-[selected]:opacity-100 transition-opacity" />
  </Tabs.Item>
</template>

When to Use Which