---
title: Responsive Design
description: "Yamada UI provides features to change styles according to the screen size."
---

:::tip
By default, responsive design using `@media(max-width)` media queries is adopted. If you want to use `@media(min-width)` media queries, please refer to [here](https://yamada-ui.com/docs/theming/breakpoints.md#media-queries).
:::

## Overview

Responsive design refers to the breakpoints defined in the theme. Yamada UI has a Default Theme where [breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md) are defined.

:::note
If you want to change the breakpoints, please check theme's [Breakpoints](https://yamada-ui.com/docs/theming/breakpoints.md).
:::

## Usage

To set responsive design to [Style Props](https://yamada-ui.com/docs/styling/style-props.md), set an object with the breakpoints as the key.

- The keys of the object define the keys set in the theme's [Breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md).
- The values of the object define the values of the styles set by the key.

```tsx
<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
  Box
</Box>
```

The above code generates the following CSS:

```css
.Box {
  background: var(--ui-colors-bg-contrast);

  @media screen and (max-width: 768px) {
    background: var(--ui-colors-success);
  }
}
```

## Utilities

Yamada UI provides useful custom hooks for building responsive layouts.

- [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md): A custom hook that returns the current breakpoint. This hook monitors the window size and returns the appropriate value.
- [useBreakpointEffect](https://yamada-ui.com/docs/hooks/use-breakpoint-effect.md): A custom hook that executes a specific callback function when the breakpoint changes.
- [useUpdateBreakpointEffect](https://yamada-ui.com/docs/hooks/use-update-breakpoint-effect.md): A custom hook that skips the side effect on the initial render and executes a specific callback function when the breakpoint changes.
- [useBreakpointState](https://yamada-ui.com/docs/hooks/use-breakpoint-state.md): A custom hook that returns the current breakpoint from the provided object as the initial value.
- [useBreakpointValue](https://yamada-ui.com/docs/hooks/use-breakpoint-value.md): A custom hook that returns the value of the current breakpoint from the provided object. This hook monitors changes in the window size and returns the appropriate value.