Headless UI Primitives for Vue & Nuxt

Akaza UI is a Vue 3 headless component library that provides a collection of unstyled primitives for forms, overlays, navigation, menus, feedback, and more.

It handles state, ARIA semantics, keyboard behavior, and focus management while your application controls the visual layer.

The library currently contains 35+ UI components. Vue projects can import individual components from the akaza-ui package, while Nuxt projects use a module that registers components and loads the package CSS.

Official Website

Browse All Components

Features

Binds open and value state through standard v-model.
Exposes component state and actions through named scoped slots.
Accepts item arrays for tabs, menus, accordions, radio groups, and checkbox groups.
Assigns classes to documented component parts through the ui prop.
Publishes akaza-* selectors and data-akaza-* attributes for state-based styling.
Includes a Nuxt module with component auto-imports and automatic CSS injection.
Exports TypeScript types beside the component exports.

How To Use It

Install the package with NPM, PNPM, or Yarn

pnpm add akaza-ui

Vue Setup with Tailwind CSS

Import your application stylesheet and the Akaza UI behavior stylesheet from the Vue entry file:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './main.css'
import 'akaza-ui/dist/akaza-ui.css'
createApp(App).mount('#app')

Declare the akaza-reset layer before Tailwind in the CSS entry file:

/* main.css */
@layer akaza-reset;
@import "tailwindcss";

Vue Setup without Tailwind CSS

Keep the package CSS import in main.ts. Import components inside each Vue single-file component:

<script setup lang="ts">
import { Dialog, Tabs, Tooltip } from 'akaza-ui'
</script>

Nuxt Setup

Add the bundled module to nuxt.config.ts. The module registers Akaza UI components as auto-imports and injects the package CSS.

export default defineNuxtConfig({
  modules: ['akaza-ui/nuxt'],
})

Available UI Components

Category	Components
Forms and controls	Button, Checkbox, Checkbox Group, Combobox, Field, Fieldset, Form, Input, Number Field, Radio Group, Select, Slider, Switch, Toggle, Toggle Group
Overlays and feedback	Alert Dialog, Context Menu, Dialog, Drawer, Hover Preview Card, Menu, Overlay Provider, Popover, Toast, Tooltip
Navigation and disclosure	Accordion, Collapsible, Menubar, Navigation Menu, Tabs, Toolbar
Display	Avatar, Meter, Progress, Separator

Styling and Customization

Use plain class on a component with one DOM root. Use ui.root when the root belongs in the same styling object as internal parts.

Teleported or multi-root components such as Dialog, Alert Dialog, and Drawer require named ui keys for the overlay, content, header, body, and footer.

Akaza UI also exposes semantic classes and state attributes:

.akaza-dialog-content {
  border-radius: 0.75rem;
  background: white;
}
.akaza-switch[data-akaza-state="checked"] {
  background: #171717;
}
.akaza-tooltip-content[data-akaza-side="top"] {
  margin-bottom: 0.5rem;
}

Inside a scoped Vue style block, target component internals through :deep(). Tailwind dark-mode variants work more predictably when classes sit directly in the ui prop or slot markup.

Alternatives and Related Resources

FAQs

Q: Why does Akaza UI look unstyled after installation?
A: The library supplies interaction and behavior CSS, not a visual theme. Add classes through class or the ui prop, or target the published akaza-* selectors in your stylesheet.

Q: Do I need to import the Akaza UI CSS in Nuxt?
A: No. The akaza-ui/nuxt module injects the CSS and registers the components as auto-imports.

Q: Why do my Tailwind utility classes lose to the component styles?
A: Add @layer akaza-reset; before @import "tailwindcss"; in the CSS entry file. The declaration places Akaza UI’s base layer below Tailwind utilities.

Q: Can I use Akaza UI with Vue 2?
A: No. The package requires Vue 3.5 or newer.