How to install System Props and get up and running.

Install System Props

Install System Props from your terminal via npm or yarn. If you don't already have a CSS-in-JS library like Styled Components installed, you'll need one, too.

Create Your System

System Props begins with creating a system which dictates how the rest of the System Props function.

This function receives a configuration object:

Create Your First Component

Now, this component will have two style props available: color to set foreground color, and bg to set background color. (You can also use backgroundColor if you're adverse to terse naming conventions.)


So far, this component can be styled with any valid CSS color. The real advantage of System Props is its tight integration with a theme object to create more consistent UIs. (Design systems!)

Most CSS-in-JS libraries include a ThemeProvider to provide values through React context. Import the styled-components ThemeProvider in the root of your application and pass the theme to the theme prop.

With the ThemeProvider added, the Box component now has access to the colors defined in the theme object.

System Props will attempt to find a value based on keys in the theme and fallback to the raw value if it's not defined in the theme (unless strict was enabled in the createSystem configuration.

To make the Box component a little more useful, add a few more System Props functions to handle layout styles.

If you prefer using the plain object syntax, you can pass System Props functions in as arguments.