Rebass

React primitive UI components built with [Styled System][].
https://rebassjs.org

[![Build Status][badge]][travis]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license-badge]](LICENSE.md)

[badge]: https://flat.badgen.net/travis/rebassjs/rebass/master
[travis]: https://travis-ci.org/rebassjs/rebass
[coverage-badge]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass
[coverage]: https://codecov.io/github/rebassjs/rebass

[downloads-badge]: https://flat.badgen.net/npm/dw/rebass
[version-badge]: https://flat.badgen.net/npm/v/rebass
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/rebass

``sh
npm i rebass
`

Getting Started

`jsx
import React from 'react'
import { Box, Heading, Button } from 'rebass'

export default props =>

Hello
Rebass

``

Features

- Start your design system without boiling the ocean
- Build consistent UI with design constraints and user-defined scales
- Best-in-class developer ergonomics with [Styled System][] props
- First-class support for theming &
fully compatible with [Theme UI][]
- Quick, mobile-first responsive styles with array-based syntax
- Flexbox layout with the Box and Flex components
- Flexibility built in for high design & development velocity
- Minimal footprint at about 4KB

[reflexbox]: https://rebassjs.org/reflexbox

> "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 intended to be:

- Minimal
- Useful
- Unopinionated
- Flexible
- Consistent
- Extensible
- Themeable

> Do one thing, and do it well
>
> – Unix philosophy

See Patterns for Style Composition in React
for more on some of the thought behind Rebass.

Documentation

- Docs
- Getting Started
- Props
- Extending
- Theming
- Reflexbox
- Text
- Heading
- Button
- Link
- Image
- Card

CodeSandbox

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

$3

- [Styled System][]
- [Theme UI][]
- [Emotion][]
- [Styled Components][]

[styled system]: https://styled-system.com
[styled components]: https://github.com/styled-components/styled-components
[emotion]: https://github.com/emotion-js/emotion
[theme ui]: https://theme-ui.com

$3

See the Migration Guide.

#### Previous Versions

- v3.2.2 – v3 Docs
- v2.3.2 – Docs for Rebass v2
- v1.0.7

---

Contributing | MIT License