---
title: Collapsible
description: Show and hide expandable content regions
type: reference
summary: Compose Collapsible, CollapsibleTrigger, and CollapsibleContent in custom React UI.
url: /docs/components/collapsible
source: apps/template/content/docs/components/collapsible.mdx
related:
  - /docs/components
  - /docs/components/details
---

# Collapsible

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@vercel/geistdocs/components/collapsible";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Collapsible className="w-full max-w-sm" defaultOpen>
    <CollapsibleTrigger className="font-medium">Advanced options</CollapsibleTrigger>
    <CollapsibleContent className="pt-3 text-gray-900">
      Configure optional behavior here.
    </CollapsibleContent>
  </Collapsible>
</div>

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

Use the native [Details](/docs/components/details) component when browser-native disclosure behavior is sufficient.