shadcn.io is an independent project built on shadcn/ui
A status line above the trigger reads Open or Closed. Toggle content shows a short note, and that line follows the same open state.
Use it when another control must open the same region. Several sections that open one at a time belong in an Accordion. In React, Base UI does not keep this value after a reload.
Installation
Anatomy
Usage
<div className="flex w-full max-w-lg flex-col gap-4">
<p className="text-muted-foreground text-sm">
Status: {isOpen ? "Open" : "Closed"}
</p>
<Collapsible onOpenChange={setIsOpen} open={isOpen}>
<CollapsibleTrigger className="font-medium text-sm underline-offset-4 hover:underline">
Toggle content
</CollapsibleTrigger>
<CollapsibleContent>
<div className="mt-2 text-muted-foreground text-sm">
This is a controlled collapsible component. The open state is
managed externally.
</div>
</CollapsibleContent>
</Collapsible>
</div>FAQ
How does this file wire the open state?
isOpen is state in the demo, starting false. The status line prints Open or Closed from it, and Collapsible is controlled with that same value.
Pass open and onOpenChange. The callback receives the new boolean, so this file hands it setIsOpen.
How do I make it start open?
Start the state at true. The status line follows that value on the first render.
Does Toggle content still open and close the panel?
Yes. The trigger asks the collapsible to change, the change handler writes the state, and the collapsible and the status line both read it.
How do I open it from a second button?
Set the state from that button. The collapsible opens because it reads the same value as the trigger.
API Reference
Collapsible
Sets onOpenChange={setIsOpen} and open={isOpen}. The rest is on the Collapsible page.
