Collapsible

A single panel toggled by a button. Unlike Accordion it stands alone — ideal for inline FAQ entries, code blocks, or side panels. Animates via --collapsible-panel-height.

High-level wrapper

DATABASE_URL=postgres://...API_SECRET=sk-...

import { Collapsible } from "@brijbyte/agentic-ui/collapsible";
import "@brijbyte/agentic-ui/collapsible.css";

export default function HighLevelDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: "280px" }}>
      <Collapsible trigger="Recovery keys">
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1)" }}>
          <span>alien-bean-pasta</span>
          <span>wild-irish-burrito</span>
          <span>horse-battery-staple</span>
        </div>
      </Collapsible>

      <Collapsible trigger="Environment variables" defaultOpen>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1)" }}>
          <span>DATABASE_URL=postgres://...</span>
          <span>API_SECRET=sk-...</span>
        </div>
      </Collapsible>

      <Collapsible trigger="Disabled section" disabled>
        <span>You cannot see this.</span>
      </Collapsible>
    </div>
  );
}

Composed: base-ui Root + styled parts

import { Collapsible } from "@base-ui/react/collapsible";
import { CollapsibleTrigger, CollapsiblePanel } from "@brijbyte/agentic-ui/collapsible";
import "@brijbyte/agentic-ui/collapsible.css";

export default function ComposedDemo() {
  return (
    <Collapsible.Root style={{ display: "flex", flexDirection: "column", width: "280px" }}>
      <CollapsibleTrigger>Changelog</CollapsibleTrigger>
      <CollapsiblePanel>
        <div
          style={{
            padding: "var(--space-3)",
            fontFamily: "var(--font-mono)",
            fontSize: "var(--font-size-sm)",
            color: "var(--color-secondary)",
            border: "1px solid var(--color-line-subtle)",
            borderTop: "none",
            borderRadius: "0 0 var(--radius-md) var(--radius-md)",
            background: "var(--color-elevated)",
            display: "flex",
            flexDirection: "column",
            gap: "var(--space-1)",
          }}
        >
          <span>v1.2.0 — Added dark mode</span>
          <span>v1.1.0 — Performance fixes</span>
          <span>v1.0.0 — Initial release</span>
        </div>
      </CollapsiblePanel>
    </Collapsible.Root>
  );
}

API Reference

Collapsible

base-ui docs ↗

A single panel toggled by a button. Unlike Accordion it stands alone —
ideal for inline FAQ entries, code blocks, or side panels.
Animates via --collapsible-panel-height.

Prop	Type	Default
trigger*	`ReactNode`	—
Content rendered inside the toggle button.
children*	`ReactNode`	—
Content revealed when expanded.
defaultOpen	`boolean`	—
Whether the panel is initially open (uncontrolled).
open	`boolean`	—
Controlled open state.
onOpenChange	`((open: boolean) => void)`	—
Called when the panel opens or closes.
disabled	`boolean`	—
Prevent the panel from being toggled.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the CollapsibleStyles object. Each key maps to a hashed CSS module class name at runtime.

panelpanel-contentroottriggertrigger-icon