---
title: Styling
description: "All components are designed to be styled using props."
---

## Overview

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

- [Style Props](https://yamada-ui.com/docs/styling/style-props.md)
- [Conditional Styles](https://yamada-ui.com/docs/styling/conditional-styles.md)
- [Responsive Design](https://yamada-ui.com/docs/styling/responsive-design.md)
- [Color Mode](https://yamada-ui.com/docs/styling/color-mode.md)
- [Color Scheme](https://yamada-ui.com/docs/styling/color-scheme.md)
- [CSS Value Functions](https://yamada-ui.com/docs/styling/css-value-functions.md)
- [Interpolation](https://yamada-ui.com/docs/styling/interpolation.md)
- [Animation](https://yamada-ui.com/docs/styling/animation.md)
- [Focus Ring](https://yamada-ui.com/docs/styling/focus-ring.md)
- [Global Styles](https://yamada-ui.com/docs/styling/global-styles.md)
- [Reset Styles](https://yamada-ui.com/docs/styling/reset-styles.md)
- [Layer Styles](https://yamada-ui.com/docs/styling/layer-styles.md)
- [Text Styles](https://yamada-ui.com/docs/styling/text-styles.md)
- [At-Rules](https://yamada-ui.com/docs/styling/at-rules.md)
- [Cascade Layers](https://yamada-ui.com/docs/styling/cascade-layers.md)

## Usage

[Style Props](https://yamada-ui.com/docs/styling/style-props.md) allow you to apply styles to elements using props. Style Props conform to the [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Properties) and provide all properties in camelCase.

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

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) uses [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). When the library is updated, Style Props is also updated periodically.
:::