Collapsible pane
Pane section with expand/collapse toggle. Built on Radix Collapsible with animated height transitions.
Install
npx shadcn@latest add https://substrate.georgedrury.co.uk/r/collapsible-paneExamples
Default
The first section starts open, the second starts collapsed. Click the chevron to toggle.
X
Y
"use client"
import { useState } from "react"Components
| Component | Description |
|---|---|
CollapsiblePane | Root wrapper with Radix Collapsible state |
CollapsiblePaneHeader | Header row with expand/collapse chevron |
CollapsiblePaneLabel | Section title text |
CollapsiblePaneContent | Animated body that collapses to zero height |
Props (CollapsiblePane)
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | true | Initial open state (uncontrolled) |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Called when open state changes |