--- title: TanStack Router description: "A guide for installing and using Yamada UI with TanStack Router projects." --- # TanStack Router A guide for installing and using Yamada UI with TanStack Router projects. ## Installation ### Create application Create TanStack Router application. ```bash pnpm dlx create-tsrouter-app my-app ``` ```bash npx create-tsrouter-app my-app ``` ```bash yarn dlx create-tsrouter-app my-app ``` ```bash bunx create-tsrouter-app 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. ```tsx import ReactDOM from "react-dom/client" import { RouterProvider, createRouter } from "@tanstack/react-router" import { routeTree } from "./routeTree.gen" import { UIProvider } from "@workspaces/ui" const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, }) declare module "@tanstack/react-router" { interface Register { router: typeof router } } const rootElement = document.getElementById("app")! if (!rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render( , ) } ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { createFileRoute } from "@tanstack/react-router" import { Button } from "@workspaces/ui" export const Route = createFileRoute("/")({ component: App }) function App() { 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 title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" 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("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], }) export default config ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: themeConfig.defaultColorMode }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], }) export default config ``` ### 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 title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], }) export default config ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: themeConfig.defaultThemeScheme }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], }) export default config ``` ## Component Integration You can integrate TanStack Router components such as [Link](https://tanstack.com/router/latest/docs/guide/navigation#link-component) with Yamada UI components. ### Link ```tsx import type { LinkComponent } from "@tanstack/react-router" import { createLink } from "@tanstack/react-router" import { Button, IconButton, Link } from "@workspaces/ui" const CreatedLink = createLink(Link) export const RouterLink: LinkComponent = (props) => { return } const CreatedLinkButton = createLink(Button) export const RouterLinkButton: LinkComponent = ( props, ) => { return } const CreatedLinkIconButton = createLink(IconButton) export const RouterLinkIconButton: LinkComponent< typeof CreatedLinkIconButton > = (props) => { return } ```