Docs › Components › Collapsible

Shadcn Collapsible

The shadcn/ui Collapsible toggles a single region of content open and closed from a trigger, styled with Tailwind CSS v4. Built on Base UI, it exposes the expanded state to assistive tech. Collapsibles reveal optional details across ShadcnStore blocks.

Key features

• One independent open/close region.
• Controlled or uncontrolled via open / defaultOpen.
• Keyboard operable trigger with exposed state.
• Animate the content with a CSS height variable.

Installation

npx shadcn@latest add collapsible

Usage

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

export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger render={<Button variant="ghost" />}>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
    </Collapsible>
  )
}

Controlled state

const [open, setOpen] = useState(false)

<Collapsible open={open} onOpenChange={setOpen}>…</Collapsible>

Accessibility

• The trigger exposes the expanded state; keep it a real button.
• Give the trigger a clear label describing what it reveals.
• Do not hide essential content that every user needs behind a collapsible.

When to use the Collapsible

Use a Collapsible for a single optional region: "show more" details, an expandable sidebar group, or advanced settings. For a set of sections where one opens at a time, use an Accordion. For peer views, use Tabs.

Used in these blocks

• FAQs: expandable answers.
• App shells: collapsible sidebar groups.
• Apps: advanced settings.

Related components

For multiple sections use an Accordion; the trigger is usually a Button; collapsibles often live inside a Card.

FAQ

What is the shadcn collapsible used for?

The Collapsible toggles a single region of content open and closed from a trigger, useful for optional details and expandable sections.

What is the difference between Collapsible and Accordion?

Collapsible is one independent open/close region. Accordion manages a set of items where opening one can close others.

How do I control the open state?

Pass open and onOpenChange to Collapsible, or use defaultOpen for uncontrolled state.

How do I animate the collapsible?

The content exposes a CSS height variable you can animate with a Tailwind transition.