ComponentsNew
Clip Accordion
Questions and answers that open on a spring. The answer is revealed top to bottom like a blind. Several items can be allowed to stay open.
Customize
accentColor
secondaryColor
glowColor
Based on Accordion (MIT license) · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | AccordionItem entries with an AccordionHeader and an AccordionPanel inside. |
| multiple | boolean | false | Several items can be open at once. |
| defaultValue | string | string[] | — | Which item is open at first. |
| accentColor | string | "#ffffff" | Main colour: border and chevron of the open item. |
| secondaryColor | string | "#a3a3a3" | Second colour: where the open header's tint fades to. |
| glowColor | string | "rgba(255, 255, 255, 0.12)" | Soft glow around the open item. |
| AccordionItem.value | string | — | Unique name of the item. |
| AccordionHeader.customIcon | boolean | — | Hide the chevron to use your own icon. |
| AccordionPanel.articleClassName | string | — | Classes of the inner block that wipes open. |
| className | string | — | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge