Shadcn Collapsible Components

Shadcn Collapsible Component

The Shadcn Collapsible is a single section of content that opens and closes with one trigger. It is the simplest disclosure pattern: a "show more" area, a file tree folder, a card that expands to reveal settings or a thread of replies under a comment. It keeps secondary content one click away without sending users to another page.

A nested file tree, comment threads that hide their replies and a card that minimizes to its header show how much a single open and closed state can do. The shadcn collapsible examples are written in React with shadcn/ui and Tailwind CSS, on a primitive that exists in both Radix UI and Base UI.

What is the Shadcn Collapsible Component?

A collapsible has three parts: a root that holds the open state, a trigger button and a content panel. Clicking the trigger, or pressing Enter or Space while it has focus, toggles the panel. The trigger gets aria-expanded and aria-controls, and both the trigger and the content expose data-state="open" or "closed", so you can rotate an icon or change colors with plain Tailwind classes. The primitive is unstyled, so the layout is entirely yours.

Use a collapsible for one independent section. When you have a list of sections that should work together, with arrow key navigation between headings and an option to keep only one open, use an Accordion. To switch between views that sit side by side, use Tabs, and for content that floats above the page instead of pushing it down, use a Popover.

Anatomy of the Shadcn Collapsible

8 Shadcn Collapsible Variants

Each collapsible variant listed here is previewed live at the top of this page, together with its source code and install command.

• Show more list: A title with a ghost toggle button, one item that is always visible and the rest of the list revealed on click.
• File tree: Nested folders that each open with their own collapsible, showing files and subfolders with indentation.
• With card: A card whose header toggles the body, for settings panels and dashboard widgets that can be minimized.
• Comments and replies: Comment threads that hide their replies behind a count button, plus a version that opens a reply form with an input.
• With dropdown menu: Collapsible groups inside a dropdown menu, so settings and help links expand in place without a submenu.
• Accordion style: A list of controlled collapsibles where opening one item closes the others, built without the Accordion component.
• Code: A "View code" trigger with an icon that reveals a code snippet, for docs and component previews.

How to Install the Shadcn Collapsible Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a collapsible variant by its name:

npx shadcn@latest add @shadcnuikit/collapsible1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Collapsible Component

Import the three parts from components/ui/collapsible. Keep the open state in React if you need to rotate an icon or react to changes.

"use client"

import { useState } from "react"
import { ChevronDownIcon } from "lucide-react"

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

export function OrderDetails() {
  const [open, setOpen] = useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen} className="space-y-2">
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-semibold">Order #1042</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" aria-label="Toggle details">
            <ChevronDownIcon
              className={open ? "rotate-180 transition-transform" : "transition-transform"}
            />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="rounded-md border p-4 text-sm">
        3 items · Shipped to Berlin · Delivered on March 12
      </CollapsibleContent>
    </Collapsible>
  )
}

Why Use the Shadcn Collapsible Component

• Minimal API: Three parts and one open state cover every show and hide pattern on this page.
• Accessible by default: ARIA attributes and keyboard activation come from the primitive, so the trigger works for every user.
• Unstyled and flexible: Trigger and content can be anything: a card header, a menu row, a folder name or a text link.
• Controlled or uncontrolled: Start with defaultOpen and switch to open when other parts of the UI need to know the state.
• Composable: Collapsibles nest inside cards, dropdown menus, sidebars and each other without conflicts.

Common Collapsible Use Cases

• File trees: Expandable folders in editors, file browsers and docs.
• Comment threads: Hide replies until the reader asks for them.
• Sidebar navigation: Menu groups that expand to show nested links.
• Code previews: A "View code" toggle under a live demo.
• Advanced settings: Optional form fields tucked below the essentials in a card or panel.
• Order and invoice details: Line items that expand under a summary row.

Customizing the Shadcn Collapsible

Style the open state with data-state selectors, for example rotating the chevron when the trigger is open, and pass any Tailwind classes to the content for spacing and borders. The content has no animation by default, so add one with the data-[state=open] and data-[state=closed] variants if you want a height or fade transition. Colors come from your theme variables; build a palette with the free Theme Generator.

This rotates the icon without any React state:

<CollapsibleTrigger className="group flex items-center gap-2">
  Advanced options
  <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
</CollapsibleTrigger>

Collapsible Accessibility and Keyboard Support

The collapsible follows the WAI-ARIA disclosure pattern. The trigger is a real button with aria-expanded, plus aria-controls pointing at the content while it is open, so screen readers announce whether the section is open. When the trigger shows only an icon, add a visually hidden label, as the variants on this page do with a sr-only "Toggle" span.

Collapsible Best Practices

• Make the trigger label describe what is hidden, not just "More".
• Show a clear indicator, like a chevron that rotates, so users know the section can open.
• Keep essential information outside the collapsible; hide only optional details.
• Use defaultOpen when most users need the content on first visit.
• Switch to an Accordion when you have several related sections that should behave as one list.
• Avoid deep nesting outside of tree views; more than two levels is hard to scan.

Components Related to Collapsible

Shadcn Collapsible FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.