Credits

Motivation#

This library is intended to help React Developers quickly prototype high quality applications apps with a flexible, strong typed layout system. Move from static Figma or Sketch designs to production-grade layouts without the all of the setup headaches.

• No more bloated UI libraries
• Array-based CSS-in-JS media queries
• Build with CSS variables, grid, and flex

The API is simple yet infinitely customizable, allowing you to recreate any app layout you might encounter on the web.

Shoutouts#

Credit is due to 3 awesome projects in the React ecosystem:

Emotion#

Maker UI has only one critical dependency: @emotion/react. We build on top of Emotion's jsx prop to power our custom JSX factory. Emotion is a performant and flexible CSS-in-JS library that fully supports SSR in addition to runtime styles.

React Spring#

This library uses pure CSS for almost every transition state, but in some cases we must gracefully mount and unmount components. The optional Popover, Modal, Lightbox, and Carousel components from @maker-ui/elements all use the amazing React Spring library.

Theme UI#

Maker UI is partly inspired by the innovations of Brent Jackson’s Theme UI. Theme UI introduced a responsive sx prop with array-based media queries that dramatically improves UI developer experience. Not having to write Sass mixins or a million @media screen and (min-width: ...) rules is an incredible boost to responsive website development.