---
title: Next.js (App)
description: "A guide for installing and using Yamada UI with Next.js app directory."
---
## Installation
### Create application
Create Next.js application.
```bash
pnpm create next-app my-app --typescript
```
```bash
npx create-next-app my-app --typescript
```
```bash
yarn create next-app my-app --typescript
```
```bash
bun create next-app my-app --typescript
```
### Setup
Running the command will create the necessary files and folders in your project.
```bash
pnpm dlx @yamada-ui/cli init
```
```bash
npx @yamada-ui/cli init
```
```bash
yarn dlx @yamada-ui/cli init
```
```bash
bunx @yamada-ui/cli init
```
### Install the package
Install `@workspaces/ui` to your application.
```bash
pnpm add "@workspaces/ui@workspace:*"
```
```bash
npm install "@workspaces/ui@workspace:*"
```
```bash
yarn add "@workspaces/ui@workspace:*"
```
```bash
bun add "@workspaces/ui@workspace:*"
```
### Add provider
After installing, add `UIProvider` to the root of your application.
To suppress hydration errors, add `suppressHydrationWarning` to the `html` and `body` tags.
```tsx
import { UIProvider } from "@yamada-ui/react"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
### Use components
After adding `UIProvider`, you can use the components in your application.
```tsx
import { Button } from "@workspaces/ui"
export default function Home() {
return
}
```
That's it! You've successfully set up Yamada UI.
## Scripts
### ColorModeScript
To use [Color Mode](https://yamada-ui.com/docs/theming/color-mode.md), you need to add `ColorModeScript` to the `body` to ensure it works correctly.
This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads.
```tsx
import { UIProvider, ColorModeScript } from "@workspaces/ui"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`.
```tsx
import { UIProvider, ColorModeScript } from "@workspaces/ui"
import { config } from "@workspaces/theme"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
### ThemeSchemeScript
To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly.
This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads.
```tsx
import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`.
```tsx
import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"
import { config } from "@workspaces/theme"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
### Use cookies
Using cookies allows you to ensure proper operation even on server-side rendering.
:::warning
Using [cookies](https://nextjs.org/docs/app/api-reference/functions/cookies) will opt into [dynamic rendering](https://nextjs.org/docs/app/getting-started/partial-prerendering#dynamic-rendering).
:::
```tsx
import { UIProvider, ColorModeScript, ThemeSchemeScript } from "@workspaces/ui"
import { cookies } from "next/headers"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const cookieStore = await cookies()
return (
{children}
)
}
```
## Component Integration
You can integrate Next.js components such as [Link](https://nextjs.org/docs/app/api-reference/components/link) and [Image](https://nextjs.org/docs/app/api-reference/components/image) with Yamada UI components.
### Link
```tsx
"use client"
import type {
ButtonProps,
HTMLRefAttributes,
IconButtonProps,
LinkProps,
Merge,
} from "@yamada-ui/react"
import type { LinkProps as OriginalLinkProps } from "next/link"
import type { FC } from "react"
import { Button, IconButton, Link } from "@yamada-ui/react"
import OriginalLink from "next/link"
export interface NextLinkProps extends Omit<
Merge,
"as" | "ref"
> {}
export const NextLink: FC = (props) => {
return
}
export interface NextLinkButtonProps
extends
Omit, "as" | "ref">,
HTMLRefAttributes<"a"> {}
export const NextLinkButton: FC = (props) => {
return
}
export interface NextLinkIconButtonProps
extends
Omit, "as" | "ref">,
HTMLRefAttributes<"a"> {}
export const NextLinkIconButton: FC = (props) => {
return
}
```
### Image
```tsx
"use client"
import { styled } from "@yamada-ui/react"
import Image from "next/image"
export const AppImage = styled(Image, {
forwardProps: ["fill", "height", "width"],
})
```