Collapsible

An interactive component which expands/collapses a panel.

The new release adds smart defaults, improved a11y states, and tighter spacing for dense layouts.

Source-ready React + Tailwind components, theme tokens, and a matching documentation system.

Usage

Use the open and onOpenChange props when the state is managed externally.

Sync status: Collapsed

Choose which workspaces to sync, schedule background updates, and keep offline access enabled.

The Collapsible component renders a div that manages disclosure state.

Prop	Type	Default	Description
`open`	`boolean`	`undefined`	Controls the open state when provided.
`defaultOpen`	`boolean`	`false`	Sets the initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Called when the open state changes.
`disabled`	`boolean`	`false`	Prevents toggling and reduces opacity.
`className`	`string`	`undefined`	Add custom classes to the root.

The CollapsibleTrigger component renders a button linked to the content region.

Prop	Type	Default	Description
`showIcon`	`boolean`	`true`	Toggles the chevron icon.
`icon`	`React.ReactNode`	`undefined`	Custom icon node for the trigger.
`className`	`string`	`undefined`	Add custom classes to the trigger.

The CollapsibleContent component renders the collapsible panel body.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Add custom classes to the content container.