Accordion
A vertically stacked set of collapsible panels, in card or divider style.
Usage
About
Product leader focused on design systems and developer experience. Previously at Spotify and Klarna.
Installation
npm install @wunderui/reactThen import what you need:
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@wunderui/react"Examples
FAQ list
A plain question list: rows separated by hairlines, a chevron that flips when an answer opens. Sits directly on the page — no card around it.
Icon list in a card
A navigation-style list inside one card: each row carries a bare icon, and the plus turns into a cross while the row is open.
Boxed icons with a button indicator
Heavier rows for settings sections: the icon sits in its own framed square and the indicator is a small +/− button. The first row starts open.
FAQ as separate cards
The same questions as separate cards. Use it when the questions need air between them, or when one sits alone on a page.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Accordion item in profile card
A profile card where the biography stays visible and the settings sections fold away underneath, so the card keeps a fixed height no matter how many sections it has.
About
Product leader focused on design systems and developer experience. Previously at Spotify and Klarna. Coffee, cycling and clean component APIs.
Accordion for FAQ section
A support card: a tinted header names the section, and one answer is already open so visitors see what an expanded row looks like.