Accordion
Collapsible item list with height animation, wrapping Radix Accordion.
Accordion wraps @radix-ui/react-accordion. Content height animates
against Radix's measured --radix-accordion-content-height CSS variable on
the data-[state] selectors (the pattern from the Radix docs), and the
whole transition disappears under motion-reduce.
Installation
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@iammikz/srui";
Usage
Props
| Export | Notes |
|---|---|
Accordion | Root: type="single" | "multiple", collapsible, defaultValue |
AccordionItem | One panel; value required |
AccordionTrigger | Header button; chevron rotates when open — override with icon?: LucideIcon, hide with icon={null} |
AccordionContent | Animated body |
Examples
Multiple open
Custom or hidden chevron
icon overrides the trailing chevron with any lucide-react icon;
icon={null} hides it entirely.
For a custom icon, pass any lucide-react component (e.g. Plus) via the
icon prop — it needs a real component, so it lives in app code rather
than static MDX:
import { Plus } from "lucide-react";
<AccordionTrigger icon={Plus}>Custom icon</AccordionTrigger>
Accessibility
Full accordion ARIA pattern from Radix: triggers expose
aria-expanded/aria-controls, panels are labelled by their triggers,
arrow keys and Home/End navigate between headers. The height transition
carries a motion-reduce:transition-none override.