---
title: Collapsible
description: A collapsible panel controlled by a button.
links:
  doc: https://base-ui.com/react/components/collapsible
  anatomy: https://base-ui.com/react/components/collapsible#anatomy
  api: https://base-ui.com/react/components/collapsible#api-reference
---

```tsx
import { IconChevronDown } from "@tabler/icons-react";

import { buttonVariants } from "@zbmui/ui/components/button";

import { cn } from "@/lib/cn";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export function CollapsibleDemo() {
  return (
    <Collapsible>
      <CollapsibleTrigger
        className={cn(
          buttonVariants({ variant: "secondary", size: "sm" }),
          "data-panel-open:[&_svg]:rotate-90"
        )}
      >
        Show recovery keys
        <IconChevronDown className="size-4 transition-transform" />
      </CollapsibleTrigger>
      <CollapsiblePanel>
        <ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">847362951023</li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">293847561829</li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">618293847562</li>
        </ul>
      </CollapsiblePanel>
    </Collapsible>
  );
}
```

## Installation

<ComponentSource name="collapsible" title="components/ui/collapsible.tsx" />
## Usage

```tsx
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/ui/collapsible";
```

```tsx
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes. Free to use for personal and commercial projects. No attribution required.
  </CollapsiblePanel>
</Collapsible>
```