Collapsible

An interactive panel that can be expanded or collapsed to show or hide content.

$bunx shadcn@latest add @nx-ui/collapsible
Registry item
Installs withutils
Used byai-chain-of-thoughtai-planai-queueai-reasoningai-sourcesai-taskai-toolai-web-previewlistings-filtersonboarding-checklistsidebar-nav

Basic usage

An uncontrolled panel that starts open via `defaultOpen`. The trigger is any button; style it with `data-panel-open`.

Loads under 500kg are weighed on the yard scale and logged against the delivering organisation automatically. Anything larger needs a booked slot through the depot portal.

Multiple independent panels

Each Collapsible manages its own open state, so several can sit stacked without affecting one another.

Controlled & disabled

Drive `open` yourself for a controlled panel, or set `disabled` to stop a panel responding to the trigger entirely.

Cranbourne Organics (collapsed)

Composition: waste diversion report

Collapsibles nested inside a Card, each row pairing an icon, a status badge and a chevron toggle for the underlying detail.

Q3 diversion report
Nexus network summary across three linked sites.
Running at 62% of seasonal capacity. Green waste intake is ahead of last year's figures for this point in the collection cycle.

API reference

Exported parts and their props, extracted from the component source.