Styling

All components are designed to be styled using props.

Overview

The list of major concepts provided by the library is as follows.

Style Props Conditional Styles Responsive Design Color Mode Color Scheme CSS Custom Properties CSS Value Functions Interpolation Animation Focus Ring Global Styles Reset Styles Layer Styles Text Styles At-Rules Cascade Layers

Usage

Style Props allow you to apply styles to elements using props. Style Props conform to the CSS properties and provide all properties in camelCase.

Box

<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>

Style Props uses @mdn/browser-compat-data. When the library is updated, Style Props is also updated periodically.