Navigation
Overlays
Accordion
Collapsible content panels with 2 variants (basic, border). Features py-3 trigger padding, pb-4 content padding, and CaretDown/Up icons. Border variant adds outer border and rounded styling.
Figma: DS-001 Foundations ยท 34:526
Import
Live Demo
Single and multiple expandable accordion panels.
AccordionItem states (Figma 22:516)
| Active | Default | Disabled |
|---|---|---|
| Off | ||
| On | This is an accordion content. | This is an accordion content. |
Variant=basic
Variant=border
Multiple items open (type="multiple")
We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.
Yes. We use industry-standard encryption and security practices.
Disabled item
Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or multiple items can be open |
| collapsible | boolean | false | When type is single, allows closing all items |
Examples
Single Collapsible
Multiple Open
Allow multiple items to be open simultaneously.