StorybookGitHub

Accordion

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

Orders leave the warehouse within two business days.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/accordion.json

Usage

Use accordion to progressively disclose content, such as FAQs or grouped settings, without navigating away from the page. Each AccordionItem needs a unique value so the root can track which panel is expanded.

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

<template>
  <Accordion type="single" collapsible class="max-w-md">
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>
        Yes. It comes with default styles that match the rest of the design system.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

Built on reka-ui's Accordion. Set type="single" for one open panel at a time, or type="multiple" to allow several panels open at once.