UI System is a set of primitive components and utilities for prototyping/building React applications. The goal is to provide a base level of reset styles for each component, along with class utilities that are provided without any additional css rules.
The core of UI System is powered by the <Box /> component. It applies some basic style resets and renders an html element or component passed in using is. The idea is to create more complex components by composing these Box components together and have one unified styling system that everything adheres to.
Box renders a <div> tag by default, but you can pass any HTML tag, or even another React component with the is prop.
Let's start by using a Box to render a p tag.
Nothing too special. Try adding some utility classes to it, like bg-gray-200, p-4, or font-serif, or all three!
Glossier mlkshk live-edge, activated charcoal farm-to-table squid dreamcatcher authentic seitan coloring book ugh hoodie. Drinking vinegar flexitarian waistcoat viral vaporware organic gastropub. Plaid deep v vinyl cardigan fashion axe cornhole etsy intelligentsia listicle knausgaard williamsburg PBR&B. Drinking vinegar semiotics squid locavore authentic bicycle rights sustainable retro humblebrag gentrify.
We'll get into the different utility classes in a bit. For now, just know that these extra utility classes are detected by UI System and the appropriate style rules are processed with emotion and injected into the DOM at render time.
So, by utilizing <Box />, we can have a base reset along with any number of utility rules and only ship the styles that we need.
By default, UI System uses class composition to combine styling rules.
In the event that you need more specificity, just add an id to your component. Instead of composing classes, all styles to be applied will be wrapped into a specific css rule that uses the element's id and emotion generated class name.
For extreme circumstances, use the important prop. This appends !important to every style rule (use when you want to ensure no other outside rules cascades).
Take a look at Box components. Inspect them in the dev tools to see the differences in how their styles are applied.
Neat, right? Learn more about using utility classes.