Collapsible

Shows and hides a section of content from a trigger.

<Collapsible className="w-full max-w-sm">
  <Button slot="trigger" variant="quiet" size="sm">
    System requirements
    <ChevronDownIcon className="transition-transform duration-200 group-expanded/collapsible:rotate-180" />
  </Button>
  <CollapsiblePanel className="px-3 text-sm text-fg-muted">
    Details about system requirements go here. Describes the minimum and recommended hardware and software needed.
  </CollapsiblePanel>
</Collapsible>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/collapsible

Anatomy

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

<Collapsible>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsiblePanel>Content</CollapsiblePanel>
</Collapsible>

A collapsible carries no look of its own: CollapsibleTrigger is a bare button for custom layouts, and any Button with slot="trigger" works in its place. Style the open state from the root's group-expanded/collapsible variant. For a stack of headed sections, use Accordion.

import { Button } from "@/components/ui/button"
import { ChevronDownIcon } from "your-icon-library"

<Collapsible>
  <Button slot="trigger" variant="quiet">
    Show details
    <ChevronDownIcon className="transition-transform group-expanded/collapsible:rotate-180" />
  </Button>
  <CollapsiblePanel>Content</CollapsiblePanel>
</Collapsible>

Open state

Use defaultExpanded for uncontrolled state, or isExpanded with onExpandedChange to control it.

const [isExpanded, setExpanded] = React.useState(false)

<Collapsible isExpanded={isExpanded} onExpandedChange={setExpanded}>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsiblePanel>…</CollapsiblePanel>
</Collapsible>

Examples

Basic

Custom trigger

at Pool.connect (pg/lib/pool.js:45)
at PaymentsRepo.find (src/payments/repo.ts:18)

Controlled

Expanded: false

Default expanded

Details about system requirements go here. Describes the minimum and recommended hardware and software needed.

API Reference

Collapsible

A collapsible shows and hides a section of content from a trigger. It carries no look of its own: put any button in the trigger.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`Key`	`—`
	`boolean`	`—`
	`boolean`	`—`

CollapsibleTrigger

A CollapsibleTrigger toggles the panel. Any `Button` with `slot="trigger"` works in its place.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`boolean`	`—`

CollapsiblePanel

A CollapsiblePanel holds the content that shows and hides.

Prop	Type	Default
	`ReactNode`	`—`
	`ElementType`	`'label'`

Last updated on 9/14/2026