Customize Config

By customizing the config, you can change the Color Mode and the prefix of CSS custom properties.

When customizing the config, it is recommended to use extendConfig. This creates a config that inherits the Default Config. If you do not use extendConfig, it will be a completely new config without inheriting the Default Config.

Changing the Color Mode

Use extendConfig to pass the generated config to UIProvider's config.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const customConfig = extendConfig({ initialColorMode: "system" })

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

Copied!

Changing the Prefix of `CSS` Custom Properties

Pass the generated config to the config of UIProvider using extendConfig.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const customConfig = extendConfig({ var: { prefix: "yamada" } })

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

Copied!

Changing the Breakpoint Direction

By default, Yamada UI uses @media(max-width) media queries for responsive design. If you prefer to use @media(min-width) media queries, change the breakpoint.direction to "up".

import { UIProvider, extendConfig } from "@yamada-ui/react"

const customConfig = extendConfig({ breakpoint: { direction: "up" } })

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

Copied!

Edit this page on GitHub

PreviousDefault Config NextSemantic Tokens

Customize Config

Changing the Prefix of CSS Custom Properties

Changing the Breakpoint Direction

Changing the Prefix of `CSS` Custom Properties