---
title: Overview
description: "The configuration of Yamada UI is a global setting used in various parts of the system."
---

The configuration defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/config.ts).

```tsx
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](https://yamada-ui.com/docs/theming/cascade-layers.md) settings.                                                                                   |
| `css.varPrefix`                         | `"ui"`              | CSS variable prefix.                                                                                                                                               |
| `breakpoint.base`                       | `"9999px"`          | Breakpoint base value.                                                                                                                                             |
| `breakpoint.containerRef`               | -                   | [Container query](https://yamada-ui.com/docs/theming/breakpoints.md#container-query) reference when using the container query.                                     |
| `breakpoint.direction`                  | `"down"`            | [Responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) adopted [media query](https://yamada-ui.com/docs/theming/breakpoints.md#media-query). |
| `breakpoint.identifier`                 | `"@media screen"`   | Media query to use for breakpoints.                                                                                                                                |
| `defaultColorMode`                      | `"light"`           | Default [color mode](https://yamada-ui.com/docs/theming/color-mode.md).                                                                                            |
| `defaultThemeScheme`                    | `"base"`            | Default [theme scheme](https://yamada-ui.com/docs/theming/switching-themes.md).                                                                                    |
| `theme.responsive`                      | `false`             | Apply [responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) to theme tokens.                                                                |
| `disableTransitionOnChange`             | `false`             | Disable `transition` when changing the color mode or theme.                                                                                                        |
| `loading.screen.blockScrollOnMount`     | `true`              | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) 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](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                              |
| `loading.screen.duration`               | `null`              | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                            |
| `loading.screen.loadingCount`           | `0`                 | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                       |
| `loading.page.blockScrollOnMount`       | `true`              | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) 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](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                              |
| `loading.page.duration`                 | `null`              | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                            |
| `loading.page.loadingCount`             | `0`                 | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                       |
| `loading.background.blockScrollOnMount` | `false`             | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) 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](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                              |
| `loading.background.duration`           | `null`              | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                            |
| `loading.background.loadingCount`       | `0`                 | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md).                                                                                       |
| `notice.closable`                       | `true`              | Enable to close [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                          |
| `notice.closeStrategy`                  | `["click", "drag"]` | Close strategy for the [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                   |
| `notice.duration`                       | `5000`              | Duration of [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                              |
| `notice.expand`                         | `false`             | Expand [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                                   |
| `notice.limit`                          | `3`                 | Maximum number of [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                        |
| `notice.placement`                      | `"start"`           | Placement of [notice](https://yamada-ui.com/docs/hooks/use-notice.md).                                                                                             |
| `snacks.closable`                       | `true`              | Enable close button on [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md).                                                                                   |
| `snacks.duration`                       | `5000`              | Duration of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md).                                                                                              |
| `snacks.limit`                          | -                   | Maximum number of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md).                                                                                        |
| `snacks.placement`                      | `"start"`           | Placement of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md).                                                                                             |
| `snacks.startIndex`                     | `0`                 | Start `z-index` of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md).                                                                                       |