Collapsible

import { Collapsible, CollapsibleHeader, CollapsiblePanel } from "@arcadia/ui";

<Collapsible tone="muted">
  <CollapsibleHeader action="Explored" details="4 files, 2 searches" />
  <CollapsiblePanel>
    <span {...sx("cmp-detail", cmp.detail)}>Read README.md</span>
    <span {...sx("cmp-detail", cmp.detail)}>Read src/math.ts</span>
    <span {...sx("cmp-detail", cmp.detail)}>Searched for “export function”</span>
  </CollapsiblePanel>
</Collapsible>
<Collapsible tone="muted">
  <CollapsibleHeader
    action="Edited"
    details="src/math.ts"
    end={<span {...sx("cmp-add", cmp.add)}>+10</span>}
  />
  <CollapsiblePanel>
    <pre {...sx("cmp-code", cmp.code)}>
      {"export const clamp = (v: number, lo: number, hi: number) =>\n"}
      {"  Math.min(hi, Math.max(lo, v));"}
    </pre>
  </CollapsiblePanel>
</Collapsible>
<Collapsible loading>
  <CollapsibleHeader action="Running" details="bun test" />
  <CollapsiblePanel>…</CollapsiblePanel>
</Collapsible>

TSX

import { Collapsible, CollapsibleHeader, CollapsiblePanel } from "@arcadia/ui";

<Collapsible>
  <CollapsibleHeader action="Thought" details="12s" />
  <CollapsiblePanel>
    The user wants clamp and lerp in src/math.ts, with tests.
  </CollapsiblePanel>
</Collapsible>

Thinking rows, tool lines, step groups, the work summary, notices and settings sections: every disclosure is this one. The header reads action, details, an optional end slot, then the chevron, which follows the text, appears on hover or focus and turns 90° when open; no space is held for it at rest. The panel's height animates over 150ms while its content fades.

Examples

A settings section

The same anatomy outside the stream: sm for UI text, an icon, and controls in the panel.

import {
  Collapsible, CollapsibleHeader, CollapsiblePanel, Switch,
} from "@arcadia/ui";

<Collapsible size="sm">
  <CollapsibleHeader icon="settings" action="Advanced" details="3 settings" />
  <CollapsiblePanel>
    <Switch label="Send anonymous usage data" defaultChecked />
    <Switch label="Check for updates on launch" defaultChecked />
    <Switch label="Show the developer menu" />
  </CollapsiblePanel>
</Collapsible>

Nested

A work summary holding its steps. expandable={false} keeps the anatomy without a toggle, for a step with nothing to show.

Checkedto-do list

import { Collapsible, CollapsibleHeader, CollapsiblePanel } from "@arcadia/ui";

<Collapsible tone="muted" defaultOpen>
  <CollapsibleHeader action="Worked for" details="2m 14s" />
  <CollapsiblePanel>
    <Collapsible tone="muted">
      <CollapsibleHeader action="Explored" details="4 files, 2 searches" />
      <CollapsiblePanel>Read README.md</CollapsiblePanel>
    </Collapsible>
    <Collapsible tone="muted" expandable={false}>
      <CollapsibleHeader action="Checked" details="to-do list" />
    </Collapsible>
  </CollapsiblePanel>
</Collapsible>

Small

sm is UI text (13/18) for cards and trays; md, the default, is conversation text (15/24).

Read the codeAdd clamp and lerpRun the tests

import { Collapsible, CollapsibleHeader, CollapsiblePanel } from "@arcadia/ui";

<Collapsible size="sm" tone="muted" defaultOpen>
  <CollapsibleHeader icon="todo" action="4 of 4 to-dos" details="Completed" />
  <CollapsiblePanel>
    <span {...sx("cmp-detail", cmp.detail)}>Read the code</span>
    <span {...sx("cmp-detail", cmp.detail)}>Add clamp and lerp</span>
    <span {...sx("cmp-detail", cmp.detail)}>Run the tests</span>
  </CollapsiblePanel>
</Collapsible>

rootStyle on the root takes where the disclosure sits and these knobs; its header and panel read them. Tones and sizes only reassign them, and hover reads its own (--collapsible-action-hover), so a colour you set never drops it. Set data-instant on any ancestor to still every transition inside it.

Takes	Default	Sets
`Ref<FontSize>`	`var(--font-size-lg)`	The header's font size.
`Ref<LineHeight>`	`var(--line-height-lg)`	The header's line height.
`Ref<Tracking>`	`var(--tracking-lg)`	The header's letter spacing.
`Ref<Space> \| "0px"`	`var(--space-1)`	Gap between the panel's children (and above the first).
`Paint`	`var(--icon-3)`	The leading glyph.
`Paint`	`var(--text-2)`	The verb ("Explored").
`Paint`	`var(--text-1)`	The verb under the pointer.
`Paint`	`var(--text-3)`	The object ("4 files, 2 searches").
`Paint`	`var(--text-2)`	The object under the pointer.
`Ref<Space> \| "0px"`	`var(--space-0-5)`	How far the header and panel hang outside the text edge: room for the inset focus ring.
`0 \| 1`	`0`	Keep the disclosure chevron visible at rest (0 by default; use 1 for reference navigation).

Set --collapsible-chevron-rest to 1 when the disclosure should advertise itself before hover, as these reference sections do.

open: boolean; Controlled open state.
defaultOpen: booleanDefaultfalse; Initial open state when uncontrolled.
onOpenChange: (open: boolean, details: OpenChangeDetails) => void; Called when the header toggles it (details.reason: trigger-press) or a find-in-page match opens it.
disabled: booleanDefaultfalse; Blocks toggling.
tone: "neutral" | "muted"Default"neutral"; muted: completed process rows (action and details at text-3; hover text-1 / text-2).
size: "sm" | "md"Default"md"; md: conversation text, 15/24. sm: UI text, 13/18, for cards and trays.
expandable: booleanDefaulttrue; false: a static line (no chevron, no toggle), same anatomy.
loading: booleanDefaultfalse; Live: the action shimmers (Shimmer secondary, tertiary when muted).
instant: boolean; Skip every height/opacity/rotation transition (hydration, bulk collapse, live → ended).
rootStyle: RootStyle<CollapsibleKnobs>; Typed StyleX override: where the disclosure sits and its --collapsible-* knobs.
className: string; A product's hook class for its own rules (being retired, counted by ui.lint's kit-classname).

Rest props go to <div> props.

Usage

Examples

A settings section

Nested

Small

Matrix

Customising

Accessibility

API reference

Collapsible

CollapsibleHeader12 props

CollapsiblePanel2 props