Accordion

Installation

Nothing to add — the source is already at design-system/components/accordion.tsx. Install only the runtime packages it imports.

pnpm add radix-ui

Usage

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/design-system/components/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes.</AccordionContent>
  </AccordionItem>
</Accordion>

Default

Open and close the panels — only one stays open at a time.

<Accordion type="single" collapsible className="w-full max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Component source

This is the file in your repository. Edit it directly — tokens, variants, and accessibility defaults are all yours.

Source unavailable for this component.