Layout UI

Collapsible

A single show/hide panel built on Base UI Collapsible. Lower-level than Accordion; use when you need one independent collapsible section without the header/item structure.

Preview

@uselayout starred repos

@uselayout/app

Installation

bash
npx shadcn@latest add @layout/collapsible

Usage

tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

Examples

Sidebar section

Guidelines for AI agents

Use for sidebar nav sections, advanced filter panels, or repo-style expandable lists. Pair CollapsibleTrigger with asChild to use a Button or custom element as the toggle. Use open and onOpenChange for controlled mode.

Never

  • Neveruse Collapsible when you need multiple accordion-style sections; use Accordion
  • Neverrender CollapsibleContent without CollapsibleTrigger in the same Collapsible root
  • Neverhardcode the open/close animation; rely on data-[starting-style] and data-[ending-style] selectors

Tokens consumed

--layout-ring--layout-radius--layout-duration-base