moco

20 open-source components · MCP-native

Editorial components for React

Copy-source components for technical essays and blogs — scrollytelling, margin notes, sparklines, diagrams. Real typography, ARIA and reduced motion built in. The source lands in your repo.

Get startedBrowse components

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

Install it your way

Three paths to the same files — pick whichever fits your flow.

Add the server to your MCP config, then describe what you need — Claude installs the component into your repo.

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

See it live

Every demo below is the real component, running on this page. Drag, scroll, and press things.

draftfinal
before
after
compareBefore/after wipe — drag the seam, or use the arrow keys.

Uncached, you pay $1,285 a month across 42k requests — and 97.4% of them hit the same 12,500-token prefix.

countupNumbers that count up when they scroll into view.

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

sparkServer-rendered sparklines that sit on the text baseline.

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

scrubTangle-style inline numbers — drag the variable itself.
step 1

First: the request arrives.

1 / 3
stepperRender-prop step sequencer with play/pause.
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
diagramBlock diagrams in real DOM — no canvas, no images.

Built for people who write

Small, sharp components with the boring parts done properly.

Copy-source

No package to install. Components land as .tsx + .css files in your repo — you own the code and edit it freely.

MCP-native

moco ships an MCP server. Ask Claude for a component and it finds it, installs it, and wires the imports for you.

shadcn-compatible registry

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

Accessibility built in

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

Light & dark tokens

One --moco-* token contract themes the whole library. Override a variable to retheme everything at once.

Zero lock-in

Plain React and plain CSS. No runtime dependency, no styling framework, nothing to eject from.

How it works

From zero to a component in your repo, in one conversation.

Add the MCP server

One entry in your MCP config — no install step.

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

Ask for what you need

Describe the outcome, not the component name.

"add a before/after slider to my post"

The source lands in your repo

A .tsx + .css pair, imports wired. Edit it like your own code — it is.

components/moco/compare.tsx

20 components

The full index — every item links to a live demo, install paths, and source.

code

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

codeshikisyntax-highlighting

compare

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

figureinteractiveslider

countup

Scroll-triggered number count-up with reserved width (no layout shift), built-in Intl formatters, and reduced-motion instant-set.

numberanimationscroll

cover

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

generativesvgcover

diagram

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

diagramlayoutaccessibility

dotgrid

Full-viewport canvas dot grid that drifts toward the cursor; pauses when the tab is hidden, off under reduced motion.

canvasbackgroundmotion

figure

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

figurecaptiontable

hooks

Scroll and motion hooks: useReducedMotion, useScrollspy, useReadProgress, useInView, plus smoothScrollTo.

hooksscrollmotion

island

Morphing sticky header for long reads: progress ring, scrollspy section, section menu, and a Read-next end phase.

navigationheaderscrollspy

math

Display 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.

mathprosedisclosure

notes

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

prosesidenotetooltip

palette

Cmd-K fuzzy command palette with subsequence matching, character highlighting, focus trap, and on-page section jumps.

command-palettesearchkeyboard

rail

Left-edge section minimap: one tick per heading, active-section highlight, labels on hover. Hidden below 1280px.

navigationscrollspytoc

scrolly

Scrollytelling stage: a pinned figure that updates as prose steps scroll past, unpinning below 1024px.

figurescrollytellinglayout

scrub

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

numberinputdrag

spark

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

chartsparklinesvg

stepper

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

figureinteractiveanimation

tokens

The moco token contract: warm-paper light theme + warm-dark theme, lime accent, four font slots. Import once; every moco component styles itself from these variables.

themetokenssetup

view-transitions

Cross-fade View Transitions for Next.js App Router route changes, plus a no-js flag remover.

navigationanimationnext

zoom

Lightbox affordance for figures — Esc, click-outside, focus restore, and scroll lock included.

lightboxfiguredialog