Create consistent design-system-driven React UI components

Usage no npm install needed!

<script type="module">
  import nativeSystemComponents from '';



Create consistent design-system-driven React UI components across native platforms

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

Build Status

import system from 'system-components'

// creates a Box with default props tied to your theme
const Box = system({
  p: 2,
  bg: 'blue'

Or, to use with emotion:

import system from 'system-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.

const Card = system({
  px: 2,
  py: 3,
  borderWidth: 1,
  borderColor: 'lightGray',
  borderRadius: 2

The system function will automatically apply styled-system functions to the underlying styled-component based on the keys of the defaultProps object. System components also add prop type definitions and remove style props from the underlying HTML element.

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

Add style props without defaultProps

System components can also be created with styled-system props without defining defaultProps.

const Box = system(

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


Using custom functions

Custom style functions can be passed as an argument.

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

Changing the underlying HTML element

System 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

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'>

Extending components

To extend another component, set it as the default is prop in your component definition, or pass it as a prop to the component instance.

const Text = system({
  fontSize: 2,

const Bold = system({
  is: Text,
  fontWeight: 'bold'

CSS prop

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

<Heading css='opacity:0.75;'>

Using with other CSS-in-JS libraries

The base System class can be used to create a system-components function for any CSS-in-JS library.

import { System } from 'system-components'
import styled from 'nano-style'

const system = new System({
  createComponent: type => (...args) => styled(type)(...args)

export default system

MIT License