Accordion
A collapsible component that helps you organize and display content in a concise, interactive way.
Overview Item 1
Overview Item 2
The Accordion component displays content in collapsible panels.
It's useful for organizing information without overwhelming users.
Accordion leverages DropdownText to manage collapsible items.
Usage
javascript
1import Accordion from "@/components/atoms/Accordion"; 2 3<Accordion 4 items={[ 5 { 6 title: 'Overview Item 1', 7 content: 'Content of item 1.' 8 }, 9 { 10 title: 'Overview Item 2', 11 content: 'Content of item 2.', 12 // You can also nest accordions 13 items: [ 14 { 15 title: 'Nested Item 1', 16 content: 'This is a nested item.' 17 }, 18 { 19 title: 'Nested Item 2', 20 content: 'This is another nested item.' 21 } 22 ] 23 } 24 ]} 25/>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | array | - | Array of objects, each containing title & content fields |
| oneOpen | boolean | false | If true, only one accordion panel can be open at once |
| borders | boolean | true | If true, borders are applied to the accordion items |
| level | number | 0 | Used to automatically indent nested accordions |
| className | string | "" | Additional Tailwind classes (overrides defaults) |
| ...props | object | - | Any other valid HTML <div> attributes (e.g. role, aria-*, etc.). |
You can nest an Accordion inside another Accordion to create a multi-level collapsible structure for more complex documentation.
Examples
Basic Accordion
Accordion Item 1
Accordion Item 2
Accordion Item 3
One-Item-Open Accordion
Allows only a single item to be open at a time.
Item #1
Item #2
Item #3
Nested Accordion
Give an item an items prop to nest another accordion.
Nest Accordion
Simple Item
Be mindful of nesting too many layers of accordions. Deep nesting can confuse users or clutter your layout.