Rebass v0.4.0-beta.7

React functional UI component design system


Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components inherit styles where appropriate and can be themed/customized using React Context. Rebass components are built as stateless functional components and modeled as presentational components. With unit tests for each component, Rebass is great for prototyping and ready for production.

  • Uses inline styles

  • No CSS dependencies

  • No leaky global styles

  • Promotes consistent styling

  • Built for pixel-perfect alignment

  • Works with any application architecture

  • Promotes separation of business logic and style

  • Convenient style props for margin, padding, and colors

  • Customizable themes using React context

  • Great for prototyping

  • Production ready

  • Unit tested

This stuff is amazing. Rebass, Reflexbox, Basscss. Developing towards a pure UI

A. Sharif

Reflexbox and Rebass = the typography "boilerplate" I was waiting for years

Este.js

Install

npm install --save rebass

Import & Use

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

const App = ({
  username,
  onChange,
  onSubmit
}) => (
  <form onSubmit={onSubmit}>
    <Input
      name='username'
      label='Username'
      value={username}
      onChange={onChange} />
    <Button
      children='Go' />
  </form>
)

Rebass is built around a component architectural approach inspired by Dan Abramov’s Presentational and Container Components, where presentational components are the only ones that encapsulate styles and contain no application logic, and container components do not contain any styles or DOM markup and handle all the application logic.

Rebass only contains presentational components, which means controlling things like progressive disclosure mechanisms or dropdown menus should be handled at a higher level in container components. Therefore, Rebass itself does not require any client-side JavaScript, is well suited to server-side rendering, and can fit into virtually any higher level application architecture.


Each Rebass component is wrapped with the withRebass higher order component, which provides the theme object through context and handles several style shorthand props.

Every component in Rebass has the following props available to quickly style and lay out views:

PropTypeDescription
mnumberMargin based on the global spacing scale
mtnumberMargin top
mrnumberMargin right
mbnumberMargin bottom
mlnumberMargin left
mxnumberX-axis margin (left and right)
mynumberY-axis margin (top and bottom)
pnumberPadding based on the global spacing scale
ptnumberPadding top
prnumberPadding right
pbnumberPadding bottom
plnumberPadding left
pxnumberX-axis padding (left and right)
pynumberY-axis padding (top and bottom)
boldbooleanSets bold font weight
centerbooleanCenter aligns text
capsbooleanSets all caps style
roundedboolean or stringBorder radius
pillbooleanSets border radius 99999 for pill and circle shapes
colorstringForeground color - a key from the color object or any other color value
backgroundColorstringBackground color
themestringSemantic forground and background color

The look and feel of Rebass components can be completely customized by passing a React context object to child components.

class App extends React.Component {
  getChildContext () {
    return {
      rebass: {
        colors: myCustomColors,
        fontSizes: [ 64, 48, 24, 18, 16, 14, 12],
        Button: {
          backgroundColor: 'tomato'
        }
      }
    }
  }

  render () {
    // ...
  }
}

App.childContextTypes = {
  rebass: React.PropTypes.object
}

67 Components