Accordion
A vertically stacked set of collapsible panels, in card or divider style.
Usage
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.
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.