Accordion

Updated November 2, 2026

Accordion stacks sections in one ink frame, split by dithered rules, each header a button with a pixel chevron that opens its panel. One opens at a time unless type is "multiple"; arrow keys and Home and End move between headers. A single item with collapsible is a collapsible. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Ten developers, with more added by email.

import "@/components/dithercharts/controls.css"
import { Accordion } from "@/components/dithercharts/accordion"

<Accordion
  defaultValue={["seats"]}
  items={[
    { value: "billing", title: "Is Pro a subscription?", content: "No. Pro is one payment for lifetime updates." },
    { value: "seats", title: "How many seats come with Team?", content: "Ten developers, with more added by email." },
    { value: "export", title: "Can I export to Figma?", content: "Not yet.", disabled: true },
  ]}
/>

// Any number open at once, controlled.
<Accordion type="multiple" value={open} onValueChange={setOpen} items={items} />

// A collapsible: one section that opens and closes.
<Accordion collapsible items={[{ value: "details", title: "Show chart details", content: <ChartTable /> }]} />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add accordion

Props

It renders a native element, so every other attribute that element takes passes through.

Accordion props
Prop	Type	Default	Description
itemsrequired	Type readonly AccordionItem[]	Default –
type	Type "single" \| "multiple"	Default `"single"`	"single" keeps at most one section open, closing the last as the next opens; "multiple" opens any number.
collapsible	Type boolean	Default `false`	Lets a single accordion close its open section, leaving none open. A multiple one always can.
value	Type readonly string[]	Default –	The open sections' values, for a controlled accordion; pair it with `onValueChange`.
defaultValue	Type readonly string[]	Default none	The sections open at first, for an uncontrolled accordion.
onValueChange	Type (value: string[]) => void	Default –
headingLevel	Type 2 \| 3 \| 4 \| 5 \| 6	Default `3`	The level of the heading around each header, to fit the page's outline.
className	Type string	Default –