Collapsible

Installation

pnpm dlx shadcn@latest add @paneui/collapsible

Usage

import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
  <CollapsiblePanel>Retry failed tasks automatically.</CollapsiblePanel>
</Collapsible>

Composition

Collapsible
├── CollapsibleTrigger
└── CollapsiblePanel

Examples

Default Open

Show More

Controlled

Disabled

Motion

The panel height eases open while the content fades in, slides down 4px and un-blurs; the chevron turns 180°. With reduced motion the panel opens instantly.

API Reference

Built on the Collapsible primitive. Only the props this library adds or changes are listed; everything else passes through.

Unstyled vertical stack; bring your own surface. Also accepts every prop of Collapsible.Root.

CollapsibleTrigger

A 36px row that tints while open. Also accepts every prop of Collapsible.Trigger.

chevron= true: boolean; Show the trailing chevron that rotates when open.

Prop	Type	Default	Description
chevron	boolean	true	Show the trailing chevron that rotates when open.

data-panel-open: Present while the panel is open.

Data attribute	Description
data-panel-open	Present while the panel is open.

CollapsiblePanel

Animates its height; the children sit in an inner wrapper that fades and slides. Also accepts every prop of Collapsible.Panel.

typeset= false: boolean | "docs" | "reading" | "chat"; Turn prose styles back on for the panel content inside a typeset container, or name a preset when it stands alone.

Prop	Type	Default	Description
typeset	boolean \| "docs" \| "reading" \| "chat"	false	Turn prose styles back on for the panel content inside a `typeset` container, or name a preset when it stands alone.

data-starting-style / data-ending-style: Set during the open and close transitions.

Data attribute	Description
data-starting-style / data-ending-style	Set during the open and close transitions.