Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Examples

Variant

State

Multiple

State

Disabled

Yes! Every component is written in strict TypeScript and exports precise interfaces for your application.

Yes. Keyboard navigation, ARIA attributes, and screen reader announcements are handled natively.

Absolutely. Drop it directly into your App Router RSC or Client boundary architectures.

import { Accordion } from 'kalki-design'

<Accordion>Click me</Accordion>

npx kalki-design add accordion

import { Accordion } from 'kalki-design'

export default function Example() {
  return <Accordion />
}

Name	Type	Default	Description
Name`items`	Type`AccordionItem[]`	Default`—`	DescriptionArray of items containing title, content, and disabled state.
Name`variant`	Type`'default' \| 'bordered' \| 'separated'`	Default`'default'`	DescriptionVisual style of the accordion.
Name`multiple`	Type`boolean`	Default`false`	DescriptionAllows multiple items to be open at once.