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.


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


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.