---
title: React Router
description: "A guide for installing and using Yamada UI with React Router projects."
---
## Installation
### Create application
Create React Router application.
```bash
pnpm create react-router my-app
```
```bash
npx create-react-router my-app
```
```bash
yarn create react-router my-app
```
```bash
bun create react-router my-app
```
### 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 { Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
import { UIProvider } from "@workspaces/ui"
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
export default function App() {
return
}
```
### 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.
## スクリプト
### 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 {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
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 {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
import { config } from "@workspace/theme"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
### 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 {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
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 {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
import { config } from "@workspace/theme"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```