Skip to content
Akaza UI

A Vue-native headless UI library.

Accessible, unstyled primitives built from scratch for Vue 3. Use v-model, named scoped slots, and the ui prop without React-style sub-component trees.

Get started Browse components

Open source. MIT licensed. Made for Vue 3 & Nuxt.

TabsDemo.vue
<script setup lang="ts">
import { ref } from "vue"
import { Tabs } from "akaza-ui"

const tabs = [
  { value: "overview", label: "Overview" },
  { value: "usage", label: "Usage" },
]
const active = ref("overview")
</script>

<template>
  <Tabs v-model="active" :items="tabs">
    <template #panel-overview>
      Accessible behavior, your styles.
    </template>
  </Tabs>
</template>

Everything you need, nothing you don't

Fully Accessible

Built on WAI-ARIA patterns. Keyboard navigation, focus management, and screen reader support are handled for you out of the box.

Completely Unstyled

No default visual styles. Bring your own CSS, Tailwind, or any design system — full control over every pixel, no overrides needed.

Vue-Native Slots API

Composing UI feels natural in Vue. Use slots instead of sub-components — no Radix-style boilerplate, just idiomatic Vue templates.

Headless & Flexible

Components expose all state and behavior through slots and props. You control the markup — Akaza UI handles the logic.

Lightweight

No runtime bloat. Each component is self-contained with minimal dependencies, so you only ship what you actually use.

TypeScript First

Full type safety throughout. Slot props, component props, and emits are all typed — autocomplete works everywhere.

A Vue API that feels like Vue.

No ports. No new component grammar. Just the building blocks for interfaces that work, with room to make them your own.

Slots, not subcomponents.

Use the Vue patterns you already know. State and actions come through scoped slots, without a tree of compound components.

<template #trigger="{ isOpen }">
  {{ isOpen ? 'Close' : 'Open' }}
</template>

Behavior is the foundation.

Keyboard navigation, focus management, and accessibility semantics are part of the component. Build your interface on top of them.

<Dialog title="Make it yours">
  <template #body>
    Your content. Your layout.
  </template>
</Dialog>

Your design stays yours.

Akaza supplies structural CSS for interaction and positioning. Everything visual is up to you: Tailwind, plain CSS, or your own design system.

<Button class="your-button">
  Ship something good
</Button>

Small parts. Real possibilities.

From a single switch to a complete application layout. Try the components, then take a look at the API.

All components
Accordion ↗
Tabs ↗

Headless at the core.
Styled when you want it.

Want a styled starting point? IPEX builds on Akaza with Tailwind CSS. This documentation uses the same foundation. Instruo puts it to work in everyday tools.

Complete form behavior, in one example.

Native validation, server errors, disabled groups, custom controls, and nested fields work together in one real flow.

What to try

  • Select a plan and raise seats to 5 or more to clear native validation.
  • Use slug admin, root, or billing to see server errors.
  • Use [email protected] to see an email server error. [email protected] is valid.
  • Unlock billing profile to see nested disabled controls enter FormData.

Live checks

  • Plan is required.
  • Seats must be at least 5.

Server errors

None yet. Submit with reserved slug or blocked email to populate this.

Realtime data

{
  "ownerName": "",
  "ownerEmail": "[email protected]",
  "workspaceSlug": "support",
  "plan": "(missing)",
  "seats": 3,
  "riskScore": 72,
  "permissions": [
    "read",
    "export"
  ],
  "billingLocked": true,
  "submittedBillingFields": "(disabled fieldset omitted from FormData)"
}
Workspace request

Nested fields share one semantic group, but each control keeps its own label, hint, and error.

Shown on the internal approval ticket.
[email protected] is valid. Use [email protected] for a server error.
Lowercase URL key. Server owns reserved words.
Required custom select with disabled option.
Minimum 5. Initial value is intentionally invalid.
Slider still submits a native value with the form.
Nested controls

Checkboxes, switch, and disabled fieldset live inside the same submit flow.

Select all allowed permissions
Read customer recordsNeeded by support and operations.
Export reportsDownloads CSV files with customer data.
Admin changesCan invite users and edit billing settings.
Billing write accessRequires finance approval.
One disabled option is visible because real policy often leaks into forms.
Use locked billing profileTurn this off to edit the nested billing fieldset. Disabled fields are omitted from FormData.
Billing profile

Disabled fieldset with nested Akaza fields and native inputs.

No submit yet. Live values update on the left.

Add Akaza UI to your project.

Install the package, then choose a component.

InstallationView source