# rebass
> React primitive UI components built with Styled System
Latest version **4.0.7** (published 2019-10-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install rebass
pnpm add rebass
yarn add rebass
bun add rebass
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.7 |
| Published | 2019-10-28 |
| First published | 2015-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/rebass) |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7898 |
| Author | Brent Jackson |
| Maintainers | jxnblk |
| Keywords | components, react, react-component, ui, design-system, styled-system, styled-components, emotion, theming, presentational, stateless, functional |
## Links
- npm: https://www.npmjs.com/package/rebass
- Repository: https://github.com/rebassjs/rebass
- Homepage: https://github.com/rebassjs/rebass#readme
- Issues: https://github.com/rebassjs/rebass/issues
- npm.io page: https://npm.io/package/rebass
## Dependencies (1)
- [reflexbox](https://npm.io/package/reflexbox.md) ^4.0.6
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads
## Recent versions
- 4.0.7 (latest) — 2019-10-28
- 3.0.0-12 (next) — 2018-11-29
- 2.2.0-0 (beta) — 2018-07-20
- 2.0.0-1 (alpha) — 2018-05-02
- 4.0.6 — 2019-09-21
- 4.0.5 — 2019-08-21
- 4.0.3 — 2019-08-18
- 4.0.2 — 2019-08-07
- 4.0.1 — 2019-08-05
- 4.0.0 — 2019-08-04
- 3.2.2 — 2019-08-04
- 3.2.1 — 2019-08-02
- 3.2.0 — 2019-08-01
- 3.1.3 — 2019-07-31
- 3.1.2 — 2019-07-22
- … 94 more at https://npm.io/package/rebass/versions
## README
# 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
```
## 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](https://twitter.com/mxstbr/status/882657561111080960)
> "Rebass is the Bootstrap of React."
>
> – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)
> "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
>
> – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)
## Principles
Rebass is intended to be:
- **Minimal**
- **Useful**
- **Unopinionated**
- **Flexible**
- **Consistent**
- **Extensible**
- **Themeable**
> Do one thing, and do it well
>
> – [Unix philosophy](https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well)
See [Patterns for Style Composition in React](http://jxnblk.com/writing/patterns-for-style-composition-in-react/)
for more on some of the thought behind Rebass.
## Documentation
- [Docs](https://rebassjs.org)
- [Getting Started](https://rebassjs.org/getting-started)
- [Props](https://rebassjs.org/props)
- [Extending](https://rebassjs.org/extending)
- [Theming](https://rebassjs.org/theming)
- [Reflexbox](https://rebassjs.org/reflexbox)
- [Text](https://rebassjs.org/Text)
- [Heading](https://rebassjs.org/Heading)
- [Button](https://rebassjs.org/Button)
- [Link](https://rebassjs.org/Link)
- [Image](https://rebassjs.org/Image)
- [Card](https://rebassjs.org/Card)
## CodeSandbox
Try it out:
https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox
### Related
- [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
### Upgrading from v3
See the [Migration Guide](https://rebassjs.org/migrating/).
#### Previous Versions
- [v3.2.2](https://github.com/rebassjs/rebass/tree/v3.2.2) – [v3 Docs](https://rebass-v3.now.sh)
- [v2.3.2](https://github.com/rebassjs/rebass/tree/v2) – [Docs for Rebass v2](https://rebass-v2.now.sh)
- [v1.0.7](https://github.com/rebassjs/rebass/tree/v1.0.7)
---
[Contributing](CONTRIBUTING.md) | [MIT License](LICENSE.md)
---
_Source: https://npm.io/package/rebass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._