Collapsible

Simple disclosure for showing and hiding supporting content.

Installation

npx shadcn@latest add @iconiq/r-collapsible

File Structure

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/r-collapsible";

export function ShippingDetails() {
  return (
    <Collapsible className="w-full max-w-xl">
      <CollapsibleTrigger>How does shipping work?</CollapsibleTrigger>
      <CollapsibleContent>
        <div className="space-y-4">
          <p>
            Orders leave our warehouse within one business day. Delivery timing
            depends on the service you choose at checkout.
          </p>
          <ul>
            <li>Standard shipping arrives in 3–5 business days.</li>
            <li>Express shipping is available in most metro areas.</li>
            <li>Tracking is emailed once the package is scanned by the carrier.</li>
          </ul>
          <p>
            International orders can take 7–14 days while customs reviews the
            shipment.
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Props

Props
Description

Collapsible

open

Controlled open state for the root. Pass this when a parent needs to own expansion.

Type boolean

defaultOpen

Initial open state for uncontrolled usage. The component manages future toggles internally.

Type boolean·Default false

onOpenChange

Called whenever the root opens or closes, regardless of which provider is installed underneath.

Type (open: boolean) => void

disabled

Disables the root and prevents trigger interaction on both providers.

Type boolean·Default false

className

Merged onto the root shell that wraps the trigger and content.

Type string

CollapsibleTrigger

asChild

Merge trigger semantics onto a single child element instead of rendering the default button.

Type boolean·Default false

showIcon

Show the built-in indicator. Ignored when asChild is true.

Type boolean·Default true

icon

Custom indicator node. Defaults to a chevron.

Type ReactNode

iconPosition

Indicator position when using the default trigger layout.

Type "start" | "end"·Default "end"

className

Merged onto the trigger button.

Type string

CollapsibleContent

asChild

Merge panel semantics onto a single child element instead of rendering animated wrappers.

Type boolean·Default false

contentClassName

Classes for the inner content wrapper. Ignored when asChild is true.

Type string

forceMount

Keep content mounted while closed so exit animation can run. Set false for heavy panels you want removed from the DOM.

Type boolean·Default true

className

Merged onto the animated outer shell.

Type string

Contact

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