Design System

Component usage guide template

Browse Components

ui

Accordion

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

1. Import
Import the accordion components from the design system.
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/design-system/components/ui/accordion"
2. Props
Accordion component props.
PropTypeDefault
type'single' | 'multiple''single'
defaultValuestring | string[]--
collapsiblebooleantrue
classNamestring--
3. Usages
Common accordion patterns and configurations.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function Example() {
  return (
    <Accordion className="w-full">
      <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 other components.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}