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
cssarrays
npm i maker-uiMaker 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 MyLayoutAll 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:
| Component | Package | Description |
|---|---|---|
| Accordion | @maker-ui/accordion | A fully customizable Accordion comoponent. |
| Announcement | @maker-ui/notifications | An announcement banner that can be dismissed. |
| Carousel | @maker-ui/gsap | A Greensock based carousel that accepts fully custom slide components. |
| CookieNotice | @maker-ui/notifications | A cookie notice that appears after a custom interval. |
| Dropdown | @maker-ui/popovers | A dropdown menu component. |
| Form | @maker-ui/forms | A wrapper for Formik that makes building grid-based forms with custom inputs even easier. |
| Generate | @maker-ui/generative | Wrapper components and utility functions that return randomly ordered or generated components. |
| Lightbox | @maker-ui/lightbox | A lightbox modal for individual triggers or a media gallery. |
| Modal | @maker-ui/modal | A full-screen accesible overlay component that can be triggered by a useState hook. |
| Parallax | @maker-ui/gsap | A Parallax background section. |
| Popover | @maker-ui/popovers | A simple popover component that is used to power the Dropdown and Tooltip components. |
| ScrollReveal | @maker-ui/gsap | Staggered viewport entrance animations. |
| Spinner | @maker-ui/loaders | A collection of SVG loading spinners. |
| TableOfContents | @maker-ui/toc | An interactive menu that scans for heading tags and creates on-page links. |
| Tabs | @maker-ui/tabs | A customizable tabs component. |
| Tooltip | @maker-ui/popovers | A popover that is triggered on hover or focus to show supplemental information. |
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.