# Collapsible

A section that expands and collapses its content.

## Installation

```bash
npx shadcn@latest add https://landorui.landorestate.com/r/collapsible.json
```

[Registry JSON](https://landorui.landorestate.com/r/collapsible.json)

## Preview

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

export function Preview() {
  return (
    <Collapsible className="w-full max-w-sm space-y-2">
      <CollapsibleTrigger>Toggle details</CollapsibleTrigger>
      <CollapsibleContent>Content revealed when the trigger is toggled.</CollapsibleContent>
    </Collapsible>
  );
}
```


## Source

### ui/collapsible.tsx

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



## Usage

A section that expands and collapses its content.

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