iconiq
—Open GitHub

Accordion

Stacked sections for showing and hiding related content.

Switch libraries above. The preview, install command, and registry files update together.

Yes. Both entries export the same compound parts, variants, and multi-open behavior.

Only the underlying implementation and dependency list change.

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.

Switch libraries above. The preview, install command, and registry files update together.

Yes. Both entries export the same compound parts, variants, and multi-open behavior.

Only the underlying implementation and dependency list change.

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Switch libraries above. The preview, install command, and registry files update together.

Props

AccordionItem

3 props

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

2 props

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

2 props

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

8 props

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
Defaultfalse
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.
reducedMotionboolean
Forces the quieter motion path immediately while still respecting OS-level reduced motion preferences.

Notes

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.