@auronui/vue
85+ 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/vuePeer dependencies — install these alongside the package:
pnpm add vue@^3.5.0 reka-ui@^2.9.0 @vueuse/core@^14.0.0Setup
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
| Domain | Components |
|---|---|
| Presentational | Spinner, Separator, Skeleton, Text, Label, Badge, Chip, Card, Kbd, EmptyState |
| Buttons & Links | Button, ButtonGroup, CloseButton, ToggleButton, ToggleButtonGroup, Link |
| Form Inputs | Input, Textarea, NumberField, Fieldset |
| Form Selection | Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, SwitchGroup, InputOTP |
| Overlay | Popover, Tooltip, Modal, AlertDialog, Drawer |
| Navigation | Tabs, Accordion, Collapsible, Breadcrumbs, Toolbar |
| Feedback | Alert, Toast |
| Selection | ListBox, Select, Dropdown, ComboBox, Autocomplete, TagGroup, Tag |
| Data | Table, Pagination |
| Media | Avatar, AvatarGroup, Slider, ProgressBar, ProgressCircle, Meter, ScrollShadow, ScrollArea |
| Date & Time | Calendar, RangeCalendar, DateInput, DateRangeField, TimeField, DatePicker, DateRangePicker |
| Color | ColorArea, ColorSlider, ColorField, ColorSwatch, ColorSwatchPicker, ColorInputGroup, ColorPicker |
| Extended | AspectRatio, Splitter, Stepper, Tree |
SSR
All components are SSR-safe and render in Nuxt 3 with zero hydration mismatches.