Accordion

Collapsible panels with spring-eased height animation and a rotating chevron. Single-open by default; pass `multiple` to allow several panels open at once.

Installation

npx stepwise-ui add accordion

Default

import { Accordion } from '@/components/stepwise/accordion'

const items = [
  { id: 'q1', title: 'Why does this exist?', content: 'Because we rebuilt the same…' },
  { id: 'q2', title: 'How long did this take?', content: 'Longer than planned…' },
]

<Accordion items={items} />

Multiple open

<Accordion items={items} multiple />

Props - Accordion

PropTypeDescription

items

AccordionItem[]

Array of panel definitions.

multiple

boolean

Allow multiple panels open simultaneously. Default false.

defaultOpen

string | string[]

Item id(s) open on first render. An array is only honoured with multiple.

Props - AccordionItem

PropTypeDescription

id

string

Unique key for this panel.

title

string

Header text.

content

ReactNode

Body content, revealed on open.