- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
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.