@ava-tech/ui-kit

Composable Vue 3 component library with Tailwind CSS v4 design tokens (AVA Tech theme).

Requirements

• Node.js 20.19+ or 22.12+
• Vue 3.5+
• Tailwind CSS v4 (^4.0.0) — v3 is not supported
• @lucide/vue 0.577+ or 1.x (icons)

Install and set up

Step 1 — Create a Vite + Vue app

Skip this step if you already have a Vue 3 + Vite project.

npm create vite@latest my-app -- --template vue
cd my-app
npm install

Step 2 — Install @ava-tech/ui-kit and dependencies

npm install @ava-tech/ui-kit
npm install -D tailwindcss @tailwindcss/vite

Use Tailwind 4.x (same major version as the kit). Matching patch versions (e.g. 4.3.x) avoids edge-case mismatches.

Note: @lucide/vue and shiki are bundled inside @ava-tech/ui-kit — no separate install required.

Step 3 — Configure Vite

Add the Tailwind v4 plugin to vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Step 4 — App CSS

Create or update src/style.css so Tailwind scans kit component sources and generates their utility classes:

@import "tailwindcss";

@source "../node_modules/@ava-tech/ui-kit/src/kit/**/*.{vue,js}";

Adjust the @source path if your project layout differs (monorepo, custom node_modules location, etc.).

Step 5 — Main entry

Update src/main.js:

import './style.css'
import '@ava-tech/ui-kit/theme.css'
import { createApp } from 'vue'
import { initColorScheme } from '@ava-tech/ui-kit'
import App from './App.vue'

initColorScheme()

createApp(App).mount('#app')

Important: initColorScheme must be imported from '@ava-tech/ui-kit' before you call it.

If you use Pinia, Vue Router, or other plugins, add them as usual — only the lines above are kit-specific:

import './style.css'
import '@ava-tech/ui-kit/theme.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { initColorScheme } from '@ava-tech/ui-kit'
import App from './App.vue'
import router from './router'

initColorScheme()

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

• @ava-tech/ui-kit/theme.css — design tokens, typography, and base styles
• Your style.css — tells Tailwind which kit files to scan for class names

Step 6 — Use components

<script setup>
import { Button, AppShell, TopBar, Sidenav } from '@ava-tech/ui-kit'
</script>

<template>
  <div class="p-8">
    <Button variant="primary">Primary</Button>
  </div>
</template>

Peer dependencies

| Package | Version | Purpose | |---------|---------|---------| | vue | ^3.5.0 | Component runtime | | tailwindcss | ^4.0.0 | Utility classes and @theme tokens |

Install peer dependencies explicitly in your app (Step 2). The kit does not bundle Vue or Tailwind. @lucide/vue and shiki are bundled — no separate install needed.

Dark mode

Call initColorScheme() once at app startup (Step 5). Use useColorScheme() in your app to read or toggle light/dark mode:

<script setup>
import { useColorScheme } from '@ava-tech/ui-kit'

const { colorScheme, toggleColorScheme } = useColorScheme()
</script>

Layout shell

The kit ships presentational shell components (AppShell, TopBar, Sidenav) without app routing or auth. Wire navigation, profile data, and logout in your app layer.

Updating @ava-tech/ui-kit

npm update @ava-tech/ui-kit

After updating, rebuild your app. If token or component class names changed, ensure your @source path still points at the installed package.

Local tarball install (development)

Maintainers can test without publishing to npm. See docs/MAINTAINERS_GUIDE.md in the source repo.