Installation

One-time token setup, then install components by conversation, CLI, or copy-paste.

1. Install the tokens

Every moco component styles itself exclusively from the --moco-* CSS variables defined by the tokens item. Install it once:

Terminal

npx shadcn@latest add https://mocoui.site/r/tokens.json

Then import it in your root layout (or global stylesheet):

app/layout.tsx

import "@/components/moco/tokens.css";

2. Install components

Ask Claude (MCP)

Add the MCP server to your config, then describe what you need — Claude finds the component, writes the files, and wires the imports:

.mcp.json

{
  "mcpServers": {
    "moco": { "command": "npx", "args": ["-y", "moco-mcp"] }
  }
}

shadcn CLI

moco is a standard shadcn-format registry, so any item installs by URL:

Terminal

npx shadcn@latest add https://mocoui.site/r/compare.json

Copy-paste

Every component page shows the full source of each file with a copy button and its target path. Copy the .tsx + .css pair into components/moco/ and you are done.

Import paths

Components install to components/moco/*, so imports look like:

your-post.tsx

import { Compare } from "@/components/moco/compare";

The @/ alias is the standard shadcn / Next.js convention. If your project maps it differently, adjust the import — the files have no other expectations.

Framework notes

Next.js App Router — everything works out of the box. Interactive components are already marked "use client".
Vite / Remix / anything React 18+ — all components are plain React; view-transitions is the one item that assumes Next.js.

Peer dependencies

Rare, and listed per item on its page:

code needs shiki for syntax highlighting
math optionally pairs with katex

Everything else is dependency-free React.