Introduction

Akaza UI is a headless component library for Vue. It gives you the interactive behavior, accessibility semantics, and keyboard handling for common UI patterns — without imposing any styles.

You own the markup. You own the styles. Akaza UI handles the hard parts.

Philosophy

Most UI libraries bundle behavior and design together. That's great for getting started, but it creates friction the moment your design deviates from their defaults — you're fighting overrides instead of building.

Akaza UI takes the opposite approach:

• Zero default styles. Components render semantic HTML with no classes, no inline styles. Apply whatever CSS or utility framework you want.
• Vue-native slots API. Every component exposes its state and actions through slots — the idiomatic Vue way. No Radix-style sub-component trees, no .Root, .Trigger, .Content chaining.
• Behavior is the product. Focus management, keyboard navigation, ARIA attributes, open/close state — all handled correctly so you don't have to think about it.
• Composable, not opinionated. Components do one thing well. Combine them however your design requires.

What's included

Akaza UI ships a set of low-level primitives covering the most common interactive patterns:

Design decisions

Why slots instead of sub-components?

Sub-component APIs (e.g. <Accordion.Root>, <Accordion.Trigger>) work well in React but feel unnatural in Vue. Vue's slot system is already the idiomatic way to inject content and receive state from a parent — Akaza UI leans into that instead of fighting it.

Why no default styles at all?

Even "minimal" default styles create specificity battles. A truly unstyled baseline means you start from zero — no resets to undo, no !important needed.

Why not wrap an existing headless library?

Most headless libraries are React-first with Vue adapters bolted on. Akaza UI is written from the ground up for Vue, which means the API, reactivity model, and slot design all feel native — because they are.

Why the name "Akaza"?

People occasionally ask about the name. Akaza UI takes its name from the character Akaza in Demon Slayer (created by Koyoharu Gotouge).

It follows a similar philosophy:

• Loyal to principles: Akaza UI focuses on being strictly Vue-native, refusing to compromise its architecture by acting as a ported version of React-based libraries.
• Bare-handed strength: Akaza UI ships completely unstyled, providing pure structural DOM primitives without CSS bloat, relying entirely on raw structural perfection.
• Perfect adaptation: Akaza UI flawlessly reads and reacts to state through Vue’s native reactivity and scoped slots, directly exposing state and control to the developer.
• Mastery of fundamentals: Accessibility is core infrastructure, not an add-on. WAI-ARIA roles, keyboard navigation, and focus management are built flawlessly into the foundation of every primitive.
• Direct execution: Rejecting convoluted, deeply nested sub-component trees, Akaza UI favors flat templates and a single ui prop for immediate, boilerplate-free styling.

Disclaimer: "Akaza" and the Demon Slayer universe are the intellectual property of Koyoharu Gotouge and Shueisha. Akaza UI is an independent, open-source project. The name is a respectful nod to the character's pursuit of fundamental perfection, chosen to honor Gotouge-sensei's original creation.