Accordion

A React component in Beamline's Layout category.

Topics that open in place, one at a time or several: FAQs and settings sections; each header is a button and the panel's height follows its content.

Use it for

FAQs and settings sections where people open one topic at a time.

Not for

A single show-more region (collapsible).
Content people need to compare side by side.

Anatomy

root
item
header (h3) with trigger and chevron
panel

Variants

size: md, lg
multiple: false, true

States

closed
open
disabled

Keyboard

Enter / Space toggles
↑ ↓ between headers
Home / End

Motion

Height opens over --pui-duration-standard and closes over --pui-motion-out; the chevron turns over --pui-duration-standard and brightens on hover at once, dimming over --pui-motion-out. Reduced motion is instant.

Props

Prop	Type	Default	Description
`items`	`{ id?, title, content, disabled? }[]`	—
`defaultOpen`	`number \| number[]`	—
`multiple`	`boolean`	`false`
`size`	`"md" \| "lg"`	`"md"`
`classNames`	`AccordionClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—	Root styles; ref targets native accordion div.

Dependencies

@radix-ui/react-accordion, lucide-react

Import

import { Accordion } from "@/components/accordion/accordion";

Get it

Accordion is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent