mf-tes2-js v4.0.2
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
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
. 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:
- 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!
š 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!