npm i rebass
Note: Rebass v3 is intended for use with styled-components v4. Some features may not work with previous versions.
import React from 'react'import Box Heading Button from 'rebass'<Box><Heading>Hello</Heading><Button>Rebass</Button></Box>
To use Rebass with emotion, install and use the
npm i @rebass/emotion @emotion/core @emotion/styled
- 8 core UI components to serve as the basis for design systems
- Super small (~1KB)
- Responsive, themeable style props from styled-system
- Flexbox grid with the Box and Flex components
- 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
Rebass is built with the following principles in mind.
- Do one thing well
See Patterns for Style Composition in React for more on some of the thought behind Rebass.