Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Collapsible
description: An interactive component which expands/collapses a panel.
---

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'collapsible' }}
---
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Icon } from "@/components/ui/icon"
---

<Collapsible class="flex w-full max-w-sm flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <h4 class="text-sm font-semibold">Order #4189</h4>
    <CollapsibleTrigger
      class={cn(
        buttonVariants({ variant: "ghost", size: "icon" }),
        "inline-flex"
      )}
      aria-label="Toggle details"
    >
      <Icon name="chevrons-up-down" />
    </CollapsibleTrigger>
  </div>
  <div
    class="flex items-center justify-between rounded-md border px-4 py-2 text-sm"
  >
    <span class="text-muted-foreground">Status</span>
    <span class="font-medium">Shipped</span>
  </div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 text-sm">
      <p class="font-medium">Shipping address</p>
      <p class="text-muted-foreground">100 Market St, San Francisco</p>
    </div>
    <div class="rounded-md border px-4 py-2 text-sm">
      <p class="font-medium">Items</p>
      <p class="text-muted-foreground">2x Studio Headphones</p>
    </div>
  </CollapsibleContent>
</Collapsible>
```

## Installation

```bash
npx shadcn@latest add @fulldev/collapsible
```

## Usage

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

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

## Composition

Use the following composition to build a `Collapsible`:

```text
Collapsible
├── CollapsibleTrigger
└── CollapsibleContent
```

## Default Open

Use `defaultOpen` to render a collapsible expanded on first load.

```astro
<Collapsible defaultOpen>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>
```

## Examples

### Basic

```astro live
---
import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Icon } from "@/components/ui/icon"
---

<Card class="mx-auto w-full max-w-sm">
  <CardContent>
    <Collapsible class="data-open:bg-muted rounded-md">
      <CollapsibleTrigger
        class={cn(
          buttonVariants({ variant: "ghost" }),
          "w-full justify-between"
        )}
      >
        Product details
        <Icon name="chevron-down" />
      </CollapsibleTrigger>
      <CollapsibleContent
        class="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm"
      >
        <div>
          This panel can be expanded or collapsed to reveal additional content.
        </div>
        <Button size="xs">Learn More</Button>
      </CollapsibleContent>
    </Collapsible>
  </CardContent>
</Card>
```

### Settings Panel

Use a trigger button to reveal additional settings.

```astro live
---
import { Button, buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Icon } from "@/components/ui/icon"
import { Input } from "@/components/ui/input"
---

<Card class="mx-auto w-full max-w-xs" size="sm">
  <CardHeader>
    <CardTitle>Radius</CardTitle>
    <CardDescription>Set the corner radius of the element.</CardDescription>
  </CardHeader>
  <CardContent>
    <Collapsible class="flex items-start gap-2">
      <FieldGroup class="grid w-full grid-cols-2 gap-2">
        <Field>
          <FieldLabel for="radius-top-left" class="sr-only">
            Top left radius
          </FieldLabel>
          <Input id="radius-top-left" placeholder="0" value="4" />
        </Field>
        <Field>
          <FieldLabel for="radius-top-right" class="sr-only">
            Top right radius
          </FieldLabel>
          <Input id="radius-top-right" placeholder="0" value="4" />
        </Field>
        <CollapsibleContent class="col-span-full grid grid-cols-subgrid gap-2">
          <Field>
            <FieldLabel for="radius-bottom-left" class="sr-only">
              Bottom left radius
            </FieldLabel>
            <Input id="radius-bottom-left" placeholder="0" value="4" />
          </Field>
          <Field>
            <FieldLabel for="radius-bottom-right" class="sr-only">
              Bottom right radius
            </FieldLabel>
            <Input id="radius-bottom-right" placeholder="0" value="4" />
          </Field>
        </CollapsibleContent>
      </FieldGroup>
      <CollapsibleTrigger
        class={buttonVariants({ variant: "outline", size: "icon" })}
        aria-label="Toggle all corners"
      >
        <Icon name="maximize" />
      </CollapsibleTrigger>
    </Collapsible>
  </CardContent>
</Card>
```

### File Tree

Use nested collapsibles to build a file tree.

```astro live
---
import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Icon } from "@/components/ui/icon"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Card class="mx-auto w-full max-w-64 gap-2" size="sm">
  <CardHeader>
    <Tabs defaultValue="explorer">
      <TabsList class="w-full">
        <TabsTrigger value="explorer">Explorer</TabsTrigger>
        <TabsTrigger value="outline">Outline</TabsTrigger>
      </TabsList>
    </Tabs>
  </CardHeader>
  <CardContent>
    <div class="flex flex-col gap-1">
      <Collapsible defaultOpen>
        <CollapsibleTrigger
          class={cn(
            buttonVariants({ variant: "ghost", size: "sm" }),
            "w-full justify-start transition-none"
          )}
        >
          <Icon name="chevron-right" />
          <Icon name="folder" />
          components
        </CollapsibleTrigger>
        <CollapsibleContent class="mt-1 ml-5">
          <div class="flex flex-col gap-1">
            <Collapsible>
              <CollapsibleTrigger
                class={cn(
                  buttonVariants({ variant: "ghost", size: "sm" }),
                  "w-full justify-start transition-none"
                )}
              >
                <Icon name="chevron-right" />
                <Icon name="folder" />
                ui
              </CollapsibleTrigger>
              <CollapsibleContent class="mt-1 ml-5">
                <div class="flex flex-col gap-1">
                  <Button
                    variant="link"
                    size="sm"
                    class="text-foreground w-full justify-start gap-2"
                  >
                    <Icon name="file" />
                    button.astro
                  </Button>
                  <Button
                    variant="link"
                    size="sm"
                    class="text-foreground w-full justify-start gap-2"
                  >
                    <Icon name="file" />
                    card.astro
                  </Button>
                </div>
              </CollapsibleContent>
            </Collapsible>
            <Button
              variant="link"
              size="sm"
              class="text-foreground w-full justify-start gap-2"
            >
              <Icon name="file" />
              login-form.astro
            </Button>
          </div>
        </CollapsibleContent>
      </Collapsible>
      <Button
        variant="link"
        size="sm"
        class="text-foreground w-full justify-start gap-2"
      >
        <Icon name="file" />
        app.astro
      </Button>
    </div>
  </CardContent>
</Card>
```

## Notes

- Use `Collapsible` for progressive disclosure inside an existing layout.
- Keep `CollapsibleTrigger` as the single control that opens and closes the
  content.
- For stacked FAQ patterns with multiple items, prefer
  [Accordion](/components/accordion/).

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/collapsible) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/collapsible/README.md) for more information on interactivity.