Rebass

React UI component library & design system, built with styled-components and styled-system.

View demo Download Source 
npm i rebass@next

Rebass is a library of highly-composable, primitive UI components for React,
built with styled-components 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.

Getting Started

import React from 'react'
import { Provider, Heading, Button } from 'rebass'

const App = props => (
  <Provider>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Provider>
)

Features

  • Kickstart your own React component library
  • Responsive style props from [styled-system][system]
  • Flexbox grid with [grid-styled][gs]
  • Style encapsulation with [styled-components][sc]
  • Functional stateless UI components
  • Configurable theming
  • Extensible base components
  • Design-system based consistency
  • Built for responsive web design

"One of the best React component libs out there"
– Max Stoiber

"Rebass is the Bootstrap of React."
– Jori Lallo

"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
– Colm Tuite

GitHub