Swatchbook Mcp

A Storybook addon and MDX doc blocks for visualising DTCG design tokens.

Built on Terrazzo's parser. Your production build runs Terrazzo's CLI against the same DTCG source; swatchbook reads it too, inside Storybook.

If your stories already style with CSS variables, they pick up the toolbar's axis flips automatically. That's mostly what the tool does.

Documentation · unpunnyfuns.github.io/swatchbook Live Storybook · /storybook

Install

npm install -D @unpunnyfuns/swatchbook-addon

One package pulls the whole React surface: toolbar, preview decorator, MDX doc blocks, ThemeSwitcher, useToken(). See the Quickstart for configuration.

Packages

Most consumers only install the addon; the rest travel transitively. Each sub-package is publishable on its own for slice-only use (for example, the switcher in a Docusaurus navbar).

Development

pnpm workspaces + Turborepo. Node 24. ESM.

pnpm install
pnpm dev                           # apps/storybook on :6006
pnpm turbo run lint typecheck test build

Credits

Parses DTCG tokens through Terrazzo by the Terrazzo team. Its parser, resolver evaluation, and alias resolution are the foundation.

License

MIT © unpunnyfuns.