Surfaces

Accordion

Expandable sections built on an accessible primitive.

Expandable sections

Built on an accessible primitive with full keyboard support.

A rounded, dark, accessible design system built on Base UI.

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

<Accordion defaultValue={["what"]}>
  <AccordionItem value="what">
    <AccordionTrigger>What is Spira?</AccordionTrigger>
    <AccordionPanel>
      A rounded, dark, accessible design system built on Base UI.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem value="a11y">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes — every component wraps an accessible Base UI primitive.
    </AccordionPanel>
  </AccordionItem>
</Accordion>