@auronui/vue

@auronui/vue

90+ accessible Vue 3 components powered by Reka UI and Tailwind CSS 4. Inspired by HeroUI.

Installation

pnpm add @auronui/vue
# npm install @auronui/vue
# yarn add @auronui/vue

Peer dependencies — install these alongside the package:

pnpm add vue@^3.5.0 reka-ui@^2.9.0 @vueuse/core@^14.0.0

Setup

Import the stylesheet once in your app entry point:

// main.ts
import { createApp } from 'vue'
import '@auronui/vue/style'
import App from './App.vue'

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

Usage

<script setup lang="ts">
import { Button, ButtonGroup } from '@auronui/vue'
</script>

<template>
  <ButtonGroup variant="solid" color="primary">
    <Button>Save</Button>
    <Button>Cancel</Button>
  </ButtonGroup>
</template>

Every component is individually importable — only what you use lands in your bundle (sideEffects: false).

Dark mode

Components adapt to the system color scheme automatically via @media (prefers-color-scheme: dark).

For explicit control, add the dark class (or data-theme="dark") to any ancestor element — typically <html>:

<!-- force dark -->
<html class="dark">

<!-- force light -->
<html class="light">

Theming

Override CSS custom properties on :root to customise design tokens:

:root {
  --accent: oklch(55% 0.22 262);   /* primary/accent color */
  --radius: 0.375rem;              /* base border-radius */
}

All theme tokens are documented in @auronui/styles.

Components

SSR

All components are SSR-safe and render in Nuxt 3 with zero hydration mismatches.

License

MIT