mirrorful
v6.1.15
Published
Simple, open-source design system infrastructure.
Downloads
615
Readme
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!