Collapsible

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/collapsible

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Composition

Every part is a separate export. Collapsible owns state; the rest are presentational and must appear in this order.

Collapsible├── CollapsibleTrigger└── CollapsiblePanel

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Collapsible className="w-96">
  <CollapsibleTrigger>What is a collapsible?</CollapsibleTrigger>
  <CollapsiblePanel>
    A single disclosure region that toggles between an open and closed
    state.
  </CollapsiblePanel>
</Collapsible>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

openboolean—Whether the collapsible panel is currently open.

defaultOpenbooleanfalseWhether the collapsible panel is initially open.

onOpenChange((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)—Event handler called when the panel is opened or closed.

disabledbooleanfalseWhether the component should ignore user interaction.

CollapsiblePanel

PropTypeDefaultDescription

hiddenUntilFoundbooleanfalseAllows the browser's built-in page search to find and expand the panel contents.

keepMountedbooleanfalseWhether to keep the element in the DOM while the panel is hidden.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Collapsible — see its reference for the full keyboard map.

Keyboard focus draws a 2px ring in --ring, never removed — only shown on :focus-visible, so a pointer press does not paint one.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-mdCollapsibleTrigger

--fgCollapsibleTrigger

--fg-mutedCollapsiblePanel

--lineCollapsibleTrigger

--ringCollapsibleTrigger

--surfaceCollapsibleTrigger

--surface-raisedCollapsibleTrigger

Source

src/components/ui/collapsible/collapsible.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Collapsible

On this page