Getting Started
To begin using Maker UI, install the library from npm:
npm i maker-ui# oryarn add maker-ui
The core library includes layout components as well as basic primitives and a JSX runtime that you can use to build your page designs.
@maker-ui/primitives
Create a Basic Layout#
In a new file, create a layout component that will wrap your application:
1import * as React from 'react'2import {3 Layout,4 Header,5 Navbar,6 MobileMenu,7 Content,8 Main,9 Footer,10} from 'maker-ui'1112export const MyLayout = ({ children }) => {13 return (14 <Layout>15 <Header>16 <Navbar />17 <MobileMenu />18 </Header>19 <Content>20 <Main>{children}</Main>21 </Content>22 <Footer>Footer Copyright</Footer>23 </Layout>24 )25}
The JSX from above outputs a semantically structured DOM tree. This example creates a single-column page layout that supports mobile navigation right out of the box.
With the Layout API, you can quickly create layout skeletons for sidebars, collapsible side navigation, and much more.
Customize Maker UI Options#
You can tell your app layout how to look and feel on desktop and mobile by supplying a MakerUIOptions
configuration object:
1import * as React from 'react'2import {3 Layout,4 Header,5 Navbar,6 MobileMenu,7 Content,8 Main,9 Footer,10 MakerUIOptions, // For TypeScript users11} from 'maker-ui'1213const options: MakerUIOptions = {14 header: {15 breakpoint: 1080,16 maxWidth: 960,17 navType: 'center',18 mobileNavType: 'basic',19 sticky: true,20 stickyOnMobile: false,21 },22}2324export const MyLayout = ({ children }) => {25 return (26 <Layout options={options}>27 <Header>28 <Navbar />29 <MobileMenu />30 </Header>31 <Content>32 <Main>{children}</Main>33 </Content>34 <Footer>Footer Copyright</Footer>35 </Layout>36 )37}
Starting on Line 13, we create a new MakerUIOptions
object and add a few settings for the header.
On Lines 15 and 16, we tell our header to switch from desktop mode to its mobile layout at 1080px
. The inner contents of our navbar should never exceed a max-width of 960px
.
On Lines 17 and 18, we choose from 12 pre-built CSS grid layouts to dictate how our nav will look on desktop and mobile. We can always customize the exact behavior of these layouts later on.
Lastly, on Lines 19 and 20, we specify that we want our header to use sticky positioning on desktop and a relative position on mobile.
With the options configuration object, you can control 50+ settings that tell your layout how to behave. Use MakerUIOptions
to set color modes, handle error boundaries, configure dropdown menus, and much more.
For a complete list of layout settings, check out the Maker UI Options guide.
Add a Logo and Menu#
Now we can import a custom Logo component and create our header navigation menu.
1import * as React from 'react'2import {3 Layout,4 Header,5 Navbar,6 MobileMenu,7 Content,8 Main,9 Footer,10 MakerUIOptions,11 MakerMenu, // For TypeScript users12} from 'maker-ui'1314// Your custom logo component15import { Logo } from './Logo'1617const options: MakerUIOptions = {18 header: {19 breakpoint: 1080,20 maxWidth: 960,21 navType: 'center',22 mobileNavType: 'basic',23 sticky: true,24 stickyOnMobile: false,25 },26}2728// An array of menu items29const menu: MakerMenu = [30 { label: 'Home', path: '/' },31 { label: 'About', path: '/about' },32 { label: 'Contact', path: '/contact' },33 { label: 'GitHub', path: 'https://github.com', newTab: true },34]3536export const MyLayout = ({ children }) => {37 return (38 <Layout options={options}>39 <Header>40 <Navbar logo={<Logo />} menu={menu} />41 <MobileMenu menu={menu} />42 </Header>43 <Content>44 <Main>{children}</Main>45 </Content>46 <Footer>Footer Copyright</Footer>47 </Layout>48 )49}
Maker UI will add your custom logo to the navbar and create accessible desktop and mobile menus for you.
The MakerMenu type is used by all Maker UI components that handle navigation menus. It supports a variety of common conventions including nested submenus, custom class selectors, new tab support, and leading icons.
Add Custom Styles#
It's time to add some styles to our responsive layout skeleton.
All Maker UI layout components accept the css
prop (covered here). However, adding too many styles directly to the layout tree can quickly turn our file into a mess of CSS-in-JS.
To address this, Maker UI's root <Layout>
component accepts a styles
prop where we can add global style that are applied to the entire document, just like a regular CSS stylesheet.
styles
prop fully supports responsive arrays. This is a great place for:- CSS resets
- Global or default CSS rules
- Shared or utility class styles
- Layout component styles via ID or class selector
By default, the styles prop uses the breakpoints that you specify in MakerUIOptions
when it parses any array-based CSS rules.
1import * as React from 'react'2import {3 Layout,4 Header,5 Navbar,6 MobileMenu,7 Content,8 Main,9 Footer,10 MakerUIOptions,11 MakerMenu,12} from 'maker-ui'1314...1516const styles = {17 a: {18 textDecoration: 'none',19 },20 header: {21 padding: [15, '10px 30px'],22 borderBottom: '1px solid',23 },24 footer: {25 display: 'grid',26 gridTemplateColumns: ['1fr', 'repeat(4, 1fr)'],27 gap: 30,28 }29}3031export const MyLayout = ({ children }) => {32 return (33 <Layout options={options} styles={styles}>34 <Header>35 <Navbar logo={<Logo />} menu={menu} />36 <MobileMenu menu={menu} />37 </Header>38 <Content>39 <Main>{children}</Main>40 </Content>41 <Footer>42 Footer Copyright43 </Footer>44 </Layout>45 )46}
In this example, we add a global textDecoration
rule to all anchor tags while also applying custom styles to Maker UI's header and footer components.
Use Inside a Root Provider#
When your new layout is ready to go, import it into your app's root component and treat it like a top-level application provider.
You can use your router's current location to trigger conditional layouts and you can dynamically change the MakerUIOptions
or styles as needed.
1import * as React from 'react'2import * as ReactDOM from 'react-dom'34import { MyLayout } from './MyLayout'56const element = <MyLayout />7ReactDOM.render(element, document.getElementById('root'))
Best Practices#
In a real application, you would store your options
, styles
, and menu
objects in separate files or even generate them dynamically via network requests at build or runtime.
See Best Practices for a complete list of helpful tips and common issues.