Rebass

React UI component library & design system, built with styled-system, with support for styled-components & emotion.

https://rebassjs.org

npm i rebass@next

Getting Started

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

export default props =>
  <div>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </div>

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

• Docs

CodeSandbox

Try it out: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Related

• styled-system
• Rebass Grid
• styled-components
• emotion

Previous Versions

• v2.3.2 – Docs for Rebass v2
• v1.0.7

---

Contributing | MIT License