Collapsible

Collapsible shows or hides one region of content behind a trigger. It is the simplest disclosure primitive: a Collapsible root wraps a CollapsibleTrigger and a CollapsibleContent, and clicking the trigger reveals or collapses that content. Reach for it when you have exactly one optional section to expand.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: collapsible.tsx

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@beacon/design-system";

<Collapsible className="w-[350px] space-y-2">
  <div className="flex items-center justify-between space-x-4 px-4">
    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="sm">
        Toggle
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
    <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
  </CollapsibleContent>
</Collapsible>;

Parts

Part	Role
Collapsible	Root that holds open state. Accepts open + onOpenChange (controlled) or defaultOpen (uncontrolled).
CollapsibleTrigger	The control that toggles the content. Use asChild to render your own button.
CollapsibleContent	The region that is shown or hidden.

These are thin re-exports of the Radix Collapsible primitives, so all of their props are available.

When to use

• Hiding secondary detail (extra repositories, advanced options) behind a single toggle.
• “Show more” regions where one block expands in place.
• Compacting long content where only part needs to be visible by default.

Do not use Collapsible for multiple sibling sections that open independently; use the Disclosure Controls accordion instead.