---
title: Vite
description: "A guide for installing and using Yamada UI with Vite.js projects"
---
## 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()],
})
```