Accordion

A vertical disclosure component for grouped content, inspired by shadcn-vue and adapted for Nuxt auto-import.

Installation

npx alixan-ui-nuxt add accordion

Usage

Yes. The trigger uses a native button and exposes aria-expanded for screen readers.

<script setup lang="ts">
const activeItem = ref('item-1')

const items = [
  {
    value: 'item-1',
    title: 'Is it accessible?',
    content: 'Yes. The trigger uses a native button.',
  },
  {
    value: 'item-2',
    title: 'Is it styled?',
    content: 'Yes. It follows Alixan UI visual language.',
  },
]
</script>

<template>
  <Accordion v-model="activeItem" :items="items" />
</template>

Multiple

Yes. The trigger uses a native button and exposes aria-expanded for screen readers.

<script setup lang="ts">
const activeItems = ref(['item-1'])
</script>

<template>
  <Accordion
    v-model="activeItems"
    :items="items"
    multiple
  />
</template>

API Reference

Prop	Type	Default	Description
items	AccordionItem[]	[]	Accordion sections rendered by the component.
modelValue	string \| number \| Array<string \| number> \| null	null	Controlled open item value. Use an array with multiple mode.
multiple	boolean	false	Allows more than one item to stay open.
collapsible	boolean	true	Allows the active single item to be closed.