Create the building blocks of your app with Mirrorful: a simple, open-source design system framework.
Slack | Website | NPM Package | Docs
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
or
yarn add mirrorful --dev
✨ Usage
The following command will start a local editor at localhost:5050
.
npx mirrorful editor
or
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:
- Mirrorful
🤝 Tailwind CSS (and Next) - Mirrorful
🤝 Chakra UI - Mirrorful
🤝 Basic Create React App - Mirrorful
🤝 Basic Nuxt 3 App - Mirrorful
🤝 SvelteKit - Mirrorful
🤝 Bootstrap (and Next) - Mirrorful
🤝 styled-components
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!