---
title: Collapsible
description: An interactive component that expands and collapses content.
links:
  doc: https://base-ui.com/react/components/collapsible
  api: https://base-ui.com/react/components/collapsible#api-reference
---

```tsx
'use client';

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDownIcon } from 'lucide-react';

export function CollapsibleDefault() {
  return (
    <Collapsible className='w-64'>
      <CollapsibleTrigger className='flex items-center gap-2'>
        Show more
        <ChevronDownIcon className='size-4 transition-transform duration-200 in-data-panel-open:rotate-180' />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p className='text-sm text-muted-foreground'>
          The chevron icon rotates when the panel is open.
        </p>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/collapsible
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'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 };
```

**Update the import paths to match your project setup.**

## Usage

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

```tsx
<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsiblePanel>
    Content that can be shown or hidden.
  </CollapsiblePanel>
</Collapsible>
```