Utility Props

Utility props are provided as aliases for most components. The style is heavily influenced by Tailwind CSS "utility classes".

They also provide preset "contraints" designed to control the CSS you write and avoid "hard coding" all CSS values.

For example, this library uses Styled System's "spacing" utility, which allows you to use constraints in a range to define margin and padding.

They also allow you to use the shorthand methods from Styled System

For example:

Component Example

Here's the "Card" example by Tailwind recreated using this API:

Sunset in the mountains

The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#photography
#travel
#winter

Extracting Components

Once you've settled on your styles, you can then easily extract components into your own custom components without sacrificing control:

High Priority
Customized tag