WFP logoDesign System
Components

Accordion

View on shadcn/ui

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

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/accordion.json

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is an accordion?</AccordionTrigger>
    <AccordionContent>
      An accordion is a vertically stacked list of items, each containing a
      header that can be clicked to reveal or hide associated content.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Default open

The component includes the Accordion root, AccordionItem, AccordionTrigger, and AccordionContent components. All components are fully typed and documented with examples and API references.

Use defaultValue to specify which item should be open by default.

API reference

This component is built on top of Radix UI Accordion. For additional props and detailed API documentation, refer to the Radix documentation.

On this page

InstallationUsageExamplesDefault openAPI reference