Morph

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

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.