Documentation menu

Introduction

moco is a copy-source library of editorial React components — built for technical essays and blogs, not dashboards.

Most component libraries are built for products: forms, tables, modals. moco is built for writing — scrollytelling stages, margin notes, inline sparklines, before/after compares, block diagrams, code walkthroughs. Things that make a long technical read feel considered.

Philosophy

  • You own the code. There is no npm package to depend on. Every component is a .tsx + .css pair that lands in your repo. Edit it, fork it, delete half of it — it is your code from the moment it arrives.
  • Editorial typography first. Components are designed to sit inside prose: sparklines align to the text baseline, notes live in the margin, numbers count up without shifting layout.
  • The boring parts are done. ARIA roles, keyboard support, focus management, and prefers-reduced-motion are handled inside every component.
  • Nothing to eject from. Plain React and plain CSS variables. No styling framework, no runtime dependency, no lock-in.

What’s in the box

20 registry items: interactive figures (compare, scrolly, stepper, zoom), inline elements (countup, scrub, spark, notes), structure and navigation (island, rail, palette), visual pieces (diagram, cover, dotgrid, figure, math, code), plus utilities (hooks, view-transitions) and the tokens theme contract that styles them all.

Three ways in

  • Ask Claude. moco ships an MCP server — describe what you need and the component is installed for you.
  • shadcn CLI. The registry is standard shadcn format — npx shadcn add works with every item. See Installation.
  • Copy-paste. Full source with copy buttons on every component page.