Editorial React components · installed by asking · MIT

Components for people who write.

Editorial React components for technical writing: scrollytelling, margin notes, sparklines, annotated code. No package to install. Tell Claude what you need and the files land in your repo.

Get started Browse components

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

shreya@mac — claude

This is real. Add the moco MCP server and ask. Set it up

Every component, live on this page

Drag, scroll, and press things. Each caption links to install paths and full source.

draftfinal

before

after

compareBefore/after clip-path wipe with pointer, keyboard, and slider-role support.

Latency trended down over the quarter, error rate spiked once , and cache hit rate sits at 82%.

sparkServer-safe inline SVG sparklines and proportion bars that sit on the text baseline.

Suppose requests per day2,000 requests a day hit the same prompt — that is $2,520 a month.

scrubTangle-style inline number scrubber: drag the variable itself, with a compact range input for pointer and keyboard access.

greet.js

function greet(name) {
  return "Hello, " + name + "!";
}

counter.ts

let count = 0;

export const inc = () => ++count;
export const get = () => count;

codeShiki-highlighted code windows: tabbed snippets with crossfade, and an annotated walkthrough with bidirectional linked highlighting.

step 1

First: the request arrives.

1 / 3

stepperRender-prop step sequencer with play/pause that auto-pauses off-screen and under reduced motion.

Show the math A = P(1 + r)ⁿ Compound growth: the final amount is the start times the rate, applied once per period. After one period: A₁ = P(1 + r) . Each subsequent period multiplies by (1 + r) again, so after n periods the factors stack: A = P(1 + r)ⁿ .

mathDisplay equation with a plain-English restatement and a 'show the math' derivation disclosure. Children are typically KaTeX/MathML output: katex is an optional peer, not imported here.

request

Clientbrowser

tls

EdgeTerminates TLS, caches static assets

Originapp server

failure

Queue

Dead letter

(unused)

Retries stop after the third attempt.

retry path

Every label here is selectable text.

hot pathfailureoptional

diagramHTML/CSS block diagrams: rows, blocks with variants and tooltips, diamonds, brackets, notes, and a legend. Real DOM: selectable, screen-reader reachable, reflows.

Margin notes number themselves in document orderThis is a margin note. On wide screens it sits in the right gutter; on narrow ones it becomes this tap-to-expand disclosure.and a term reveals its definition without leaving the sentence.

A second noteCounters need no registration — this one is “2” automatically. keeps counting on its own.

notesTufte-style numbered margin notes (CSS-counter ordered, tap-to-expand below 1280px) and dotted-underline term popovers with viewport-edge flip.

Latency falls with cache depth. Each bar is the median of 1,000 runs against the same prefix.

**The short TTL wins.** Steady traffic keeps the cache warm, so the cheaper write premium dominates.
Strategy	$/month	vs. baseline
No caching	$1,284	1.00×
5-minute TTL	$212	6.06×
1-hour TTL	$318	4.04×
Best	$212	6.06×

figureFigure plate with run-in caption, plus an editorial table with small-caps heads and hairline rules.

coverDeterministic FNV-1a-seeded generative SVG cover art in three variants: curves, blocks, bars.

View all components

Install it by asking

The MCP server is the short path. The shadcn CLI and plain copy-paste land the exact same files if you would rather.

Add the server to your MCP config, then ask for what you need. Claude writes the files into your repo.

.mcp.json

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

moco is a standard shadcn-format registry. Add any item by URL.

Terminal

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

Every component is a .tsx and .css pair with full source on its page. Take the files. They're yours.

components/moco/

components/moco/compare.tsx
components/moco/compare.css

The boring parts, done

Small, sharp components. Plain React, plain CSS, nothing to eject from.

You own the code

No package to install. Components land as .tsx and .css files in your repo. Edit them like anything else you wrote.

Claude installs it

moco ships an MCP server. Describe what you need and the component shows up in your repo, imports wired.

Works with shadcn

A standard shadcn-format registry. npx shadcn add works with every item, no custom tooling.

Accessible by default

ARIA roles, keyboard support, and prefers-reduced-motion are handled inside every component.