| 1 |
|
| 2 | <img src='https://rebassjs.org/logo.svg' width='128' height='128' />
|
| 3 |
|
| 4 | # Rebass
|
| 5 |
|
| 6 | React primitive UI components built with [styled-system][].
|
| 7 | https://rebassjs.org
|
| 8 |
|
| 9 | [![Build Status][badge]][travis]
|
| 10 | [![Coverage][coverage-badge]][coverage]
|
| 11 | [![Downloads][downloads-badge]][npm]
|
| 12 | [![Version][version-badge]][npm]
|
| 13 | [![MIT License][license-badge]](LICENSE.md)
|
| 14 |
|
| 15 | [badge]: https://flat.badgen.net/travis/rebassjs/rebass/master
|
| 16 | [travis]: https://travis-ci.org/rebassjs/rebass
|
| 17 | [coverage-badge]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass
|
| 18 | [coverage]: https://codecov.io/github/rebassjs/rebass
|
| 19 |
|
| 20 | [downloads-badge]: https://flat.badgen.net/npm/dw/rebass
|
| 21 | [version-badge]: https://flat.badgen.net/npm/v/rebass
|
| 22 | [license-badge]: https://flat.badgen.net/badge/license/MIT/blue
|
| 23 | [npm]: https://npmjs.com/package/rebass
|
| 24 |
|
| 25 | ```sh
|
| 26 | npm i rebass
|
| 27 | ```
|
| 28 |
|
| 29 | **Note:** Rebass v3 is intended for use with styled-components v4. Some features may not work with previous versions.
|
| 30 |
|
| 31 | ## Getting Started
|
| 32 |
|
| 33 | ```jsx
|
| 34 | import React from 'react'
|
| 35 | import { Box, Heading, Button } from 'rebass'
|
| 36 |
|
| 37 | export default props =>
|
| 38 | <Box>
|
| 39 | <Heading>Hello</Heading>
|
| 40 | <Button>Rebass</Button>
|
| 41 | </Box>
|
| 42 | ```
|
| 43 |
|
| 44 | ### Emotion
|
| 45 |
|
| 46 | To use Rebass with [emotion][], install and use the `@rebass/emotion`
|
| 47 |
|
| 48 | ```sh
|
| 49 | npm i @rebass/emotion @emotion/core @emotion/styled
|
| 50 | ```
|
| 51 |
|
| 52 | ## Features
|
| 53 |
|
| 54 | - 8 core UI components to serve as the basis for design systems
|
| 55 | - Super small (~1KB)
|
| 56 | - Responsive, themeable style props from [styled-system][]
|
| 57 | - Flexbox grid with the Box and Flex components
|
| 58 | - Extensible base components
|
| 59 | - Design-system based consistency
|
| 60 | - Built for responsive web design
|
| 61 |
|
| 62 |
|
| 63 | > "One of the best React component libs out there"
|
| 64 | > – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)
|
| 65 |
|
| 66 | > "Rebass is the Bootstrap of React."
|
| 67 | > – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)
|
| 68 |
|
| 69 | > "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
|
| 70 | > – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)
|
| 71 |
|
| 72 | ## Principles
|
| 73 |
|
| 74 | Rebass is built with the following principles in mind.
|
| 75 |
|
| 76 | - **Minimal**
|
| 77 | - **Useful**
|
| 78 | - **Unopinionated**
|
| 79 | - **Flexible**
|
| 80 | - **Consistent**
|
| 81 | - **Extensible**
|
| 82 | - **Themeable**
|
| 83 | - **Do one thing well**
|
| 84 |
|
| 85 | See [Patterns for Style Composition in React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/)
|
| 86 | for more on some of the thought behind Rebass.
|
| 87 |
|
| 88 | ## Documentation
|
| 89 |
|
| 90 | - [Docs](https://rebassjs.org)
|
| 91 | - [Getting Started](https://rebassjs.org/getting-started)
|
| 92 | - [Props](https://rebassjs.org/props)
|
| 93 | - [Extending](https://rebassjs.org/extending)
|
| 94 | - [Theming](https://rebassjs.org/theming)
|
| 95 | - [Box](https://rebassjs.org/Box)
|
| 96 | - [Flex](https://rebassjs.org/Flex)
|
| 97 | - [Text](https://rebassjs.org/Text)
|
| 98 | - [Heading](https://rebassjs.org/Heading)
|
| 99 | - [Button](https://rebassjs.org/Button)
|
| 100 | - [Link](https://rebassjs.org/Link)
|
| 101 | - [Image](https://rebassjs.org/Image)
|
| 102 | - [Card](https://rebassjs.org/Card)
|
| 103 |
|
| 104 | ## CodeSandbox
|
| 105 |
|
| 106 | Try it out:
|
| 107 | https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox-v3
|
| 108 |
|
| 109 |
|
| 110 | ### Related
|
| 111 |
|
| 112 | - [styled-system][]
|
| 113 | - [Rebass Grid][]
|
| 114 | - [styled-components][]
|
| 115 | - [emotion][]
|
| 116 |
|
| 117 | [styled-system]: https://github.com/jxnblk/styled-system
|
| 118 | [Rebass Grid]: https://github.com/rebassjs/grid
|
| 119 | [styled-components]: https://github.com/styled-components/styled-components
|
| 120 | [emotion]: https://github.com/emotion-js/emotion
|
| 121 |
|
| 122 | #### Previous Versions
|
| 123 |
|
| 124 | - [v2.3.2](https://github.com/rebassjs/rebass/tree/v2) – [Docs for Rebass v2](https://rebass-v2.now.sh)
|
| 125 | - [v1.0.7](https://github.com/rebassjs/rebass/tree/v1.0.7)
|
| 126 |
|
| 127 | ---
|
| 128 |
|
| 129 | [Contributing](CONTRIBUTING.md)
|
| 130 | |
|
| 131 | [MIT License](LICENSE.md)
|
| 132 |
|