# Morph (/docs/morph)

A size-stable animated content swap for icons, labels, and status changes.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/morph.json
```

## Usage

```tsx
import { Morph } from "@/components/ui/morph";

<Morph
  activeKey={copied ? "done" : "idle"}
  items={{ idle: <Copy />, done: <Check /> }}
/>
```

## API

**Main export:** `Morph`

Swaps icons or text with an animation. Every item shares one grid cell sized to the largest, so
the surrounding control never resizes during a swap. Under reduced motion the swap is instant.

With a single item, Morph skips the hidden sizing copy, so the content appears once in the DOM
and to assistive technology.

`morphVariants` exports the `initial` / `animate` / `exit` poses for content that has to stay
mounted while hidden, such as Action Button's icon-only pending label, which still names the
button. It then leaves and returns with the same motion as a keyed swap.