Mirrorful NPM | npm.io

Read this in other languages:

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
Figma integration
🔜 Lightweight Headless Component Library
🔜 Eslint rules
🔜 Propagate tokens across projects

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

✨ Usage

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

npx mirrorful editor

yarn run mirrorful

📚 Documentation

Check out our documentation for more information.

🤝 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. If you're working with Vite, you can add a config that copies the .mirrorful dir to src. Check out the example vite.config.ts here.

Check out our examples:

Looking for a specific example? Request one here!

📚 Documentation

Check out our documentation for more information.

❤️ Community & Support

Slack - for live discussion with the community and the Mirrorful team.
GitHub Discussions - for help with building and deeper conversations about features.
GitHub Issues - for any bugs and errors you encounter using Mirrorful.
Twitter - stay up to date with the latest product updates.
Book a free, non-pressure pairing sessions with one of our teammates!
Showcase - to see the awesome projects our community has built on Mirrorful!