@markov-design/brand-builder

A portable, Design.md-driven React component library. Wrap your app in one <BrandProvider> and 60+ accessible components re-skin themselves from a single brand file — the way you'd use Ant Design or Material UI, but with the entire look of the system swappable from one place (or even per-component).

• 60+ components across inputs, feedback, data display, navigation, overlays, layout, marketing, media and utilities.
• 47 built-in designs (glassmorphism, neobrutalism, cyberpunk, claymorphism, swiss, …) — switch the whole UI with one prop.
• Bring your own brand with a portable Design.md file (or plain tokens).
• Zero runtime CSS-in-JS — ships precompiled CSS plus CSS custom properties.
• React 18+, ESM + CJS, tree-shakeable, ships TypeScript types, and bundles its own icons — react / react-dom are the only (peer) dependencies.

Installation

npm install @markov-design/brand-builder

react and react-dom (>=18) are peer dependencies — any React app already has them. lucide-react is bundled in, so there's nothing else to install.

Quick start

Import the stylesheet once at the root of your app, then wrap your tree in BrandProvider:

import "@markov-design/brand-builder/styles.css";
import { BrandProvider, Button, Card } from "@markov-design/brand-builder";

export default function App() {
  return (
    <BrandProvider brandDesign="glassmorphism">
      <Card>
        <Button variant="primary">Get started</Button>
      </Card>
    </BrandProvider>
  );
}

Forgetting import "@markov-design/brand-builder/styles.css"; is the most common setup mistake — components render unstyled without it.

Theming

Globally — pick any built-in design (enumerate them with DESIGN_IDS):

import { BrandProvider, DESIGN_IDS } from "@markov-design/brand-builder";

<BrandProvider brandDesign="neobrutalism">{/* … */}</BrandProvider>

Per component — every component accepts a brandDesign prop that overrides the provider for that instance:

<Button brandDesign="cyberpunk">One-off theme</Button>

Your own brand — parse a portable Design.md and pass the result:

import { BrandProvider, parseDesignMd } from "@markov-design/brand-builder";

const brand = parseDesignMd(myDesignMarkdown);
<BrandProvider brandDesign={brand}>{/* … */}</BrandProvider>

Documentation

Full installation and usage guide — theming, the component catalog, custom Design.md tokens and the advanced API — lives on the Documentation page of the Markov Design site (/docs).

License

See the repository for license details.