vue-aura-ui

Vue Aura UI

Vue.js Components Library built with Vite, Vue3 and Tailwind

Instalation

Enter your project and install vue-aura-ui:

npm i vue-aura-ui

Register the components globally

In src/main.js import styles and vueAuraUI

import 'vue-aura-ui/dist/index.css'
import vueAuraUI from 'vue-aura-ui'

and dont forget to use it:

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

Now you can use the components everywhere:

<template>
  <div>
    <ACard />
    <AButton />
  </div>
</template>

Install individual components:

In src/main.js import styles

import 'vue-aura-ui/dist/index.css'

Then add it to your component

<script setup>
import { ACard, AButton } from 'vue-aura-ui'
</script>
<template>
  <div>
    <ACard />
    <AButton />
  </div>
</template>

Components

AButton

Text goes in the default slot; icons in icon-left and icon-right, either, both or none. With iconOnly the default slot is the icon, so give the button an aria-label.

<AButton @click="save">Save</AButton>
<AButton variant="tonal" color="secondary">Cancel</AButton>
<AButton size="large" color="danger">Delete</AButton>

<AButton>
  <template #icon-left><StarIcon /></template>
  Favourite
</AButton>

<AButton icon-only aria-label="Favourite"><StarIcon /></AButton>
<AButton icon-only rounded="full" variant="tonal" aria-label="Favourite">
  <StarIcon />
</AButton>

<AButton is-loading>Saving</AButton>

Icon sizing uses two different tokens on purpose: --aura-button-icon-size-* next to text and the larger --aura-button-icon-only-* when the icon stands alone.

Breaking change. The colour used to be variant (<AButton variant="danger">); it is now color, and variant selects the fill. Rename those props when upgrading.

ACard

<ACard :is-loading="pending">
  <h3>Title</h3>
  <p>Any content you want.</p>
</ACard>

ASwitch

Supports v-model.

<ASwitch v-model="notifications" label="Notifications" />
<ASwitch v-model="alerts" color="danger" label="Alerts" />

The knob is a fixed colour per mode (--aura-switch-knob: white on light surfaces, near-black on dark ones) and only the track changes when the switch turns on: --aura-switch-track-off when off, --aura-switch-track-<color> when on. default deliberately skips the mid greys, which are the off track's own colour.

AChip

Icons go in the icon-left and icon-right slots — either, both or none. The library ships no icons, so use whichever set your application already has; they are sized from the --aura-chip-icon-size-default token.

<AChip>Chip text</AChip>
<AChip color="success" variant="outlined" rounded="full">Active</AChip>
<AChip color="danger" size="small" label="3 errors" />

<AChip color="info">
  <template #icon-left><StarIcon /></template>
  Featured
  <template #icon-right><XIcon /></template>
</AChip>

Outlined chips take their border and text from --aura-chip-outline-border-* and --aura-chip-outline-text-*, which resolve to a different tone per mode: no single tone reads on both. Light surfaces use the action colour, dark ones the 500 step of the family — except secondary, whose 500 barely separates from the dark background (1.2:1), so it drops to the 300 step. warning is the exception in reverse: its yellow scores 1.1:1 on white, so on light surfaces it uses the dark tone of its family.

Retheme a colour scheme in one line, without touching the rest of the system:

.dark {
  --aura-chip-outline-text-secondary: var(--aura-color-secondary-200);
  --aura-chip-outline-border-secondary: var(--aura-color-secondary-200);
}

Sizes come from the sizes.chip.* design tokens, so overriding a token restyles every chip:

:root {
  --aura-chip-height-md: 28px;
  --aura-chip-radius-md: 2px;
}

TypeScript

Type declarations ship with the package, so props are checked and autocompleted without installing anything else. variant narrows to 'primary' | 'secondary', and ASwitch types its v-model as a boolean.

Styling

vue-aura-ui/dist/index.css ships only the utility classes the components need. It deliberately does not include Tailwind's Preflight reset, so it will not restyle the headings, links or body of your application.

Dark variants are opt-in through a dark class, so your application stays in control. Add it to a wrapping element (usually <html>) to switch the components over:

document.documentElement.classList.toggle('dark', isDark)

Typography

The components ship with Source Sans 3 (loaded from Google Fonts by dist/index.css), but they do not impose it: they render with --aura-font-family, whose default value is inherit, so your application's font wins out of the box.

Opt in to Aura's typeface with a single line — the font is already loaded, no <link> needed:

:root {
  --aura-font-family: var(--aura-font-sans);
}

Or point the components at your own stack:

:root {
  --aura-font-family: 'Inter', system-ui, sans-serif;
}

Scoping the override to a wrapper element applies it to just that subtree, the same way colour tokens work.

Shadows

Cards use shadow-card, a single shadow spread over six layers so it reads as diffuse light rather than a grey outline. Everything else uses the drop-shadow-{xs,sm,md,lg,xl,2xl} scale, which follows the element's real silhouette — rounded corners and circles included — instead of its box.

Dark mode does not reuse the light values. A faint black shadow disappears on a dark surface, and turning the layers white reads as fog rather than elevation, so shadow-card becomes a 1px lit edge along the top plus a shorter, much more opaque black shadow underneath, and the drop-shadow scale keeps its geometry with the opacity raised. The switch is the exception: there the white light is the effect.

All of them live in CSS custom properties, so they can be replaced without touching the Tailwind config:

:root {
  --aura-shadow-card: 0 1px 2px rgb(0 0 0 / 0.1);
  --aura-drop-shadow-xs: none;
}

Theming

The components reference semantic design tokens, exposed as CSS custom properties. Override any of them to match your brand — no build step, no Tailwind config on your side:

:root {
  --aura-action-primary-default: #7c3aed;
  --aura-action-primary-hover: #6d28d9;
}

<family> is one of primary, secondary, default, danger, success, warning or info — the same values AButton's variant prop accepts.

Dark mode redefines a subset of these under .dark, so scoping an override to a wrapper element themes just that subtree.