A list that opens one section at a time.
Import it from rei-kit/web:
import { BaseAccordion } from 'rei-kit/web'
Open BaseAccordion in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseAccordion } from 'rei-kit/web'
const faq = [
{ key: 'price', title: 'How much does it cost?' },
{ key: 'export', title: 'Can I export my data?' },
]
</script>
<template>
<BaseAccordion :items="faq">
<template #default="{ item }">
<p v-if="item.key === 'price'">Free while in beta.</p>
<p v-else>Yes, from the settings page.</p>
</template>
</BaseAccordion>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
items | readonly AccordionItem<K>[] | yes | |
multiple | boolean | false | Allow several open at once. Off by default, which is what makes it an accordion. |
headingLevel | 2 | 3 | 4 | 3 | Which heading the control sits inside. A heading, always — it is how a screen reader user moves between sections without opening any of them. The level is a prop because it depends on what is above it on the page, and getting it wrong breaks the outline. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.