Collapsible

Order #4189

Status Shipped

---
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

npx shadcn@latest add @fulldev/collapsible

Usage

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

<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:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Default Open

Use defaultOpen to render a collapsible expanded on first load.

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

Examples

Basic

---
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.

Radius

Set the corner radius of the element.

---
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.

---
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.

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search