test-mf-js

Create the building blocks of your app with simple, open-source design system infrastructure.

Slack | Website | NPM Package | Docs

Read this in other languages:

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.