Showcase

The icon swaps that show up most in real shadcn/ui apps, rebuilt as morphs with the core library alone: one MorphIcon component rendering inline SVG. Pick a library, tune the physics, copy the component in your framework.

Why this path: Inline SVG straight from icon data, with an SSR-exact first paint and accessibility built in. This is the default way to ship a morph, and the lightest.
What it weighs: 6.6 KB gzip for the core, about 8 KB with a framework binding. Zero runtime dependencies, and subpath exports so you only pay for what you import.
The tradeoff: Icons must be stroke-centerline data: Lucide, Tabler, Heroicons outline, Iconoir. Fill-drawn glyphs have no centerline to morph, so they are rejected up front.

Copy to clipboard

The most repeated swap in real apps: Copy settles into Check.

npm i morphicons

Password visibility

Eye to EyeOff on the input's trailing button.

Theme toggle

Sun to Moon in one slot: no double SVG, no CSS swap.

Player controls

Play and pause, plus mute on the same cluster.

ambient-01.wav3:42

Inline validation

The trailing icon tracks the field: Check when valid, X when not.

File tree

Folders morph open; the disclosure chevron stays CSS.

button.tsx
input.tsx
toggle.tsx