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

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

Contributors