---
title: Cascade Layers
description: "CSS Cascade Layers is a feature that manages the order in which CSS rules are applied to elements."
---

## Overview

Yamada UI uses CSS [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to set the priority between [themes](https://yamada-ui.com/docs/theming.md) and [Style Props](https://yamada-ui.com/docs/styling/style-props.md). This priority plays an important role in component styling.

## Layer Types

The layer types are as follows.

- `tokens`: [themes](https://yamada-ui.com/docs/theming.md) tokens.
- `reset`: [reset styles](https://yamada-ui.com/docs/styling/reset-styles.md).
- `global`: [global styles](https://yamada-ui.com/docs/styling/global-styles.md).
- `base`: [base style](https://yamada-ui.com/docs/components/styled.md#base-style) of components.
- `size`: [size style](https://yamada-ui.com/docs/components/styled.md#size-style) of components.
- `variant`: [variant style](https://yamada-ui.com/docs/components/styled.md#variant-style) of components.
- `props`: [props style](https://yamada-ui.com/docs/components/styled.md#props-style) of components.
- `compounds`: [compounds style](https://yamada-ui.com/docs/components/styled.md#compounds-style) of components.

## Layer Order

The order of the generated layers is as follows. The same property is overridden in order of priority.

```css
@layer tokens, reset, global, base, size, variant, props, compounds;
```

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) is always prioritized unless [!important](https://developer.mozilla.org/en-US/docs/Web/CSS/important) is applied because it is not set in the layer.
:::

## Customize

### Generate a Theme

Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme.

:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md).
:::

```bash
pnpm yamada-cli theme
```

```bash
npm yamada-cli theme
```

```bash
yarn yamada-cli theme
```

```bash
bun yamada-cli theme
```

### Change the Config

Change the `config.ts` in the generated theme.

```tsx
import type { LayersConfig } from "@yamada-ui/react"
import { defineConfig } from "@yamada-ui/react"

export const layers: LayersConfig = {
  tokens: { name: "tokens", order: 0 },
  reset: { name: "reset", order: 1 },
  global: { name: "global", order: 2 },
  base: { name: "base", order: 3 },
  size: { name: "size", order: 4 },
  variant: { name: "variant", order: 5 },
  props: { name: "props", order: 6 },
  compounds: { name: "compounds", order: 7 },
}

export const config = defineConfig({
  css: { layers, varPrefix: "ui" },
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```

### Update the Provider

Set the generated theme to `UIProvider`.

```tsx
import { UIProvider } from "@workspaces/ui"
import { theme, config } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme} config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

## Disable

To disable the cascade layers, set `css.layers` to `false`.

```tsx
import { defineConfig } from "@yamada-ui/react"

export const config = defineConfig({
  css: { layers: false, varPrefix: "ui" }, // [!code highlight]
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```