) } ``` 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 { Html, Head, Main, NextScript } from "next/document" import { ColorModeScript } from "@workspaces/ui" import { config } from "@workspace/theme" export default function Document() { 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 { Html, Head, Main, NextScript } from "next/document" import { ThemeSchemeScript } from "@workspaces/ui" import { config } from "@workspace/theme" export default function Document() { return (

) } ``` #### Add getServerSideProps To share `getServerSideProps` across multiple pages, define `getServerSideSharedProps`. ```tsx import { GetServerSidePropsContext } from "next" export const getServerSideSharedProps = ({ req, }: GetServerSidePropsContext) => { return { props: { cookies: req.headers.cookie ?? "", }, } } ``` ```tsx import { getServerSideSharedProps } from "@/get-server-side-props" import { Button } from "@workspaces/ui" export const getServerSideProps = getServerSideSharedProps export default function Home() { return } ``` #### Update Provider ```tsx import { UIProvider } from "@workspaces/ui" import type { AppProps } from "next/app" export default function App({ Component, pageProps }: AppProps) { const { cookie } = pageProps return ( ) } ``` # React Router ## 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 } ``` # Vite ## Installation ### Create application Create Vite application. ```bash pnpm create vite my-app --template react-ts ``` ```bash npm create vite my-app -- --template react-ts ``` ```bash yarn create vite my-app --template react-ts ``` ```bash bun create vite my-app --template react-ts ``` ### 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. ```tsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import App from "./App.tsx" import { UIProvider } from "@workspaces/ui" createRoot(document.getElementById("root")!).render( , ) ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { Button } from "@workspaces/ui" function App() { return } export default App ``` 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. ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: "light" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config } from "@workspace/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: config.defaultColorMode }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` ### 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. ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" import { config } from "@workspace/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: config.defaultThemeScheme }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ```