Accordion

ChangelogAlert

Vertically stacked panels that expand and collapse.

Yes. It follows the WAI-ARIA design pattern.

Yes. Every color and radius is a CSS variable.

Yes. Panels open and close smoothly.

Installation

pnpm add krz-ui

Usage

import { Accordion } from "krz-ui";
<Accordion
  type="single"
  items={[
    { value: "a", title: "Is it accessible?", content: "Yes. It follows WAI-ARIA patterns." },
    { value: "b", title: "Is it themeable?", content: "Yes, with CSS variables." },
  ]}
/>

API Reference

PropTypeDescription
itemsAccordionItem[]Panels with value, title and content.
type"single" | "multiple"Whether one or many panels can be open.
value / defaultValuestring[]Controlled or initial open panels.
onValueChange(value: string[]) => voidCalled when panels open or close.
variant"default" | "separated"Visual style.
className / style / ref—All go to the outer element. See Customization.
classNames{ item?, heading?, trigger?, chevron?, panel?, content? }Extra classes for inner parts.