Collapsible

An interactive component which expands/collapses a panel.

Powered by

Base UIShadcn UI

Installation

npx shadcn@latest add @redpanda/collapsible

pnpm dlx shadcn@latest add @redpanda/collapsible

yarn dlx shadcn@latest add @redpanda/collapsible

bunx shadcn@latest add @redpanda/collapsible

nubx shadcn@latest add @redpanda/collapsible

aube dlx shadcn@latest add @redpanda/collapsible

Controlled

Multiple independent collapsibles

Disabled

Default open

Chevron on leading edge

Reveal sensitive content

Usage

<Collapsible>  <CollapsibleTrigger>Collapsible Trigger</CollapsibleTrigger>  <CollapsibleContent>Collapsible Content</CollapsibleContent></Collapsible>

When to use

Use this decision tree to determine when to use the Collapsible component:

Props

Keyboard interactions

Accessibility

• The trigger exposes aria-expanded + aria-controls pointing at the panel; Base UI sets the native data-open (root/trigger) / data-panel-open (panel) attributes you can target with CSS selectors.
• The trigger must be a real button (or another focusable element via the render prop); static <div> triggers lose keyboard activation.
• Use keepMounted on CollapsibleContent when the hidden content must remain in the DOM for SEO, intersection observers, or mid-animation measurements.

Controlled vs uncontrolled

Uncontrolled — trigger toggles the panel locally:

<Collapsible>  <CollapsibleTrigger>Toggle</CollapsibleTrigger>  <CollapsibleContent>{/* ... */}</CollapsibleContent></Collapsible>

Controlled — drive open from parent state (e.g. expand all / collapse all from a toolbar):

const [open, setOpen] = useState(false);
<Collapsible open={open} onOpenChange={setOpen}>  <CollapsibleTrigger>Toggle</CollapsibleTrigger>  <CollapsibleContent>{/* ... */}</CollapsibleContent></Collapsible>;

Don’t delete from the DOM

The choice made (also Base UI’s default) is to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Collapsible content to be taken into account by Google, pass keepMounted to CollapsibleContent — the closed panel stays in the DOM (hidden via the hidden attribute):

<Collapsible>  <CollapsibleTrigger>Toggle</CollapsibleTrigger>  <CollapsibleContent keepMounted>{/* stays in the DOM while closed */}</CollapsibleContent></Collapsible>

To additionally let the browser’s find-in-page (Ctrl/Cmd + F) reveal the closed content, use hiddenUntilFound instead (implies keepMounted and hides the panel with hidden="until-found"):

<CollapsibleContent hiddenUntilFound>{/* discoverable by find-in-page */}</CollapsibleContent>

Credits

• We use Base UI for the collapsible component.
• We take our inspiration from Shadcn UI for the collapsible style.