Accordion
Accordions hide content until the user expands it — ideal for FAQs, optional details, or long reference sections.
Basic Usage#
<AccordionGroup> <Accordion>
Multiple Items#
Only one accordion can be open at a time.
<AccordionGroup> <Accordion>
With Icons#
Add an icon prop using a Clidey Design icon name:
<AccordionGroup> <Accordion>
Numbered Rows#
Add numbered to an AccordionGroup for reference lists readers scan by position.
<AccordionGroup numbered>
Props Reference#
AccordionGroup Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | One or more Accordion components. |
numbered | boolean | Label rows 01, 02, 03 in order. |
Accordion Props
| Prop | Type | Description |
|---|---|---|
title | string | Heading text shown when collapsed. |
icon | string | Optional Clidey Design icon name (e.g. "lock", "gauge"). |
children | ReactNode | Content revealed when expanded. Supports full MDX. |
Was this page helpful?