Accordion

Stacked sections that expand one panel at a time. Panels grow and shrink with a measured height animation.

Yes. It follows WAI-ARIA and is fully keyboard operable.

tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/seam/ui/accordion"

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={["item-1"]} className="w-80">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Yes. It follows WAI-ARIA and is fully keyboard operable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          The panel height eases between 0 and its measured size.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
bunx --bun @seamui/cli@latest add accordion

Notes

  • Base UI measures each panel's natural height into --accordion-panel-height; seamui eases the height between 0 and that value — the layout-dimension exception to springs. The chevron rotates in sync.
  • Full header/button/region semantics with keyboard support; set openMultiple on the root to allow several panels open at once.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.