Collapsible

Collapsible tucks away one optional section, such as advanced options, order details or one branch of a file tree. It toggles visibility. Your app handles loading and navigation.

Install

bashnpx shadcn@4.18.0 add @siteplane/collapsible

Import it from @/siteplane/components/collapsible. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Accordion: Pick Accordion instead for a list of related sections that behave as a group.
• vs Popover: Pick Popover instead when the extra content should float over the page without pushing content down.

Rules

• Use open and onOpenChange when your app owns the state, or defaultOpen when it does not.
• Give an icon-only CollapsibleTrigger an accessible label that stays meaningful whether open or closed.
• Add a chevron yourself with data-slot="collapsible-chevron"; the trigger draws no indicator by default.
• Set keepMounted on CollapsiblePanel when closed content must stay in the DOM, such as a form section.
• Nest collapsibles for a tree and pass a smaller ghost button through render for compact rows.

Reference

• Collapsible docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.