edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Collapsible

Expandable/collapsible content section with CSS transitions.

Componentsdocsbase-ui/collapsible

Installation

npx shadcn@latest add https://ui.edbn.me/r/collapsible.json

Manual

API Reference

Root

Groups all parts of the collapsible. Renders a div element.

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

onOpenChangefunction

Called when state changes

disabledboolean
=false

Disable collapsible

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Trigger

A button that opens and closes the collapsible panel. Renders a button element.

nativeButtonboolean
=true

Render as native button

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Trigger data attributes
AttributeDescription
data-panel-openPresent when panel is open

Panel

A panel with the collapsible contents. Renders a div element.

hiddenUntilFoundboolean
=false

Use content-visibility

keepMountedboolean
=false

Keep in DOM when closed

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Panel data attributes
AttributeDescription
data-openPresent when panel is open
data-closedPresent when panel is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
Panel CSS variables
VariableDescription
--collapsible-panel-heightThe collapsible panel's height
--collapsible-panel-widthThe collapsible panel's width