When to use it

Use Collapsible when a single block needs to reveal secondary content without turning the whole area into a list of separate expandable items. It is a good fit for advanced filters, optional product details, and setup forms with extra controls.

If you have several sibling sections and visitors need to compare or open them one by one, Accordion is usually the better primitive.

Slot strategy

• Collapsible owns the open or closed state.
• CollapsibleTrigger is the interactive control and often works best with asChild on a Button.
• CollapsibleContent wraps the revealed region and can contain any normal layout.

Keep the trigger label explicit so the visitor knows what becomes visible before they open it.

Behavior and theming guidance

Use defaultOpen when the content is important enough to show on first load but still benefits from being collapsible later. The content area already animates open and closed, so avoid adding extra motion on nested elements unless it serves a clear purpose.

Prefer styling the revealed container with normal layout utilities like spacing, border, or surface tokens. That keeps the primitive reusable while letting the surrounding feature decide how prominent the expanded state should feel.