gravitynotworking / mirrorful

Create the building blocks of your app

Create the building blocks of your app with Mirrorful: a simple, open-source design system framework.

Slack | Website | NPM Package | Docs

Read this in other languages:

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
• Figma integration
• Theme Templates
• 🔜 Copilot for Product Design
• 🔜 Lightweight Headless Component Library
• 🔜 Eslint rules
• 🔜 Propagate tokens across projects

And more...

🎨 Why should I use Mirrorful?

Design systems are the building blocks of your app, but many projects don't adopt them until it's too late because they are hard to set up correctly. Mirrorful gets you set up for a basic design system in minutes while leaving flexibility down the line for customizations. It's lightweight and dead simple.

We're on a mission to help your project be as beautiful as possible. The bar for high-quality design is getting higher. We want to help everyone add simple design tokens to new (and existing!) projects.

Simple design systems also speed up development — even early-stage projects! One report suggests it's 47% faster to build a simple form using a design system. It's useful for engineers, designers, and especially your customers if there isn't a random color for each button in your app.

🚀 Get started

Mirrorful is a NPM package intended to be installed as dev dependency.

npm i -D mirrorful
# or
yarn add -D mirrorful

✨ Usage

The following command will start a local editor at localhost:5050.

npx mirrorful editor
# or
yarn run mirrorful editor

📚 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!

❤️ 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.
• Showcase - to see the awesome projects our community has built on Mirrorful!

🏘 Open-source vs. paid

This repo is entirely MIT licensed.

We are working hard to make Mirrorful more extensive. Need any integrations or want a new feature? Feel free to create an issue or contribute directly to the repository. (The first draft of this README was made by a contributor!)

🛡 Security

Mirrorful takes security issues very seriously. If you have any concerns about Mirrorful or believe you have uncovered a vulnerability, please get in touch via the e-mail address [email protected]. In the message, try to provide a description of the issue and ideally a way of reproducing it. The team will get back to you immediately.

⭐ Stay Up to Date

There are a lot of new features coming very frequently. Star this repo to stay up to date.

🛠️ Contributing

Whether it's big or small, we love contributions. The maintainers of this repo have built open-source projects before and love it. Welcome!

To run Mirrorful locally, check out the instructions here

Not sure where to get started? You can:

• Book a free, non-pressure pairing sessions with one of our teammates!

• Join our Slack and ask us any questions there.

No matter the PR, all the Github avatars of contributors will be added to the Mirrorful README with their permission.

🪞 Contributors

🌎 Translations

Mirrorful is currently available in English, German 🇩🇪, Swedish 🇸🇪, Turkish 🇹🇷, Spanish 🇪🇸, and other languages. Help us translate our documentation and UI to your language.

You can find all the info in this issue.