js-mir-test v4.0.8
Mirrorful is simple, open-source design system infrastructure. 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
or
yarn add mirrorful --dev
β¨ Usage
The following commands will start a local editor at localhost:5050
.
yarn run mirrorful
or
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
Using CSS Variables
Example:
.primary-button {
background-color: var(--color-primary);
}
.primary-button:hover {
background-color: var(--color-primary-hover);
}
Using Javascript Constants
Example:
<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:
- Mirrorful π€ Tailwind CSS (and Next)
- Mirrorful π€ Chakra UI
- Mirrorful π€ Basic Create React App
- Mirrorful π€ Basic Nuxt 3 App
Looking for a specific example? Request one here!
β€οΈ 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. Share your memes!
- Book a free, non-pressure pairing sessions with one of our teammates!
πͺ Contributors
π Translations
Mirrorful is currently available in English, German π©πͺ and Swedish πΈπͺ. Help us translate our documentation and UI to your language!
You can find all the info in this issue.
π Documentation
Check out our documentation for more information.