Collapsible

Installation

npx baseui-cn add collapsible

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

Usage

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsiblePanel>Content here.</CollapsiblePanel>
</Collapsible>

Note: Use Accordion for multiple collapsible panels with shared state. Collapsible is for a single standalone section.

Examples

Basic

A simple collapsible.

Controlled

Control open state externally.

Compact frame

Pair it with frame and button for settings sections, side panels, or inspector-style layouts.