Collapsible

The collapsible is the simplest disclosure primitive in the system. Use it when one section needs optional depth but the surrounding layout should stay visible. If you need a stacked set of repeated sections, reach for Accordion instead.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Collapsible>
  <CollapsibleTrigger>Studio notes</CollapsibleTrigger>
  <CollapsibleContent>Optional supporting detail.</CollapsibleContent>
</Collapsible>

Why This Primitive Exists

The wrapper gives the system a small, reusable toggle region without the heavier semantics of an accordion or modal.

• Use it when one block on the page needs hideable supporting detail.
• Prefer it to a dialog when the content still belongs inline.
• Avoid it when several sections need the same repeated disclosure pattern.

Examples

Basic Disclosure

Use the default root and slot exports when one short section needs an open and closed state.

<Collapsible defaultOpen>
  <CollapsibleTrigger>Studio notes</CollapsibleTrigger>
  <CollapsibleContent>Optional supporting detail.</CollapsibleContent>
</Collapsible>

Compact Metadata Sections

This primitive works well for side details, checklists, and operational notes where each block is still conceptually separate.

<Collapsible className="border border-border p-4">
  <CollapsibleTrigger>Launch dependencies</CollapsibleTrigger>
  <CollapsibleContent>{/* supporting notes */}</CollapsibleContent>
</Collapsible>

In Context

A collapsible should support the visible overview, not compete with it. This pattern keeps the main summary readable while tucking production detail into one secondary region.

Guidance

Pick The Right Disclosure Primitive

• Use Collapsible for one expandable region.
• Use Accordion for repeated stacked sections.
• Use Dialog only when the content must interrupt the current task.

Keep The Trigger Clear

• Make the trigger label specific enough that readers know what opens.
• Keep summary text outside the hidden content when the section must stay understandable while closed.
• Add supporting badges or metadata only when they clarify state, not as decoration.

Treat Hidden Content As Secondary

• Put optional notes, implementation detail, or secondary checklists in the content region.
• Do not bury the primary action or required instruction inside a collapsible by default.
• If the expanded area becomes large enough to dominate the page, reconsider the layout.

API Reference

Core Exports

Props

Because the file is a thin Radix wrapper, the underlying Radix props remain available.