Collapsible

A single show/hide region with a spring height animation and rotating chevron. Controlled or uncontrolled; closed content stays in the DOM for SEO.

npx @kznlabs/labsui add collapsible

labsui/primitives

labsui/cli

labsui/icons

import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/ui/collapsible";export function Starred({ repos }: { repos: string[] }) {  return (    <Collapsible>      <CollapsibleTrigger>        Starred {repos.length} repositories      </CollapsibleTrigger>      <CollapsibleContent className="grid gap-2">        {repos.map((r) => (          <div key={r}>{r}</div>        ))}      </CollapsibleContent>    </Collapsible>  );}

<Collapsible>

One show/hide region. Controlled (open + onOpenChange) or uncontrolled (defaultOpen).

children*
ReactNode
CollapsibleTrigger and CollapsibleContent.
defaultOpendefault false
boolean
Open at first render (uncontrolled).
onOpenChange
(open: boolean) => void
Called when the trigger toggles it.
open
boolean
Controlled state; pair with onOpenChange.

Prop	Type	Default
`children*` `CollapsibleTrigger` and `CollapsibleContent`.	`ReactNode`	—
`defaultOpen` Open at first render (uncontrolled).	`boolean`	`false`
`onOpenChange` Called when the trigger toggles it.	`(open: boolean) => void`	—
`open` Controlled state; pair with `onOpenChange`.	`boolean`	—

<CollapsibleTrigger>

chevrondefault true
boolean
Show a rotating chevron after the label (default: true).

Prop	Type	Default
`chevron` Show a rotating chevron after the label (default: true).	`boolean`	`true`

Also accepts every <button> prop.

<CollapsibleContent>

Stays mounted when closed (inert, height 0) so content remains crawlable.

children*
ReactNode
Content that springs open; stays in the HTML while closed.

Prop	Type	Default
`children*` Content that springs open; stays in the HTML while closed.	`ReactNode`	—

* required. Every component also takes className.