Rebass
React primitive UI components built with styled-system.
https://rebassjs.org

npm i rebass@next
Getting Started
import React from 'react'
import { Box, Heading, Button } from 'rebass'
export default props =>
<Box>
<Heading>Hello</Heading>
<Button>Rebass</Button>
</Box>
To use Rebass with emotion, import from rebass/emotion
:
import { Box } from 'rebass/emotion'
Features
- 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
- Support for styled-components & emotion
- 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
Principles
Rebass is built with the following principles in mind.
- Minimal
- Useful
- Unopinionated
- Flexible
- Consistent
- Extensible
- Themeable
- Do one thing well
See Patterns for Style Composition in React
for more on some of the thought behind Rebass.
Documentation
CodeSandbox
Try it out:
https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox-v3
Related
Previous Versions
Contributing
|
MIT License