01Surfaces
Mellow UI — animated React components with editorial aesthetics
A motion-first library
MMXXVI · Edition II
51 components · 7 templates
Components that move, quietly.
Motion-led primitives for builders who care about texture, timing, and the small theatre of an interface. Copy the source. Own it.
Next.js 15 · React 19motion/react · canvasNo package — just files
Move your cursor through the wordshadcn registry
Most interfaces shout. Mellow moves quietly — texture, timing, and the small theatre of a cursor crossing a surface. One command writes the source into your repo. Read it. Patch it. Make it yours.
- I.
Copy, don't install
Every component ships as a shadcn registry item. One command writes the source into your repo — you own the file the moment you read it.
- II.
Motion as language
Built on motion/react and raw canvas. Scroll, hover, and mount triggers — orchestrated, not decorative. Reduced motion respected without exception.
- III.
No version trap
There is no @mellow/core package to pin. No breaking change to migrate. The code is yours, the patches are yours, the future is yours.
Components, in rotation.
Four windows onto the library, each cycling live components — the same files you'd copy into your repo. Hover to hold one.
Finished templates.
Complete Next.js sites, each built around one gesture you'll remember. From $39, buy once, own the source.
01Seasonal brand
Hanami$39A sakura petal field that gusts from your cursor
- 01HanaminewSeasonal brand$39
- 02CuenewModern SaaS$49
- 03SablenewStudio portfolio$49
- 04MintnewFintech banking$49
- 05QuillAI SaaS landing$49
- 06RelayAI agent SaaS$49
- 07BureauProductized agency$49
- 08EmberBrand landing$49
An MCP, fluent in Mellow.
One line in your config and your agent can search this registry, read any component's props and source, and install it — without you leaving the prompt.
01Claude Code · mellow-ui
> I need a hero background that feels like fabric moving
⏺ mellow-ui · list_components({ query: "fabric" })
1 matchliquid-silk — Liquid Silk
⏺ mellow-ui · get_component({ name: "liquid-silk" })
props, aiPrompt, full source, demo
$ npx shadcn@latest add https://mellowui.com/r/liquid-silk.json
✓ components/mellow/liquid-silk.tsx added
Liquid Silk sits behind your hero now — it follows the theme ink.
claude mcp add mellow-ui -- npx -y mellow-ui-mcpOne command in your project, then restart Claude Code. No API keys — it reads the public registry.
Run one command.Keep the source.
One command writes the component into your codebase. No runtime, no dependency on us, no upgrade path to fear.