# Collapsible
URL: /design/components/collapsible

One region that folds open and closed in place.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component CollapsibleSpecimen omitted]

Code for CollapsibleSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import {
  ChevronDownIcon,
  ChevronsUpDownIcon,
  CopyIcon,
  LogOutIcon,
  PlusIcon,
  RefreshCwIcon,
  SettingsIcon,
  UserIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

function CollapsibleSpecimen(): ReactNode {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="w-full max-w-72"
    >
      <CollapsibleTrigger
        render={
          <Button variant="ghost" className="w-full justify-between">
            What ran in this turn
            <ChevronsUpDownIcon className="size-3.5" />
          </Button>
        }
      />
      <CollapsibleContent>
        <div className="text-muted-foreground flex flex-col gap-1.5 px-3 py-2 font-mono text-[12px]">
          <span>&gt; read /docs/architecture</span>
          <span>&gt; ran get_weather</span>
          <span>&gt; present(&lt;Weather /&gt;)</span>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

## Installation

Install the dependencies:

- packages

  - @base-ui/react

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

- code

  "use client"; import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"; function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) { return \<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />; } function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) { return ( \<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} /> ); } function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) { return ( \<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} /> ); } export { Collapsible, CollapsibleTrigger, CollapsibleContent };

* title

  components/ui/collapsible.tsx

* copyText

  "use client"; import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"; function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) { return \<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />; } function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) { return ( \<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} /> ); } function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) { return ( \<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} /> ); } export { Collapsible, CollapsibleTrigger, CollapsibleContent };

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  "use client"; import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"; function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) { return \<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />; } function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) { return ( \<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} /> ); } function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) { return ( \<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} /> ); } export { Collapsible, CollapsibleTrigger, CollapsibleContent };

## 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

- `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` (default `false`) — Uncontrolled initial open state.
- `disabled`: `boolean` (default `false`) — Prevents toggling.