Shadcn Collapsible

The shadcn collapsible is one trigger and one panel. Click the trigger and the region under it opens. Use it for extra details on a row, advanced settings, or a folder in a tree — anywhere the label is enough until they ask for more.

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>

open and onOpenChange take over the panel. Skip them and it runs uncontrolled with defaultOpen.

Composition

Basic

One trigger, one panel. The chevron rotates when it opens.

Settings Panel

A Button trigger reveals the extra Fields. The visible pair stays put.

File Tree

Nest collapsibles. Each folder keeps its own open — they do not close each other.

RTL

Wrap with DirectionProvider and dir="rtl". Copy and alignment follow the reading direction.

API

CollapsibleTrigger

CollapsibleContent

CollapsibleTrigger and CollapsibleContent take className. Height animation uses --radix-collapsible-content-height.

Keyboard

Notes

Each root is independent. For a list where only one panel should stay open, use Accordion.

With other components

Questions

Related