Collapsible

Shows and hides a section of content.

@alex starred 3 repositories

@radix-ui/primitives

<Collapsible>  <div>    @alex starred 3 repositories    <CollapsibleTrigger      render={<Button aria-label="Toggle" size="icon-sm" variant="ghost" />}    >      <HugeiconsIcon icon={UnfoldMoreIcon} />    </CollapsibleTrigger>  </div>  <Item size="sm" variant="outline">    …  </Item>  <CollapsibleContent>    <Item size="sm" variant="outline">      …    </Item>  </CollapsibleContent></Collapsible>

Installation

$ npx shadcn@latest add @constella/collapsible

Usage

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

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

Composition

Collapsible├── CollapsibleTrigger└── CollapsibleContent

Nested

Collapsibles nest, for a tree. Each folder's CollapsibleTrigger carries data-panel-open while it's open, so its chevron can turn.

app-sidebar.tsx

package.json

<Collapsible defaultOpen>  <CollapsibleTrigger>components</CollapsibleTrigger>  <CollapsibleContent>    <Collapsible>      <CollapsibleTrigger>primitives</CollapsibleTrigger>      <CollapsibleContent>…</CollapsibleContent>    </Collapsible>  </CollapsibleContent></Collapsible>

Controlled

Use open and onOpenChange to hold the state yourself, here to swap the trigger's label.

Order #4189

const [open, setOpen] = useState(false);
<Collapsible onOpenChange={setOpen} open={open}>  <CollapsibleTrigger>    <SwapText>{open ? "Hide details" : "Show details"}</SwapText>  </CollapsibleTrigger>  <CollapsibleContent>…</CollapsibleContent></Collapsible>;

Disabled

Add disabled to Collapsible so its trigger does nothing.

Archived repositories

<Collapsible disabled>…</Collapsible>

API Reference

Part	Adds
`CollapsibleContent`	Grows to its height and fades in as it opens, and shuts a little faster; takes `sx`

For the rest, see Base UI Collapsible.