Leave Yamada UI a star

Star
Yamada UIYamada UIv1.3.9

Customize Config

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

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

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

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 to "up".

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


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


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

Edit this page on GitHub

PreviousDefault ConfigNextResponsive Styles