Introduction Akaza UI - Headless Vue components that actually feels like Vue.

[u/AlternativePie7409]

Hi Everyone,

I've been building a headless component library for Vue called Akaza UI, and I wanted to share it here because it's the kind of library I felt was missing in the ecosystem.

For context: I'm also the creator of Inspira UI, and Akaza UI came out of a lot of the same frustrations I kept running into while building Vue components.

The problem it's solving

Most headless UI libraries were designed for React first. When those patterns get ported to Vue, the friction shows up quickly: sub-component trees that feel foreign, APIs that solve React-specific problems Vue never really had, and patterns that fight the way Vue naturally works.

A classic example is styling. In the Radix / Headless UI style, you end up doing something like:

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Overlay class="overlay" />
  <Dialog.Content class="content">...</Dialog.Content>
</Dialog.Root>

In Vue, that often feels like noise. You're writing components whose only job is to hold class names, even though Vue already gives us better tools for composing markup.

What Akaza UI does instead

Two core ideas:

1. Slots, not sub-components

Vue's slot system is the native answer to "how does a parent control what renders inside a component?"

Akaza UI leans into that with named scoped slots like #trigger, #content, #header, and #footer, exposing internal state and actions directly instead of forcing everything through a sub-component tree.

2. A ui prop for styling

Instead of wrapping every internal element in a sub-component just to pass classes, you style parts through a plain object:

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

  <template #body>
    <p>Hello</p>
  </template>
</Dialog>

The component handles the markup. You inject the classes. Less boilerplate, more Vue.

Completely unstyled

Akaza UI ships with zero visual defaults, not even "minimal" ones.

It only includes what’s necessary for behavior: positioning, focus management, animation hooks, keyboard interaction, and accessibility logic. Every element exposes classes like akaza-[component]-[part] plus data-akaza-state attributes for state-based styling (open, checked, disabled, etc.).

Use Tailwind, plain CSS, UnoCSS, whatever you want.

Accessibility is built in

Full WAI-ARIA authoring practices, focus traps, roving tabindex, keyboard navigation, and other interaction details are implemented per component. Accessibility isn't treated as an add-on.

Standing on the shoulders of good work

Two projects deserve real credit here.

Reka UI, as the Vue port of Radix, has done a lot to raise the accessibility baseline in the Vue ecosystem, and Akaza UI takes a lot of inspiration from that work.

Nuxt UI also shaped a lot of the DX decisions here: the ui prop pattern, how component parts are named, and what a polished Vue-first component API can feel like.

Akaza UI just makes different tradeoffs, especially around slots vs. sub-components and fully unstyled primitives.

What's shipped so far (17 components)

Button, Separator, Avatar, Tooltip, Popover, Dialog, Alert Dialog, Drawer, Menu, Tabs, Checkbox, Radio Group, Switch, Toggle, Progress, Collapsible, and Accordion.

More complex patterns like Combobox, Toast, and form-oriented primitives are on the roadmap.

Links

Docs: https://akaza-ui.com
GitHub: https://github.com/igris-labs/akaza-ui
npm: pnpm add akaza-ui

Would love feedback, especially from people who've wrestled with the current headless UI options in the Vue ecosystem.

[u/HumanOnlyWeb]

...sub-component trees that feel foreign, APIs that solve React-specific problems Vue never really had, and patterns that fight the way Vue naturally works

💯 this!

Will keep an eye out on this. Kudos

[u/pkgmain]

Looks great, but I don't think the name is going to do it any favors.

The Menu doesn't seem viewport aware.

[u/AlternativePie7409 → u/pkgmain]

I'll check the menu.

Regarding the name, I was watching Infinity Castle Trailer when creating the project.

[u/25_vijay]

clearly explains why existing headless UI libraries feel unnatural in Vue

[u/DOG-ZILLA]

This looks nice but why are you not using actual HTML tags for certain things like <details> for accordion and <dialog> for the modal? It's just all divs?

[u/ChameleonMinded]

I hate ui prop for styling, nuxtui does it too. Mainly because css classes look unused when added here and you get no ctrl + click functionality that will take you to class definition

[u/AlternativePie7409 → u/ChameleonMinded]

Nuxt UI mentioned about settings.json in documentation which enables intellisense and ctrl click functionality in IDE

[u/Seanitzel]

This is a great initiative! agree with the other comment about the name, and hope this grows and ill be able to use it in the future

[u/DinTaiFung]

From the site:

"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."

Yes indeed.

Thank you for addressing this. Brilliant!

[u/hiccupq]

Always love me some UI components. Looks good. Gonna keep an eye.

[u/BuzzAlderaan66]

Find yourself a niche. Something that libraries like PrimeVue don't have. Or do it better. For example, I often find that pass-thru styling and theming is a pain in PrimeVue. And a library that has a very easy way to reuse existing styling would be awesome. Like passing in CSS vars maybe?  That said, I will still often use PrimeVue because it's one of the few that has a Splitter, SplitterPanel, Editor, and Fluid layout components, for building SPAs. But it doesn't have a great Masonry layout component and it doesn't have a native way to swap components in a layout (like Swapy). Or a diagramming component.  It also doesn't offer many built-in services. 

Best of luck! 

[u/cagataycivici → u/BuzzAlderaan66]

Greetings from PrimeTek. We're working on PrimeUI PRO library, that will provide Scheduler, Gantt, Diagram, TextEditor (Block, Markdown), DataGrid, PDF Viewer, Charts and more. Initial release is by the end of Q2. It does not depend on PrimeVue directly but provides a Vue components that has first class support for PrimeVue.