Installation

Install the package

npm install akaza-ui

pnpm add akaza-ui

yarn add akaza-ui

Setup

Headless means no visual theme, not no CSS. Akaza's stylesheet supplies required positioning, hidden-input visibility, interaction, and transition mechanics. Load it once before using components; dimensions and visual styles remain yours to define.

Nuxt

Add the Nuxt module to nuxt.config.ts. The module registers component auto-imports and injects package CSS.

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

Vue (with Tailwind CSS)

Import Akaza's structural stylesheet in your Tailwind CSS entry, after the Tailwind import. Declare the akaza-reset layer first so that utility classes take precedence, even though Akaza's CSS is imported last:

@layer akaza-reset;
@import "tailwindcss";
@import "akaza-ui/dist/akaza-ui.css";

Load that CSS entry once from your app entry point. No separate Akaza CSS import in main.ts is needed:

import './main.css'

Then import components where you use them:

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

Vue (without Tailwind)

Import the same structural stylesheet in your app entry point, then add your own visual CSS:

import 'akaza-ui/dist/akaza-ui.css'

TypeScript support

Akaza UI exports component types:

import type { AccordionItem, DialogProps } from 'akaza-ui'

Framework compatibility