Introduction

Mellow UI is a catalogue of carefully made components for React — text effects, canvas backgrounds, buttons, galleries, and interactive pieces meant to give a page a distinctive gesture.

This is not a generic design system. You will not find a full set of form controls, data tables, or SaaS chrome here. The point is the memorable bit: the thing someone notices.

Every component is yours once installed. Pull it in with the shadcn CLI, or copy the source from the docs — there is no runtime package to pin, no theme provider required, no license wall on the code.

• Copy-paste first — source lives under registry/mellow and ships into your project as ordinary TSX.
• Prop-tuned — content and a few knobs first; defaults should look right untouched.
• Theme-aware — components read Mellow design tokens (--ink, --rule, etc.) so they flip with light and dark.
• Agent-ready — each page has a markdown twin, llms.txt, and an MCP server so assistants can search and install without leaving the prompt.

Built for React 19, Next.js App Router, TypeScript, Tailwind CSS v4, and motion/react. Install only the dependencies a given component lists — nothing pulls the whole catalogue.

• Prefer one strong gesture per viewport. Stacking many continuous animations can hurt UX more than it helps.
• Canvas and particle pieces respect prefers-reduced-motion — still test on a mid-range phone before shipping.
• Preview on the device your users actually have, not only the one you develop on.