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 accordionNotes
- 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
openMultipleon the root to allow several panels open at once.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.