Collapsible

A section that shows and hides its panel.

3 unpaid invoices

INV-1042 · Acme Inc.

When to use

Use when: One section of secondary detail that people can reveal.
Avoid when: There are several sections that behave as a set; use Accordion.

Installation

bunx shelf add collapsible

The source lands in src/components/ui/collapsible.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Collapsible from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";

<Collapsible.Root>
  <Collapsible.Trigger render={<Button variant="ghost" />}>Show details</Collapsible.Trigger>
  <Collapsible.Panel>…</Collapsible.Panel>
</Collapsible.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.