Accordion
Expandable content panels for showing and hiding information.
1npx purekit add accordion
1import Accordion from "@/components/purekit-ui/accordion/accordion"
Basic
Simple accordion component
Accordion Title
Custom Header
Customize the header with the action prop
Accordion Title
Accordion Group
Manage multiple accordions
First
Second
Third
Accordion Props
| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | Title displayed when no action prop is provided |
open | boolean | - | Control open state |
setOpen | (open: boolean) => void | - | Callback to change open state |
defaultOpen | boolean | false | Initial open state for uncontrolled mode |
action | ReactNode | (props: { open?: boolean; setOpen?: (open: boolean) => void }) => ReactNode | - | Custom header content |
classNameHeader | string | '' | CSS class for the header element |
classNameContent | string | '' | CSS class for the content wrapper |
className | string | '' | Additional CSS classes |
children | ReactNode | - | Content inside the accordion |
AccordionGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
openIndex | number | - | Index of the open accordion item |
setOpenIndex | (index: number) => void | - | Callback to change open item index |
defaultOpenIndex | number | - | Initial open index for uncontrolled mode |
className | string | '' | Additional CSS classes |
children | ReactNode | - | Accordion elements inside the group |