5.0.7 • Public • Published


Create the building blocks of your app with Mirrorful: a simple, open-source design system framework.

Slack | Website | NPM Package | Docs

Mirrorful is released under the MIT license. PRs welcome! git commit activity Mirrorful downloads Slack community channel Mirrorful Twitter

Mirrorful Dashboard

Read this in other languages: English language German language Swedish language Turkish language Spanish language Portuguese language Portuguese language

Mirrorful is a simple, open-source design system framework. Install Mirrorful to generate colors and other design tokens for your project. Then, import these tokens directly into your app.

  • Start new projects with a source of truth
  • Visually modify your theme
  • Generate colors
  • 🔜 Theme Templates
  • 🔜 Lightweight Headless Component Library
  • 🔜 Eslint rules
  • 🔜 Propagate tokens across projects
  • 🔜 Figma integration

And more...

🚀 Get started

Mirrorful is a NPM package intended to be installed as dev dependency.

npm install mirrorful --save-dev


yarn add mirrorful --dev


The following commands will start a local editor at localhost:5050.

yarn run mirrorful


npx mirrorful

💿 Export Formats

After configuring your theme in the editor, you can export it to be used by your app. We currently export to the following file types: .js, .ts, .css, .scss, .json. If you're using tailwind, we also export to common js to work nicely with your tailwind config.

Example: Using CSS Variables

.primary-button {
  background-color: var(--color-primary);

.primary-button:hover {
  background-color: var(--color-primary-hover);

Example: Using Javascript Constants

<button backgroundColor={{ Tokens.primary.base }}>Click here</button>

🤝 Component Library Agnostic

We strive to be component library agnostic. Whether you're using Material UI, Chakra UI, Tailwind, Ant Design, or even your in-house library, Mirrorful hooks right in.

⚠️ create-react-app may warn that you are trying to import from outside the src directory. We are working on a long-term solution, but for now, we would recommend making a copy of the .mirrorful folder in your src directory.

Check out our examples:

Looking for a specific example? Request one here!

📚 Documentation

Check out our documentation for more information.

❤️ Community & Support

🪞 Contributors


npm i mirrorful

DownloadsWeekly Downloads






Unpacked Size

14.9 MB

Total Files


Last publish


  • alexdanilowicz
  • teddarific