Compared to Styled System

What's different about System Props

Pseudo Selector Props

Inspired by Chakra UI, System Props supports pseudo selectors as props, which can be configured via createSystem. This takes your system props to the next level by giving you the ability to style the element at different states, such as hover, focus, disabled, and more.

Shorthand Property Support

System Props will parse shorthand properties, such as margin, padding, border, and boxShadow for the theme scales used within it. For example, to define a border width, style, and color (using a theme color) with Styled System, you had to use multiple props:

System Props will parse the border shorthand for theme theme color value:

Prefix design tokens with $

System Props, like Styled System, supports numeric scales in theme. For example, theme.space is frequently defined as an array, like so:

System Props will parse 3 as theme.space[3], which yields 16 (or 16px). This can be confusing since you might expect marginLeft={3} to yield 3px.

To eliminate this confusion, System Props supports (and recommends!) prefixing theme values with $ to clarify when you're using theme tokens. This is optional, and theme tokens can be referenced without them.

Quick Access to Theme with Function Value

If at any time you need access to the entire theme object, every system prop can take a value as a function where its argument is the theme:

Written in TypeScript

Get the confidence of type saftey!

Strict Mode

Particularly useful for design systems. You may prefer that exclusively theme values are supported with system props. Enabling the strict confiugration option in createSystem to accomplish this.