Styling

Akaza UI has no visual theme. Package CSS covers positioning, visibility, interaction, and transitions. Your application controls dimensions, colors, borders, typography, and spacing.

Some parts include replaceable content such as checkbox marks, disclosure chevrons, and rating stars. Replace them through named slots.

Styling hooks

Akaza UI exposes relevant hooks on structural elements. Each component page lists exact ui keys, CSS classes, and data attributes for its parts.

• class applies to the outer root when the component has one root. Use ui for multi-root or teleported components such as Dialog, AlertDialog, and Drawer.
• ui is the primary styling API for the root and named internal parts.
• akaza-* classes provide stable semantic selectors for structural parts.
• data-akaza-state describes a primary exclusive state such as open, closed, checked, active, or loading.
• Granular data-akaza-* attributes describe orthogonal control state such as data-akaza-invalid, data-akaza-focused, data-akaza-dirty, and data-akaza-disabled.
• data-akaza-side / data-akaza-align describe floating placement.

The ui prop

Pass an object whose keys target named component parts:

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

The available ui keys for each component are listed in that component's UI Options table.

class vs ui.root

Targets differ by component. For Checkbox and Switch, class and ui.wrapper target the outer wrapper; ui.root targets the interactive button. Each component's Styling Hooks table lists the exact element.

Use plain class for the outer root of single-root components:

<Button class="rounded-md bg-black px-3 py-2 text-white">
  Save
</Button>

Use ui.root when you prefer one styling object or when styling alongside internal parts:

<Button
  :ui="{
    root: 'rounded-md bg-black px-3 py-2 text-white',
    spinner: 'size-4 animate-spin',
  }"
>
  Save
</Button>

For multi-root or teleported components, use ui keys because there is no single reliable DOM root for fallthrough classes:

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50',
    content: 'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6',
  }"
/>

Targeting via CSS

Semantic classes and data attributes also work as CSS selectors:

/* Target by semantic class */
.akaza-dialog-overlay { background: rgba(0, 0, 0, 0.5); }
.akaza-dialog-content { border-radius: 12px; }

/* Target by state */
[data-akaza-state="open"] { opacity: 1; }
[data-akaza-state="checked"] { background: black; }

/* Target by positioning side */
.akaza-tooltip-content[data-akaza-side="top"] { margin-bottom: 8px; }

Using with Tailwind CSS

Declare akaza-reset before Tailwind so utility classes take precedence:

@layer akaza-reset;
@import "tailwindcss";

Classes passed through ui or slot content can then override package CSS.

State-driven Tailwind classes

Use data attribute variants for component state:

<Switch
  :ui="{
    root: 'data-[akaza-state=checked]:bg-neutral-900 dark:data-[akaza-state=checked]:bg-white data-[akaza-state=unchecked]:bg-neutral-200 dark:data-[akaza-state=unchecked]:bg-neutral-700',
  }"
>

Using with :deep() in scoped styles

Target component internals from a parent component's scoped styles using :deep():

<style scoped>
@reference "tailwindcss";

:deep(.akaza-switch) {
  @apply h-6 w-11 rounded-full transition-colors;
}

:deep(.akaza-switch[aria-checked="true"]) {
  @apply bg-neutral-900;
}

:deep(.akaza-switch[aria-checked="false"]) {
  @apply bg-neutral-200;
}
</style>

Use the ui prop or slot content for dark: variants instead of @apply in scoped styles.