Accordion

Stacked sections for showing and hiding related content.

Installation

npx shadcn@latest add @iconiq/r-accordion

File Structure

Usage

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

export function AccordionPreview() {
  return (
    <Accordion defaultValue={["workflow"]} className="w-full max-w-xl">
      <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
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

children

Trigger text or inline content.

Type ReactNode

className

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

Type string

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

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

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.

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

Only the underlying implementation and dependency list change.