Mirrorful UI is a free, customizable, production-ready React component library built by the team at Magic Patterns.

Magic Patterns | Community Slack

Features

• Easily Customizable — production-ready, customizable React components
• Eslint Rules — detect hard-coded color strings throughout your project and help you convert them to the Mirrorful theme.

Installation

You can install the @mirrorful package and its peer dependencies.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @radix-ui/react-popover classnames dayzed react-transition-group

Generating Custom UI with Magic Patterns

If you are interested in learning more about generating custom UI from your design system, feel free to book a meeting with us:

Join our community of designers and engineers!

Join our Slack community of frontend engineers and designers.

• Slack — join our growing community!
• Issues — report any bugs you encounter using Mirrorful UI
• YouTube — watch content about coding and design systems.

Testimonials

“As a CTO, I've seen our UI development 5x, and collaboration with designers is now a seamless, integrated experience. Mirrorful is not just a component library; it's the catalyst that streamlines building out UI.” — George Fang, CTO of Canopy

"Mirrorful Cloud is an essential part of my design toolkit. It has bridged the gap between my designs and our engineering team. Saved us countless hours." — Zach Zimbler, Founder of Swishjam

"It translates my designs into workable code with such precision, it's like having an additional team member who speaks both design and engineering fluently. I can't imagine going back to our old way of working.” — Brandon Strittmatter, Founder of Outerbase

Acknowledgements

Thanks to all our contributors!