Components

System props

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

System props are paired with values from Seeds' theme in order to apply custom styles to component. In the following example, the color is being applied to the component.

The system prop (color in this case) matches up to the color CSS property, and the theme value is from the color category of our theme.

Each component in Seeds 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'll find a list of available system props documented on every component page on Seeds. Here are all of the available groups:

Responsive values

When a single theme value is given to a system prop, that value will be applied at every screen size. When an array of values is given, those values will be distributed across the breakpoints specified in the current theme.

You can use the tool below to learn the syntax needed for array props, and see exactly what screen sizes your values will be applied to.

Note that if a value is repeated across several breakpoints, a null value can be used to prevent generating unnecessary CSS.

The “as” and “forwardedAs” 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.

If you are extending a Racine component with Styled Components, like this:

const MyBox = styled(Box)`
  // styles here...
`

The as prop will no longer work in this case, because it will change the base element of MyBox and you will lose the styles applied to the root component (in this case, Box). To get around this, use the forwardedAs prop like such:

<MyBox forwardedAs='span' />