Collapsible

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/collapsible.tsx. Registry items that depend on it install it automatically.

components/ui/collapsible.tsx

Usage

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

export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger render={<Button variant="ghost">What ran</Button>} />
      <CollapsibleContent>Three tool calls.</CollapsibleContent>
    </Collapsible>
  );
}

API Reference

The parts wrap Base UI's Collapsible primitives and accept their props.

Collapsible

CollapsibleProps

open ?: boolean: Controlled open state, the way reasoning sections open while a model is thinking and fold when it settles.
onOpenChange ?: (open: boolean) => void: Called when the open state changes.
defaultOpen : boolean = false: Uncontrolled initial open state.
disabled : boolean = false: Prevents toggling.