@aaroh/vue-ui

Accessible, themeable Vue components powered by the Aaroh design system.

27 production-ready components with v-model support, slot-based content, and full TypeScript types. All visuals come from @aaroh/ui — themes switch instantly with a single CSS import.

Installation

npm install @aaroh/vue-ui @aaroh/ui

Setup

Import a theme and component CSS in your app entry:

// main.ts (Vite) or plugins/aaroh.ts (Nuxt)

// 1. Pick a theme
import '@aaroh/ui/themes/heritage';

// 2. Import component styles you use
import '@aaroh/ui/components/button';
import '@aaroh/ui/components/input';
import '@aaroh/ui/components/card';

Nuxt Setup

Create a plugin to load CSS globally:

// plugins/aaroh.client.ts
import '@aaroh/ui/themes/heritage';
import '@aaroh/ui/components/button';
import '@aaroh/ui/components/input';
import '@aaroh/ui/components/card';

export default defineNuxtPlugin(() => {});

Or import in nuxt.config.ts:

export default defineNuxtConfig({
  css: [
    '@aaroh/ui/themes/heritage',
    '@aaroh/ui/components/button',
    '@aaroh/ui/components/input',
    '@aaroh/ui/components/card',
  ],
});

Quick Example

<script setup>
import { AButton, AInput, ACard } from '@aaroh/vue-ui';
import { ref } from 'vue';

const email = ref('');
</script>

<template>
  <ACard variant="elevated" size="md">
    <template #default>
      <AInput
        v-model="email"
        label="Email"
        placeholder="[email protected]"
        size="md"
      />
      <AButton variant="solid" size="md">Sign Up</AButton>
      <AButton variant="ghost" size="md">Cancel</AButton>
    </template>
  </ACard>
</template>

Component Naming

All components use the A prefix to avoid collisions with native HTML elements and other libraries:

| Component | Vue Name | | ------------ | --------------- | | Accordion | AAccordion | | AI Chat | AAI | | Animation | AAnimation | | Avatar | AAvatar | | Badge | ABadge | | Button | AButton | | Card | ACard | | Carousel | ACarousel | | Checkbox | ACheckbox | | Dashboard | ADashboard | | Drawer | ADrawer | | DropdownMenu | ADropdownMenu | | Ecommerce | AEcommerce | | Forms | AForms | | Input | AInput | | Media | AMedia | | Modal | AModal | | Progress | AProgress | | Radio | ARadio | | Select | ASelect | | Skeleton | ASkeleton | | Social | ASocial | | Switch | ASwitch | | Tabs | ATabs | | Textarea | ATextarea | | Toast | AToast | | Tooltip | ATooltip |

v-model Support

Form components support Vue's v-model for two-way binding:

<script setup>
import { AInput, ATextarea, ACheckbox, ASwitch } from '@aaroh/vue-ui';
import { ref } from 'vue';

const name = ref('');
const bio = ref('');
const agree = ref(false);
const notifications = ref(true);
</script>

<template>
  <AInput v-model="name" label="Name" />
  <ATextarea v-model="bio" label="Bio" />
  <ACheckbox v-model="agree" label="I agree to the terms" />
  <ASwitch v-model="notifications" label="Enable notifications" />
</template>

Slot-Based Content

Components use Vue's default slot for content projection:

<template>
  <AButton variant="solid" size="md">
    <!-- Default slot for button text -->
    Get Started
  </AButton>

  <ACard variant="elevated">
    <!-- Default slot for card content -->
    <h3>Card Title</h3>
    <p>Card content goes here.</p>
  </ACard>

  <AModal>
    <!-- Default slot for modal body -->
    <p>Are you sure you want to proceed?</p>
  </AModal>
</template>

Props Patterns

Props follow the same conventions as the React and Svelte packages:

<template>
  <!-- Variants -->
  <AButton variant="solid" />
  <AButton variant="outline" />
  <AButton variant="ghost" />
  <AButton variant="gradient" />

  <!-- Sizes -->
  <AButton size="xs" />
  <AButton size="sm" />
  <AButton size="md" />
  <AButton size="lg" />
  <AButton size="xl" />

  <!-- Shapes -->
  <AButton shape="pill" />
  <AButton shape="rounded" />
  <AButton shape="square" />

  <!-- Semantic colors -->
  <AButton color="default" />
  <AButton color="destructive" />
  <AButton color="success" />
  <AButton color="warning" />
</template>

Accessibility

All components include built-in accessibility:

• Correct ARIA attributes applied automatically
• Keyboard navigation out of the box
• Focus ring styling via @aaroh/ui/a11y/focus-ring
• Dev-mode warnings for missing accessibility props (e.g., icon-only buttons without ariaLabel)
• Respects prefers-reduced-motion

<template>
  <!-- Icon-only button — ariaLabel required -->
  <AButton :icon="menuIcon" aria-label="Open menu" />
</template>

Theming

Swap CSS imports to change themes — no component changes needed:

// Switch from heritage to modern
import '@aaroh/ui/themes/modern';

Runtime switching:

<script setup>
import { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';
import { ref } from 'vue';

const handle = ref(null);

function switchTheme(theme) {
  if (handle.value) removeTheme(handle.value);
  handle.value = applyTheme(document.documentElement, theme);
}
</script>

<template>
  <AButton @click="switchTheme(heritage)">Heritage</AButton>
  <AButton @click="switchTheme(modern)">Modern</AButton>
</template>

Vue Compatibility

• Vue 3.4+ required (uses modern defineComponent features)
• Nuxt 3 — full SSR support via plugins or CSS config
• Vite — zero-config, just import and use
• Astro — works with client:* directives

TypeScript

Full types ship with the package:

import type { AButtonProps, AInputProps, ACardProps } from '@aaroh/vue-ui';

Peer Dependencies

• vue >= 3.4.0

License

MIT © Quilonix