Cascade Layers

Overview

Yamada UI uses CSS Cascade Layers to set the priority between themes and Style Props. This priority plays an important role in component styling.

Layer Types

The layer types are as follows.

• tokens: themes tokens.
• reset: reset styles.
• global: global styles.
• base: base style of components.
• size: size style of components.
• variant: variant style of components.
• props: props style of components.
• compounds: compounds style of components.

Layer Order

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

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

Customize

• 1

  Generate a Theme

  Use the CLI to generate a theme.

  Before running the following commands, you need to install @yamada-ui/cli and execute the init command. For more details, please see here.

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  Change the Config

  Change the config.ts in the generated theme.

  theme/config.ts

  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 },
  })
  

• 3

  Update the Provider

  Set the generated theme to UIProvider.

  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.

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

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