Docs for v2:: https://rebass-v2.now.sh
npm i rebass
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.
import React from 'react'import Provider Heading Button from 'rebass'const App =<Provider><Heading>Hello</Heading><Button>Rebass</Button></Provider>
To use Rebass with emotion, import from
- Kickstart your own React component library
- Responsive style props from styled-system
- Flexbox grid with Rebass Grid
- Support for styled-components & emotion
- 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
Try it out:
Rebass is built around a component architectural approach inspired by Dan Abramov’s Presentational and Container Components, where presentational components are the only ones that encapsulate styles and contain no application logic, and container components do not contain any styles or DOM markup and handle all the application logic.
See Patterns for Style Composition in React for more on some of the thought behind Rebass.
For the previous version of Rebass see the v1.0.7 branch.