Overview
Maker UI is a lightweight design system that helps you create responsive React apps. Build accessible, production ready layouts in just a few lines of code, or use Maker UI primitives to construct responsive components.
Maker UI is unopinionated, meaning that all of its components give you full control over theming and appearance.
Features#
There are 2 ways to use Maker UI:
- CSS-in-JS Primitives
- Layout System
CSS-in-JS Primitives#
Maker UI components support the responsive css
and breakpoints
props. These props allow you to create media queries with style arrays that correspond to breakpoints:
1<Div breakpoints={[960]} css={{ color: ['red', 'blue'] }}>2 Hello world3</Div>45/** Equivalent CSS:6 *7 * color: red;8 * @media screen and (min-width: 960px) {9 * color: blue;10 * }11}*/
The css
prop is mobile-first and writes media queries according to the min-width
rule. The first index of a style array is the attribute's default value. Subsequent styles in the array correspond to screen widths specified in the breakpoints
prop.
Layout System#
The Layout System gives you global control over your app's skeleton and global breakpoints. You can use its semantic components to build highly custom layouts that scale with zero-configuration.
The Layout provider also gives you granular control over the way certain parts of your app behave. Use a MakerUIOptions
configuration object to customize the look and feel of your layout:
- 9 customizable desktop header layouts
- 4 customizable mobile header layouts
- 6 content layouts
- Automatic responsive header and side navigation
- Accessible dropdown menus
- Automatic skiplink and keyboard focus management
- Conditional or multi-layout support
- Unlimited color modes
- Custom CSS variables
- Error boundaries and custom logging hooks
TypeScript#
Maker UI is written in TypeScript and includes type definitions as well as TSDocs compatible comments for all exported types, hooks, and components. Our goal is to leverage Intellisense so your developer experience is a lot easier.