Accordion (FAQ)
Stacked disclosure rows with bouncy spring motion—single or multi-open—for FAQs and policy lists.
Preview & code
GFA Studio CLI · Coming soon
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/accordion-list.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/accordion-list.json (or copy from this repo: apps/web/src/blocks/gfa/accordion-list.tsx).
- Place it in your project (for example: ./src/blocks/gfa/accordion-list.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
Dependencies
Uses Motion (motion/react) for panel height and chevron rotation. Client-only; bring your own copy and item ids.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionListItem[] | — | Rows to render; each needs a stable string id, title, and content (React node) for the expanded body. |
| type | "single" | "multiple" | "single" | single keeps one panel open at a time; multiple allows several open rows. |
| defaultOpenIds | string[] | — | Optional ids that start expanded (uncontrolled initial state). |
| className | string | — | Extra classes merged onto the outer list wrapper (e.g. max width). |