Accordion
Grouped expansion panels that show one or many sections.
Overview
Grouped expansion panels styled as the kit's surface-container cards: each
item is an elevated 20px-radius card, with a state-layer hover tint on each
trigger and a trailing chevron that rotates with the kit's 200ms strong
ease-out. Content height animates open and closed; both the rotation and the
height animation are dropped under reduced motion. One-open-at-a-time (the
classic FAQ) is the default; add multiple for independent panels.
value/defaultValue take an array of open item values.
Yes. It adheres to the WAI-ARIA disclosure pattern: the trigger is a real button wired to its region with aria-expanded and aria-controls.
$ npx morpha-ui add accordionExamples
Multiple open
Orders ship within 2 business days with tracking included.
Free returns within 30 days of delivery, no questions asked.
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add accordion. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add accordionAPI Reference
Prop
Type
Accessibility
- Triggers are real buttons inside heading wrappers, wired with
aria-expandedandaria-controlsby the Base UI primitive. - Keyboard: Arrow keys move between triggers, Space/Enter toggles, Home/End jump to the first/last trigger.
- In the default single mode the open panel can always be toggled closed — no extra prop needed.