Rebass, a great React Design System

What is Rebass?

Rebass is a React UI component library & design system, built with Styled System, Styled Grid with support for Styled Components & Emotion libraries.

Rebass is a library of highly-composable, primitive UI components for React, to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Who created Rebass?

Brent Jackson, aka Jxnblk. A design systems developer based in New York.

How to use Rebass?

It’s easy to install Rebass using NPM, and it has no complicated build step. This means there is no need to setup a complicated Webpack build step, just import the base component and customize the styles to your liking with Styled Components.

Why is Rebass great?

Rebass components are minimal, functional, and flexible, making it easy to add your custom styles on top. Rebass gives you style encapsulation with CSS-in-JS and Styled Components. Rebass components also have stateless UI, which means you won’t get a headache trying to customize them when your application UI changes. Leave the state to your React code!

Rebass theming keeps your application styles from straying

Configurable theming that can be easily applied across an entire application. You can setup custom breakpoints, a spacing scale, a typographic scale, fonts, font weights, border radii, and colors. This helps keep your application styles from straying too far from design guidelines.

Rebass uses Styled System

Styled System provides design system utilities for Styled Components and other css-in-js libraries. It allows you to add style props that hook into your own theme. It is influenced by constraint-based design system principles. Styled System provides all the functionality to apply your Rebass theme configuration and Grid Styled grid to your application.

Rebass uses Grid Styled

Grid Styled gives you all the power of Flexbox, but allows you to apply your design guidelines from your theme in an easy way. It allows you to create flexible and responsive react grid systems that can be updated across an entire application.

Putting it all together

Using Styled Components, Styled System, Grid Styled, and Rebass allow you to create a Design System that can be easily applied to an entire application. All of your design decisions are in a controlled system, but still easily customized with Styled Components for those one off cases.

Be in control of your design system throughout the life of your application, use Rebass and friends!