Accordion
Retractable data panels with terminal-style [ + ] / [ - ] toggle icons. Uses AnimatePresence for fast linear height animation. Supports single or multiple open items.
[SRC]tsx
1import { Accordion, AccordionItem } from "@mdrbx/nerv-ui";
Basic Usage
[i]INTERACTIVE
Click each panel header to expand/collapse. In single mode (default), opening one panel closes the others.
SINGLE MODEinspection frame
live inspectionframe-01
MAGI-01 MELCHIOR .... ONLINE
MAGI-02 BALTHASAR .. ONLINE
MAGI-03 CASPER ..... STANDBY
Multiple Mode
MULTIPLE OPENinspection frame
live inspectionframe-01
Pattern analysis running... 47% complete
No anomalies detected in last 24h cycle
Accordion Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | AccordionItem elements |
| multiple | boolean | false | Allow multiple items open simultaneously |
| defaultOpen | string[] | [] | IDs of items open by default |
| className | string | "" | Additional CSS classes |
AccordionItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique item identifier |
| title* | string | — | Header label text |
| children* | ReactNode | — | Collapsible content |
| color | "cyan" | "white" | "orange" | "green" | "cyan" | Header text color |
[!]COMPOUND COMPONENT
AccordionItem must be used inside an Accordion container. Using it
standalone will throw an error.