Accordion

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

Component Source API Reference

Yes. It adheres to the WAI-ARIA design pattern.

Installation ​

pnpm dlx shadcn-vue@latest add accordion

Usage ​

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

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