Accordion

Collapsible section group.

import { Accordion } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`items` *	`AccordionItemData[]`	—	Array of accordion items
`type`	`'single' \| 'multiple'`	`'single'`	Whether multiple items can be expanded simultaneously
`defaultValue`	`string \| string[]`	—	Default expanded item(s) For 'single' type: string For 'multiple' type: string[]
`collapsible`	`boolean`	`true`	Whether all items can be collapsed (only for single mode)
`disabled`	`boolean`	`false`	Disable all accordion items
`class`	`string`	—	Additional CSS classes
`style`	`JSX.CSSProperties`	—	Custom styles
`unstyled`	`boolean`	—	Remove sk-* styling classes

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.