This project is currently under development.
If you arrived here from the Gatsby Theme Store, Gatsby Theme Elements is no longer supported and has now become a React component library. Consider trying
packages/gatsby-starter-maker-uifor your project instead.
Build React apps with a responsive layout system powered by Theme UI.
Maker UI helps you design accessible, responsive page templates that can be customized in an infinite number of ways. Use it to quickly prototype and deploy a polished application layout so you can focus on developing great content or adding new integrations and features to your project.
Maker UI extends all of Theme UI's core features so you can easily migrate your existing theme.
sx prop supportnpm i maker-ui
Maker UI uses two configuration objects and optional custom components to build your layouts. Your custom theme and options configurations determine how each layout should behave and appear.
See the documentation on how to build a theme and configure your layout options.
To get a site up and running in less than 5 minutes, you can use the Template component. Simply import and supply your theme object, options object, menu array, and logo as props:
// basic template usage
import React from 'react'
import { Template } from 'maker-ui'
import theme from './my-theme'
import options from './my-options'
import menu from './my-menu'
import Logo from './Logo'
export default props => (
<Template theme={theme} options={options} menu={menu} logo={<Logo />}>
{props.children}
</Template>
)
The Template component accepts a variety of props for custom components like a sidebar, side nav, header widgets (ie. search or social media links), footer content, and much more. Check out the Template docs for details.
If your design requires a bit more customization or if you need conditional layouts depending on a page route or variable, you can build with Maker UI's layout components:
// basic layout component usage
import React from 'react'
import {
Layout,
Header,
Navbar,
MobileMenu,
Content,
Main,
Sidebar,
Footer,
} from 'maker-ui'
import theme from './my-theme'
import options from './my-options'
import menu from './my-menu'
import Logo from './Logo'
export default props => (
<Layout theme={theme} 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>
)
All layout components can be styled with custom variants and the sx prop.
Maker UI ships with a variety of components you might need for your site, all fully accessible and customizable:
Note: this is just an outline for planning purposes
The MIT License (MIT)
FAQs
The fastest way to build themeable, responsive layouts in React
The npm package maker-ui receives a total of 4 weekly downloads. As such, maker-ui popularity was classified as not popular.
We found that maker-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.