Create consistent styled-system based React UI components (formerly system-components)

Built with styled-system, with support for styled-components & emotion

Build Status

import system from '@rebass/components'
// creates a Box with default props tied to your theme
const Box = system({
 p: 2,
 bg: 'blue'
}, 'space', 'color')

Or, to use with emotion:

import system from '@rebass/components/emotion'

To create a styled-component with default props that hook into styled-system props, pass a plain object as the first argument to the system function and pass the names of the styled-system functions as arguments after.

const Card = system({
 px: 2,
 py: 3,
 border: '1px solid',
 borderColor: 'lightGray',
 borderRadius: 2
}, 'space', 'borders', 'borderColor', 'borderRadius')

@rebass/components automatically adds prop type definitions and removes style props from the underlying HTML element.

See the styled-system docs for a complete list of the available style functions.

@rebass/components can also be created with styled-system props without defining defaultProps.

const Box = system(
 'space',
 'width',
 'color'
)

This allows for style props to be passed to the component instance:

<Box
 width={1/2}
 px={3}
 py={4}
 bg='blue'
/>

Custom style functions can be passed as an argument.

const Box = system(
 props => ({
 height: props.height
 })
)

@rebass/components default to using a <div> as the HTML element. To change the HTML element use the is prop.

const Heading = system({
 is: 'h2',
 m: 0,
 fontSize: 6
}, 'space', 'fontSize')

Since is is a prop, it can also be passed to the element when used. This is useful for one-off changes to ensure semantic markup.

<Heading is='h1'>
 Hello
</Heading>

To extend another component, use the extend prop in your component definition.

const Text = system({
 fontSize: 2,
}, 'fontSize')
const Bold = system({
 extend: Text,
 fontWeight: 'bold'
}, 'fontWeight')

To add one-off custom CSS to any @rebass/component, use the css prop.

<Heading css='opacity:0.75;'>
 Hello
</Heading>

The css prop can also accept object literal syntax.

<Heading
 css={{
 opacity: 3/4
 }}>
 Hello
</Heading>

MIT License