---
title: TanStack Start
description: "TanStack StartのプロジェクトにYamada UIをインストールして使用するためのガイド。"
---
# TanStack Start
TanStack StartのプロジェクトにYamada UIをインストールして使用するためのガイド。
## インストール
### アプリケーションを作成する
TanStack Startのアプリケーションを作成します。
```bash
pnpm create @tanstack/start my-app
```
```bash
npx create @tanstack/start my-app
```
```bash
yarn create @tanstack/start my-app
```
```bash
bun create @tanstack/start my-app
```
### セットアップする
コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。
```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
```
### パッケージをインストールする
アプリケーションに`@workspaces/ui`をインストールします。
```bash
pnpm add "@workspaces/ui@workspace:*"
```
```bash
npm install "@workspaces/ui@workspace:*"
```
```bash
yarn add "@workspaces/ui@workspace:*"
```
```bash
bun add "@workspaces/ui@workspace:*"
```
### プロバイダーを追加する
インストール後、アプリケーションのルートに`UIProvider`を追加します。
ハイドレーションエラーを抑制するために、`html`と`body`に`suppressHydrationWarning`を`true`に設定します。
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
import { TanStackDevtools } from "@tanstack/react-devtools"
import { UIProvider } from "@workspaces/ui"
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start Starter" },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
{children}
,
},
]}
/>
)
}
```
### コンポーネントを使用する
`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。
```tsx
import { createFileRoute } from "@tanstack/react-router"
import { Button } from "@workspaces/ui"
export const Route = createFileRoute("/")({ component: App })
function App() {
return
}
```
これで、Yamada UIのセットアップは完了です！
## スクリプト
### ColorModeScript
[カラーモード](https://yamada-ui.com/docs/theming/color-mode.md)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。
理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
import { TanStackDevtools } from "@tanstack/react-devtools"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import { createServerFn } from "@tanstack/react-start"
import { getRequestHeader } from "@tanstack/react-start/server"
const getCookie = createServerFn({ method: "GET" }).handler(async () => {
return getRequestHeader("cookie") ?? ""
})
export const Route = createRootRoute({
loader: async () => ({
cookie: await getCookie(),
}),
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start Starter" },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { cookie } = Route.useLoaderData()
return (
{children}
,
},
]}
/>
)
}
```
もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
import { TanStackDevtools } from "@tanstack/react-devtools"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import { createServerFn } from "@tanstack/react-start"
import { getRequestHeader } from "@tanstack/react-start/server"
import { config } from "@workspaces/theme"
const getCookie = createServerFn({ method: "GET" }).handler(async () => {
return getRequestHeader("cookie") ?? ""
})
export const Route = createRootRoute({
loader: async () => ({
cookie: await getCookie(),
}),
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start Starter" },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { cookie } = Route.useLoaderData()
return (
{children}
,
},
]}
/>
)
}
```
### ThemeSchemeScript
[テーマの切り替え](https://yamada-ui.com/docs/theming/switching-themes.md)を使用する場合は、正常に動作させるために`body`に`ThemeSchemeScript`を追加する必要があります。
理由は、テーマの切り替えが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
import { TanStackDevtools } from "@tanstack/react-devtools"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import { createServerFn } from "@tanstack/react-start"
import { getRequestHeader } from "@tanstack/react-start/server"
const getCookie = createServerFn({ method: "GET" }).handler(async () => {
return getRequestHeader("cookie") ?? ""
})
export const Route = createRootRoute({
loader: async () => ({
cookie: await getCookie(),
}),
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start Starter" },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { cookie } = Route.useLoaderData()
return (
{children}
,
},
]}
/>
)
}
```
もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
import { TanStackDevtools } from "@tanstack/react-devtools"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import { createServerFn } from "@tanstack/react-start"
import { getRequestHeader } from "@tanstack/react-start/server"
import { config } from "@workspaces/theme"
const getCookie = createServerFn({ method: "GET" }).handler(async () => {
return getRequestHeader("cookie") ?? ""
})
export const Route = createRootRoute({
loader: async () => ({
cookie: await getCookie(),
}),
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "TanStack Start Starter" },
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { cookie } = Route.useLoaderData()
return (
{children}
,
},
]}
/>
)
}
```
## コンポーネントの統合
TanStack Startの[Link](https://tanstack.com/router/latest/docs/guide/navigation#link-component)などのコンポーネントとYamada UIのコンポーネントを統合することができます。
### 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
}
```