Accordion

Stacked sections for showing and hiding related content.

Installation

npx shadcn@latest add @iconiq/r-accordion

File Structure

Usage

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/r-accordion";

export function AccordionPreview() {
  return (
    <Accordion
      className="w-full max-w-xl"
      defaultValue={["workflow"]}
    >
      <AccordionItem value="workflow">
        <AccordionTrigger>How should I use this page?</AccordionTrigger>
        <AccordionContent>
          Switch libraries above. The preview, install command, and registry files update together.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="api">
        <AccordionTrigger>Does the public API stay the same?</AccordionTrigger>
        <AccordionContent>
          Yes. Both entries export the same compound parts, variants, and multi-open behavior.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="install">
        <AccordionTrigger>What changes when I switch providers?</AccordionTrigger>
        <AccordionContent>
          Only the underlying implementation and dependency list change.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Props

Props
Description

AccordionItem

value

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

Type string

children

Usually an AccordionTrigger followed by AccordionContent.

Type ReactNode

className

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

Type string

AccordionTrigger

children

Trigger text or inline content.

Type ReactNode

className

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

Type string

AccordionContent

children

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

Type ReactNode

className

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

Type string

keepMounted

Keep panel content mounted while closed so height animation can finish cleanly. Radix installs also accept forceMount as an alias.

Type boolean·Default true

Accordion

children

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

Type ReactNode

defaultValue

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

Type string[]

value

Controlled list of open item values. Pair with onValueChange.

Type string[]

onValueChange

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

Type (value: string[]) => void

className

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

Type string

collapsible

Single-open mode only. When false, the open row cannot be collapsed by clicking it again.

Type boolean·Default true

multiple

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

Type boolean·Default false

variant

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

Type "default" | "quiet"·Default "default"

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

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