Collapsible

A collapsible panel controlled by a button.

Installation


pnpm dlx shadcn@latest add @lumi-ui/collapsible

Basic Usage

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

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsiblePanel>
</Collapsible>

Anatomy

<Collapsible>
  <CollapsibleTrigger/>
  <CollapsiblePanel/>
</Collapsible>

Cookbook

Usage with Motion

File Tree

API Reference

Component	Description
`Collapsible`	Groups all parts of the collapsible. Renders a `<div>` element.
`CollapsibleTrigger`	A button that opens and closes the collapsible panel. Renders a `<button>` element.
`CollapsiblePanel`	A panel with the collapsible contents. Renders a `<div>` element.

CollapsiblePanel

Prop	Type	Default	Description
`animation`	`"css"` \| `"none"`	`"css"`	Controls default animation of the collapsible panel.

Usage with Motion

Base UI spreads its className (including transition styles) onto your custom component via the render prop. This causes both CSS and JS animations to run simultaneously, resulting in janky behavior.

Important

When using render with animation libraries like Motion, you can set animation="none" to reset default css transitions and prevent conflicts between CSS transitions and JavaScript animations.

Migration Guide

Trigger Composition (render prop)

Radix UI uses the asChild pattern to merge the trigger logic with a child element. Base UI uses the render prop for changing HTML tags or using custom triggers.

// Before:
<CollapsibleTrigger asChild>
  <Button>Open</Button>
</CollapsibleTrigger>
 
// After:
<CollapsibleTrigger render={<Button>Open</Button>} />

Warning

Switch to using the render prop instead of asChild.

Example

collapsible-demo.tsx

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
 
<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="outline">Open</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div>
      {/* Content */}
    </div>
  </CollapsibleContent>
</Collapsible>