Overview

The configuration of Yamada UI is a global setting used in various parts of the system.

The configuration defined in the theme are here.

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

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

Properties

Property	Default	Description
`css.layers`	-	Cascade layers settings.
`css.varPrefix`	`"ui"`	CSS variable prefix.
`breakpoint.base`	`"9999px"`	Breakpoint base value.
`breakpoint.containerRef`	-	Container query reference when using the container query.
`breakpoint.direction`	`"down"`	Responsive design adopted media query.
`breakpoint.identifier`	`"@media screen"`	Media query to use for breakpoints.
`defaultColorMode`	`"light"`	Default color mode.
`defaultThemeScheme`	`"base"`	Default theme scheme.
`theme.responsive`	`false`	Apply responsive design to theme tokens.
`disableTransitionOnChange`	`false`	Disable `transition` when changing the color mode or theme.
`loading.screen.blockScrollOnMount`	`true`	Lock scrolling when loading is displayed.
`loading.screen.allowPinchZoom`	`false`	Handle zoom or pinch gestures on iOS devices when scrolling is locked.
`loading.screen.loadingScheme`	`"oval"`	Scheme of loading.
`loading.screen.duration`	`null`	Duration of loading.
`loading.screen.loadingCount`	`0`	Initial count of loading.
`loading.page.blockScrollOnMount`	`true`	Lock scrolling when loading is displayed.
`loading.page.allowPinchZoom`	`false`	Handle zoom or pinch gestures on iOS devices when scrolling is locked.
`loading.page.loadingScheme`	`"oval"`	Scheme of loading.
`loading.page.duration`	`null`	Duration of loading.
`loading.page.loadingCount`	`0`	Initial count of loading.
`loading.background.blockScrollOnMount`	`false`	Lock scrolling when loading is displayed.
`loading.background.allowPinchZoom`	`false`	Handle zoom or pinch gestures on iOS devices when scrolling is locked.
`loading.background.loadingScheme`	`"oval"`	Scheme of loading.
`loading.background.duration`	`null`	Duration of loading.
`loading.background.loadingCount`	`0`	Initial count of loading.
`notice.closable`	`true`	Enable to close notice.
`notice.closeStrategy`	`["click", "drag"]`	Close strategy for the notice.
`notice.duration`	`5000`	Duration of notice.
`notice.expand`	`false`	Expand notice.
`notice.limit`	`3`	Maximum number of notice.
`notice.placement`	`"start"`	Placement of notice.
`snacks.closable`	`true`	Enable close button on snacks.
`snacks.duration`	`5000`	Duration of snacks.
`snacks.limit`	-	Maximum number of snacks.
`snacks.placement`	`"start"`	Placement of snacks.
`snacks.startIndex`	`0`	Start `z-index` of snacks.