# Collapsible

> "Show 4 more" that opens in place: the hidden part eases open through a blur while the button's words morph to "Show less".

"Show more" buttons usually snap the rest of a list in and keep the same words. Here the hidden part eases open and its content rises out of a blur, while the button's label morphs ("Show 4 more" → "Show less") and its chevron turns. Put the button above for details, below for lists.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/collapsible.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `accordion`, `ui-interaction-motion`, `text-morph`
- Docs and live preview: https://hairlineui.com/ui/collapsible
- Registry item (source): https://hairlineui.com/r/collapsible.json

## Usage

```tsx
import { Collapsible } from "@/components/ui/collapsible";

<Collapsible labels={{ closed: "Show 4 more", open: "Show less" }}>
  {rest.map((row) => <Row key={row.id} {...row} />)}
</Collapsible>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | – | The hidden part. |
| `labels` | `{ closed, open }` | `{ "Show more", "Show less" }` | Button words. |
| `open / defaultOpen / onOpenChange` | `boolean / (open) => void` | – | State. |
| `placement` | `"top" \| "bottom"` | `"bottom"` | Button above or below. |

## States

- **open**: Height eases (420ms); the label morphs; the chevron turns.
- **close**: The reverse.

## What it handles

The button's words should change with the state; most collapsibles leave "Show more" on screen after it has shown more.

- **Morphing label**: TextMorph between your closed and open words.
- **Same fold as the accordion**: Height by grid rows, content through a blur.
- **Either side**: placement="top" or "bottom".
- **Accessible**: aria-expanded, aria-controls, folded content inert.

## Replaces

show more button, disclosure

## Where it fits

- **Long lists**: The first five, then "Show 12 more".
- **Descriptions**: A clamp that opens to the full text.
- **Advanced settings**: Rarely used fields folded away.
- **Changelogs**: Older entries under one button.

## Notes

- Installs accordion for the shared fold and chevron.
- Reduced motion: opens in place.

License: MIT (https://hairlineui.com/license#components)