Muka UI

A multi-brand, multi-theme React design system for mobile-first web apps, built so that coding agents can consume it accurately. Five brands × light and dark = ten themes, one component library, no per-brand component code.

• Storybook: https://muka.kornmann.com — component APIs, Playgrounds, token docs
• npm: @revikornmann/muka-ui (public — no registry config or auth token)

Under active development. Releases can bring breaking changes — visual shifts, changed component APIs, altered token values. Pin a version and re-test your app when you upgrade.

Use it in your app

Five steps from an empty repo to a branded, designed, working app. Each one is a skill or a single command.

npm install @revikornmann/muka-ui
npx muka-ui install-skill        # make the Muka skills discoverable

Then, in Claude Code or Cursor:

| # | Step | How | |---|---|---| | 1 | Create your repo | Any React app with a bundler that imports CSS | | 2 | Install and wire up Muka UI | /setup-muka [brand] | | 3 | Add your own brand, overriding Muka's brand layer | /add-brand acme | | 4 | Design against the Muka UI Figma Library | /push-to-figma to publish your brand to Figma | | 5 | Hand the Figma link to your agent | /figma-to-code <figma-url> |

And voilà — a branded app built from a component library you didn't write, that follows brand changes centrally and updates itself on each release.

Full guide: docs/consumers/README.md.

Skills shipped in the package

| Skill | What it does | |---|---| | /setup-muka | Install the package, wire up styles and fonts, add the auto-update workflow, register as a consumer | | /add-brand | Create a custom brand in your repo that overrides Muka's brand layer | | /figma-to-code | Turn a Figma link into a screen composed from Muka components and tokens | | /push-to-figma | Publish your brand tokens to Figma as variables, so designers design in your brand | | /pull-from-figma | Bring a designer's brand edits in Figma back into your token files |

npx muka-ui install-skill --list prints these from the installed version.

/push-to-figma and /pull-from-figma read and write Figma variables, which the REST API cannot do, so they drive Figma Console MCP — an open-source (MIT) MCP server by Southleft. It needs a one-time setup: docs/consumers/figma-console-mcp.md. The other three skills don't require it.

Reference: docs/consumers/skills.md.

Installing by hand

import '@revikornmann/muka-ui/styles';                 // muka-light, fonts included
import { Button, Card, Input } from '@revikornmann/muka-ui';

Other brands load a different stylesheet — muka-dark, wireframe-light, and wireframe-dark are pre-bundled; grip, fscl, and bouwplan compose from base.css + tokens-<brand>-<mode>.css + fonts-<brand>.css. Brand and theme are selected by which stylesheet loads, not by data attributes. See docs/consumers/setup-instructions.md.

How the token system works

Four layers, each resolving through the one below:

| Layer | Purpose | Example | |---|---|---| | T1 Primitives | Raw ramps, never used directly | color.indigo.9, spacing.4 | | T2 Alias | Brand-specific references — the layer a brand swaps | alias.color.accent.default | | T3 Semantics | Design intent | color.surface.level1, color.action.default | | T4 Components | Component-specific | button.color.primary.background.default |

Components read T3 and T4 only. Swapping T2 cascades a whole new visual identity through the library, which is what makes both the five shipped brands and your own brand possible without touching component code.

Details: tokens/README.md and the Design Tokens section of the Storybook.

Contribute to Muka itself

npm install
npm run build:tokens   # required before Storybook — postinstall does not do it
npm run dev            # Storybook on port 6006

DEVELOPMENT.md is the maintainer guide: commands, token layers, component structure, CI, and releases. Maintainer skills live in .claude/skills/ and are not shipped to consumers.

License

MIT.

Created by Revi Körnmann · LinkedIn · kornmann.com