Installation

Every component page has an Installation section with the exact command for that piece. You can also copy from the Code tab. There is no npm install mellow-ui — the registry is the package.

From a project that already has shadcn initialized (components.json), add a component by URL:

Optional — register the catalogue once in components.json so you can use the @mellow alias:

{
  "registries": {
    "@mellow": "https://www.mellowui.com/r/{name}.json"
  }
}

Then: npx shadcn@latest add @mellow/encrypted-text

1. Open a component in the catalogue and switch to the Code tab.
2. Install any listed dependencies (often motion, sometimes gsap or others).
3. Paste the file at components/mellow/<name>.tsx (or wherever you keep UI).
4. Import and use — each file exports a named and default export.

import { EncryptedText } from "@/components/mellow/encrypted-text";

<EncryptedText text="Hello, you." />

Components expect CSS variables such as --ink, --ink-rgb, --background, --rule, --fog, and --mute. If you are not on the Mellow site theme, define those on :root (and your dark class) so colors stay consistent. Fonts use --font-serif, --font-sans, and --font-mono when present.