Accordion

Stacked sections for showing and hiding related content.

Installation

npx shadcn@latest add @iconiq/r-accordion

Quiet variant

Use variant="quiet" for the lighter inline disclosure style while keeping the same compound Accordion API.

Props

AccordionItem

Groups one trigger and one content panel under the value used for open-state tracking.

valuestring

Required

Stable identifier used by defaultValue, value, and the underlying primitive.

childrenReactNode

Required

Usually an AccordionTrigger followed by AccordionContent.

classNamestring

Merged onto the primitive item while preserving the default or quiet row styling.

AccordionTrigger

Renders the clickable row label with the active variant's indicator treatment.

childrenReactNode

Required

Trigger text or inline content.

classNamestring

Merged onto the trigger button after the variant's layout and focus classes.

AccordionContent

Renders the animated panel body for the active item and keeps rich text styling intact.

childrenReactNode

Required

Panel content, including paragraphs, lists, links, or richer fragments.

classNamestring

Merged onto the inner copy wrapper so text and rich content can be styled per panel.

Accordion

Provider-switchable accordion surface with the same exported API regardless of whether you install the Base UI or Radix UI registry entry.

childrenReactNode

Required

AccordionItem children rendered in display order. The legacy items prop remains supported for older installs.

defaultValuestring[]

Uncontrolled list of item values that should be open on first render.

valuestring[]

Controlled list of open item values. Pair with onValueChange.

onValueChange(value: string[]) => void

Called with the next open-value array for both Base UI and Radix UI variants.

classNamestring

Merged onto the max-w-2xl root wrapper so you can stretch, align, or reposition the accordion in your layout.

multipleboolean

Default false

Allows multiple rows to stay open at the same time. When omitted, opening a row closes the previous one.

variant"default" | "quiet"

Default "default"

Switches between the standard divided list and the quieter inline plus/minus treatment.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-accordion, motion, lucide-react.

The old items array shortcut still works, but the documented API now mirrors the shadcn-style compound parts.

Installs the Radix accordion primitive under the same compound Accordion API.

Uses the existing Motion + Radix content choreography with animated height, wipe, and copy transitions.

The generated registry file is /r/r-accordion.json.