Accordion
The accordion component is a vertically stacked set of interactive headings that each contain a title, content, or both.
Installation
Usage
The Accordion component is a vertically stacked set of interactive headings that each contain a title, content, or both.
Core Components
You can use the core components to build your own custom accordion.
Multiple Variants
We provide miltiple variants and themes to choose from. You can customize the accordion to fit your design needs. If you need more customization, you can use the core components to build your own custom accordion.
Customizability
Easily customize the accordion by using the AccordionRoot, AccordionItem, AccordionTrigger, and AccordionContent components.
Add custom functionalities and styles with ease.
Remember to use
e.stopPropagation()to prevent the event from bubbling up the DOM tree.
Imports
We are exporting all the core components of accordion along with the Accordions and Accordion components.
Props
Accordions
| Prop | Description | Type | Default |
|---|---|---|---|
type | The type of accordion. | "single" | "multiple" | "single" |
collapsible | Whether the accordion is collapsible. | boolean | false |
variant | The variant of the accordion. | "default" | "primary" | "none" | "default" |
theme | The theme of the accordion. | "default" | "primary" | "secondary" | "tertiary" | "default" |
showCopyButton | Weather to show copy button. | boolean | false |
props | Other props | typeof AccordionPrimitive.Root with ref | {} |
| Data Attribute | Description | Values |
|---|---|---|
[data-orientation] | The orientation of the accordion. | "vertical" | "horizontal" |
[data-variant] | The variant of the accordion. | "default" | "primary" | "none" |
[data-theme] | The theme of the accordion. | "default" | "primary" | "secondary" | "tertiary" |
Accordion
| Prop | Description | Type | Default |
|---|---|---|---|
id | The id of the accordion. | string | undefined |
trigger | The trigger of the accordion. | ReactNode | undefined |
TClassName | The class name of the trigger. | string | undefined |
CClassName | The class name of the content. | string | undefined |
copyText | Costom text to copy. | string | undefined |
props | Other props | typeof AccordionPrimitive.Item with ref | {} |
| Data Attribute | Description | Values |
|---|---|---|
[data-orientation] | The orientation of the accordion. | "vertical" | "horizontal" |
[data-variant] | The variant of the accordion. | "default" | "primary" | "none" |
[data-theme] | The theme of the accordion. | "default" | "primary" | "secondary" | "tertiary" |
[data-state] | The state of the accordion. | "open" | "closed" |
[data-disabled] | Whether the accordion is disabled. | true | false |