Expandable sections that handle keyboard navigation, ARIA state, and panel animation for you.
Root + 4 atoms / Accessible / Composable
Looping preview · single or multi-open
Accordion owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.
Different structures made from the same atoms.
Accordion Header can render the Accordion Trigger fallback when its own slot is empty, keeping the item structure compact.
Accordion Header componentFAQ patterns place Accordion Trigger inside Accordion Header, then pair it with Accordion Content inside each Accordion Item.
Faq Section 1Some patterns skip Accordion Header and put Accordion Trigger directly before Accordion Content inside Accordion Item.
Testimonial 10A few ways Accordion shows up in real builds.
Multi-open content sections with accessible disclosure.
Single-open sections for dense controls.
Tabbed panels with an optional responsive accordion fallback.
i-columns / Root + 4 atomsView familyFocus-trapped modal overlays with title, description, and close.
i-frame / Root + 5 atomsView familySlide-in panels with focus trap and escape close.
i-sidebar / Root + 5 atomsView family