Vite

Vite.jsのプロジェクトにYamada UIをインストールして使用するためのガイド。

インストール

1
アプリケーションを作成する
Viteのアプリケーションを作成します。
pnpm create vite my-app --template react-ts
npm create vite my-app -- --template react-ts
yarn create vite my-app --template react-ts
bun create vite my-app --template react-ts
2
セットアップする
コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。
pnpm dlx @yamada-ui/cli init
npx @yamada-ui/cli init
yarn dlx @yamada-ui/cli init
bunx @yamada-ui/cli init
3
パッケージをインストールする
アプリケーションに@workspaces/uiをインストールします。
pnpm add "@workspaces/ui@workspace:*"
npm install "@workspaces/ui@workspace:*"
yarn add "@workspaces/ui@workspace:*"
bun add "@workspaces/ui@workspace:*"
4
プロバイダーを追加する
インストール後、アプリケーションのルートにUIProviderを追加します。
main.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( <StrictMode> <UIProvider> <App /> </UIProvider> </StrictMode>, )
5
コンポーネントを使用する
UIProviderを追加したら、アプリケーション内でコンポーネントを使用します。
App.tsx
import { Button } from "@workspaces/ui" function App() { return <Button>Click me!</Button> } export default App
これで、Yamada UIのセットアップは完了です！

スクリプト

ColorModeScript

カラーモードを使用する場合は、正常に動作させるためにbodyにColorModeScriptを追加する必要があります。

理由は、カラーモードがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

vite.config.ts

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("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectColorModeScript()],
})

もし、コンフィグのdefaultColorModeを変更した場合は、ColorModeScriptにdefaultValueを設定します。

vite.config.ts

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("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectColorModeScript()],
})

ThemeSchemeScript

テーマの切り替えを使用する場合は、正常に動作させるためにbodyにThemeSchemeScriptを追加する必要があります。

理由は、テーマの切り替えがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

vite.config.ts

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("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectThemeSchemeScript()],
})

もし、コンフィグのdefaultThemeSchemeを変更した場合は、ThemeSchemeScriptにdefaultValueを設定します。

vite.config.ts

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("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectThemeSchemeScript()],
})