# Collapsible

- Page: <https://kznlabs.github.io/labsUI/components/collapsible>

## Collapsible (`collapsible`, component)

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

- Install: `npx @kznlabs/labsui add collapsible`
- Docs: <https://kznlabs.github.io/labsUI/components/collapsible>
- Brings: use-controllable-state, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Collapsible>`: One show/hide region. Controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
  - `children: ReactNode`: `CollapsibleTrigger` and `CollapsibleContent`.
  - `defaultOpen?: boolean` = `false`: Open at first render (uncontrolled).
  - `onOpenChange?: (open: boolean) => void`: Called when the trigger toggles it.
  - `open?: boolean`: Controlled state; pair with `onOpenChange`.
- `<CollapsibleTrigger>` (+ <button> props)
  - `chevron?: boolean` = `true`: Show a rotating chevron after the label (default: true).
- `<CollapsibleContent>`: Stays mounted when closed (inert, height 0) so content remains crawlable.
  - `children: ReactNode`: Content that springs open; stays in the HTML while closed.

### Usage

```tsx
<Collapsible><CollapsibleTrigger>Show more</CollapsibleTrigger><CollapsibleContent>…</CollapsibleContent></Collapsible>
```

### Example: starred.tsx

```tsx
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>
  );
}
```