build69
Sign inGet API key
build69  /  Components  /  Data Display  /  Collapsible

Collapsible

v1.0.1Updated 20 Jul 2026

Single expand / collapse region built on Radix Collapsible — simpler than the Accordion (which manages many items). The consumer supplies one trigger and one content region with a smooth height animation. Supports contro

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedcollapseexpanddisclosuretoggle+3

The default, out-of-the-box Collapsible.

Recommended for+14
  • ✓One-off show-more / show-less sections
  • ✓FAQ items
  • ✓Sidebar nav group toggles
  • ✓Revealing secondary detail under a header
Tags+6
collapseexpanddisclosuretoggleradixprimitivedefault
Features+4
  • Composition API: Collapsible / CollapsibleTrigger / CollapsibleContent
  • Controlled (open / onOpenChange) + uncontrolled
  • Smooth height animation (collapsible-down / collapsible-up)
  • Single region (simpler than Accordion)
  • data-slot attributes for styling
Not recommended for−2
  • ✕Many mutually-exclusive sections (use Accordion)
  • ✕Tabbed content (use Tabs)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Collapsible" })

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/data-display/collapsible';

<Collapsible>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
open

Controlled open state (Collapsible root)

boolean—
defaultOpen

Uncontrolled initial open state

boolean—
onOpenChange

Open-state change callback

(open: boolean) => void—
disabled

Disable the trigger

boolean—

Related

Platform docsAll componentsSource files