Components

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

Racine uses a library called Styled System to add system props to our components.

Each component is given access to certain groups of system props, depending on the needs of that component. Every component gets the COMMON group, which gives the component access to props that control color, background color, margin and padding.

You can see which groups of system props a component has access to on its page in Seeds. Look out for something like this:

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
LAYOUT

This shows that the component has access to the COMMON and LAYOUT groups. Hovering over the group name will show the list of properties in that group.

System prop groups

The following table shows a list of every system prop group and the properties within each group, as well as a link to the corresponding documentation on the Styled System website:

GroupIncluded PropertiesDocumentation
COMMON
color
bg
margin
padding
View the docs
BORDER
border
borderTop
borderRight
borderBotton
borderLeft
borderWidth
borderStyle
borderColor
borderRadius
boxShadow
View the docs
TYPOGRAPHY
fontFamily
typeScale
fontStyle
fontWeight
lineHeight
textAlign
View the docs
LAYOUT
display
size
width
height
minWidth
minHeight
maxWidth
maxHeight
overflow
verticalAlign
View the docs
POSITION
position
zIndex
top
right
bottom
left
View the docs
FLEX_CONTAINER
flexBasis
flexDirection
flexWrap
alignContent
alignItems
justifyContent
justifyItems
order
View the docs
FLEX_ITEM
flex
justifySelf
alignSelf
View the docs

The “as” prop

Most components in Racine accept the as prop, which allows the consumer to change the root element that the component renders.

For instance, <Box as='span' /> would render the Box component as a span tag instead of its default (in this case, div).

Important: Changing the root element can affect the styles and accessibility of a component. Use common sense when specifying the as prop — try to use HTML elements that are related to the existing root element of the component. For example, if a component normally renders a div tag, don’t try to change it to something like a table.

Examples

Component with the COMMON group get access to properties that control space and color. Here is an example of using some of those properties on the Box component:

This is a box that is being styled with system props.

The example above uses the following system properties:

  • px controls the padding-left and padding-right CSS properties
  • py controls the padding-top and padding-bottom CSS properties
  • bg controls the background-color CSS property
  • color controls the color CSS property

Notice the values being given to the system props. All of the values correspond to design tokens from Seeds. For example, we passed the value 400 to the px prop. 400 referrs to the 400 space value from Seeds.

Color values work similarly. Above, we used purple.0 and purple.800. Since color values are nested in Seeds, we use a key path to refer to values in the form category.value. Here, we are using the purple category with values of 0 and 800.

In fact, all system prop values follow the same format: category.value where the category is optional depending on the type of token. You’ll notice that Sass and JavaScript tokens use the same format:

$Color-purple--800 in Sass
COLOR_PURPLE_800 in JavaScript

Converted to a system prop, this value would simply be purple.800.

For a list of all of the available values for system props, please see the theme documentation