/rebass

:atom_symbol: React primitive UI components built with styled-system.

Primary LanguageJavaScriptMIT LicenseMIT

Rebass

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

Build Status Coverage Downloads Version MIT License

npm i rebass

Getting Started

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

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

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

"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

CodeSandbox

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

Related

Upgrading from v3

See the Migration Guide.

Previous Versions

Contributing | MIT License