Accordion

Vertically stacked expandable content sections for organizing information.

Basic

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

<Accordion defaultValue={["item-1"]} 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>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match your theme.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It's animated by default with smooth transitions.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple open

This section can be open at the same time as others.

Multiple sections can be expanded simultaneously.

<Accordion defaultValue={["item-1", "item-2"]} multiple className="w-full max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>First section</AccordionTrigger>
    <AccordionContent>
      This section can be open at the same time as others.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second section</AccordionTrigger>
    <AccordionContent>
      Multiple sections can be expanded simultaneously.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Third section</AccordionTrigger>
    <AccordionContent>
      Click to expand or collapse any section.
    </AccordionContent>
  </AccordionItem>
</Accordion>

With rich content

We offer free standard shipping on orders over $50.

Express shipping is available for an additional fee. Most orders are processed within 1-2 business days.

<Accordion defaultValue={["shipping"]} className="w-full max-w-md">
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping information</AccordionTrigger>
    <AccordionContent>
      <p>We offer free standard shipping on orders over $50.</p>
      <p>Express shipping is available for an additional fee. Most orders are processed within 1-2 business days.</p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>Return policy</AccordionTrigger>
    <AccordionContent>
      <p>Returns are accepted within 30 days of purchase.</p>
      <p>Items must be unused and in original packaging. <a href="#">Learn more about our return policy</a>.</p>
    </AccordionContent>
  </AccordionItem>
</Accordion>