Build React apps with a responsive layout system powered by Emotion.

Maker UI helps you design accessible, responsive apps that can be customized in any way imaginable. Quickly deploy a production-ready layout so you can focus on creating content and adding new features to your project.

• Fully customizable CSS Grid-based desktop and mobile header layouts
• 10+ common page layouts
• Responsive navigation
• Accessible dropdown menus
• Skiplink and keyboard focus management
• Unlimited color modes
• Error boundaries and custom error reporting hooks
• JSX primitives that support responsive css arrays

npm i maker-ui

Maker UI uses a configuration object to build complex layouts in seconds. Your custom configuration determines how each layout should behave and appear.

See the documentation for more details on setting up your project.

At the root of your project or on a specific page, import and build with Maker UI's layout components:

import {
  Layout,
  Header,
  Navbar,
  MobileMenu,
  Content,
  Main,
  Sidebar,
  Footer,
} from 'maker-ui'

import { options, menu } from './config' // your custom configurations
import Logo from './Logo' // your logo component

// basic sidebar-content layout
const SidebarLayout = (props) => (
  <Layout options={options}>
    <Header>
      <Navbar logo={<Logo />} menu={menu} />
      <MobileMenu menu={menu} />
    </Header>
    <Content>
      <Main>{props.children}</Main>
      <Sidebar>Your custom sidebar component</Sidebar>
    </Content>
    <Footer>Your custom footer</Footer>
  </Layout>
)

export default MyLayout

All layout components and JSX primitives can be styled with the responsive css and breakpoints props.

/** Equivalent CSS:
 * 
 * color: red;
 * @media (min-width: 768px) {
 *    color: blue;
 * }
 * @media (min-width: 960px) {
 *    color: green;
 * }
}*/

<Div breakpoints={[768, 960]} css={{ color: ['red', 'blue', 'green'] }}>
  Hello world
</Div>

This example would set the div's default color to red and generate min-width media queries so the color is blue at 768px and green at 960px. Never write a media query again!

Maker UI ships a varity of optional packages for common components that you can use on your site. All packages are styled without opinions and buit with a11y best practices in mind:

You can also import @maker-ui/elements to bundle the most commonly used @maker-ui/accordion, @maker-ui/tabs, @maker-ui/popovers, and @maker-ui/modal.

Apache 2.0