soybeanjs/vean-ui/vean-aria

Vean Aria

Accessible, unstyled Vue 3 primitives from Vean.

Quick start

• Use this skill when the user wants Vean logic and accessibility without the default styled layer.
• Load REFERENCE.md for installation, sub-path exports, locale support, and styling boundaries.
• Load references/composition.md for base primitives vs Compact components and how to style your own wrappers.
• Load references/components.md to browse component families.
• Then load the exact shared component reference files linked from that index.

Available guidance

Loading files

• [ ] REFERENCE.md first for setup or package-surface questions.
• [ ] references/composition.md when the task is about composition patterns, provide{Name}Ui, or custom styling.
• [ ] references/components.md if you need to browse the available component families.
• [ ] Then load only the exact shared component reference files you need.

Key concepts

Basic patterns

<script setup>
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@vean/aria';
</script>
 
<template>
  <AccordionRoot>
    <AccordionItem value="item-1">
      <AccordionTrigger>Title</AccordionTrigger>
      <AccordionContent>Content</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

<script setup>
import { AccordionCompact } from '@vean/aria';
 
const items = [{ value: 'item-1', title: 'Title', description: 'Content' }];
</script>
 
<template>
  <AccordionCompact :items="items" />
</template>

Notes

• Shared component reference files live under the vean-ui skill because generated API summaries already include aria exports like Root, Trigger, Content, and Compact symbols.
• For ready-to-use styled components, use the vean-ui skill instead.