Docs
Accordion

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Component Source Primitive API Reference

Installation ​

bash
npx shadcn-vue@latest add accordion

Usage ​

vue
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
</script>

<AccordionRoot>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</AccordionRoot>
Edit this page on GitHub