Install 57 components — by agent or by hand.

Four things, and the installer assumes all of them. Get these wrong and the component lands but does not compile — that is the single most common failure, so it is worth thirty seconds now.

• React 18 or 19 — Every component is a client component and starts with "use client".
• Tailwind CSS — Styling is Tailwind utility classes. No CSS file ships with the component.
• A @/* path alias — Components import from @/lib/utils and @/hooks/*. Without the alias the imports fail.
• clsx + tailwind-merge — The cn() primitive depends on them. The installer prints the npm line for you.

If your tsconfig.json came from create-next-app, the alias is already there. Otherwise:

{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}

This is the path ReactOmega was built for. The registry ships an MCP server, so Claude or Cursor does not read these docs and guess — it queries a structured contract and writes the exact files. Add this once:

{
  "mcpServers": {
    "reactomega": {
      "command": "npx",
      "args": ["-y", "github:Edwson/ReactOmega", "reactomega-mcp"]
    }
  }
}

Put it in claude_desktop_config.json for Claude Desktop, in .mcp.json at your project root for Claude Code, or under Settings → MCP in Cursor. Restart the client afterwards. Nothing is installed globally — npx fetches the server on demand.

The server exposes three tools. Your agent picks; you rarely need to name them:

Why this beats pasting from docs: add_component resolves the dependency chain itself. Ask for a shader and it returns four files — the component, lib/utils.ts, hooks/use-prefers-reduced-motion.ts and hooks/use-shader.ts — because the shader needs the WebGL2 primitive, which needs the reduced-motion hook. An agent reading prose forgets the third file. The registry cannot.

Runs straight from GitHub. Nothing to install, nothing published to npm required.

npx -y github:Edwson/ReactOmega add refracted-glass magnetic

Browse first, filter by category:

npx -y github:Edwson/ReactOmega list
npx -y github:Edwson/ReactOmega list --category shader

Useful flags: --dry prints what it would write without touching disk, --cwd targets another directory, and --registry points at a local checkout or your own fork.

Every component is also a shadcn-compatible registry item, served over jsDelivr. Same files, your existing tool.

npx shadcn@latest add https://cdn.jsdelivr.net/gh/Edwson/ReactOmega@main/public/r/refracted-glass.json

Swap @main for a tag such as @v1.2.0 to pin an immutable version.

No tooling at all: open any component on the components page, copy the source from its registry item, and paste it in. You still need the primitives — the cn() helper, the reduced-motion hook, and use-shader.ts if it is one of the 12 shaders.

https://cdn.jsdelivr.net/gh/Edwson/ReactOmega@main/public/r/<name>.json

Whichever path you take, the layout is the same. Primitives are shared, so the second component is cheaper.

lib/utils.ts                         ← cn() · needs clsx + tailwind-merge
hooks/use-prefers-reduced-motion.ts  ← the accessibility contract
hooks/use-shader.ts                  ← only for shader components (raw WebGL2)
components/reactomega/<name>.tsx     ← the component itself

Then import it like any local file. Give a full-bleed component a sized parent — it fills its container, it does not invent a height:

import { RefractedGlass } from "@/components/reactomega/refracted-glass";

export default function Hero() {
  return (
    <div className="relative h-[70vh] overflow-hidden">
      <RefractedGlass tint="#c9d4ff" dispersion={1.2} />
    </div>
  );
}

Every prop is typed and documented inline with its default, so your editor tells you the options without a round trip to this page.