Collapsible

Expandable/collapsible content section with a clickable header — useful for hiding a proof, a longer aside, or optional detail behind a toggle.

Inside node/facet MDX content, embed the component directly. Inside a page, insert it through the Studio's component picker instead — it configures the same props through a form (or raw JSON if EditorComponentisn't set for this one).

Embed syntax

<Collapsible
  title="Click to expand"
  defaultOpen={false}
  variant="primary"
>
  This is the content that stays hidden until the reader expands it. It can contain any markdown or MDX content, not just plain text.
</Collapsible>

Live example

This is the content that stays hidden until the reader expands it. It can contain any markdown or MDX content, not just plain text.

Props

Prop	Type	Default	Description
title	string	—	Header text shown next to the expand/collapse chevron.
defaultOpen	boolean	true	Whether the section starts expanded.
variant	"primary" \| "rigorous" \| "constructive" \| "conceptual" \| "slate" \| "action" \| "neutral"	"primary"	Color treatment for the header/border/content background — the same semantic palette used for node/facet type badges.
children	ReactNode	—	The content revealed when expanded.

Flowchart