Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Getting Started with Vite

Install Packages

First, create your application.

Execute one of the following commands in your terminal.

pnpm create vite my-app --template react-swc-ts
Copied!

Use the cd command to move the directory and install node_modules.

pnpm install
Copied!

Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react.

pnpm add @yamada-ui/react
Copied!

If you want to use tables, calendars, carousels, etc., you need to install them separately.

pnpm add @yamada-ui/table
Copied!
PackageDescription
@yamada-ui/table

Provides a convenient table component using @tanstack/react-table.

@yamada-ui/calendar

Provides convenient calendar and date picker components using dayjs.

@yamada-ui/carousel

Provides a convenient carousel component using embla-carousel-react.

@yamada-ui/dropzone

Provides a convenient dropzone component using react-dropzone.

@yamada-ui/charts

Provides convenient chart components using recharts.

@yamada-ui/markdown

Provides a convenient markdown component using react-markdown and react-syntax-highlighter.

@yamada-ui/fontawesome

Provides components for conveniently using Font Awesome.

Add UIProvider

After installing Yamada UI, add UIProvider.

main.tsx

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.css"
import { UIProvider } from "@yamada-ui/react"


ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <UIProvider>
      <App />
    </UIProvider>
  </React.StrictMode>,
)
Copied!

Support for Color Modes

To make the color mode function properly, it is necessary to add ColorModeScript inside the body.

This is because the color mode is implemented using localStorage or cookies, and it needs to synchronize correctly at the time of page loading.

Adding a Plugin

To add a script inside the body, add a plugin to vite.config.ts.

vite.config.ts

import { defineConfig, Plugin } from "vite"
import { defaultConfig, getColorModeScript } from "@yamada-ui/react"
import react from "@vitejs/plugin-react-swc"


function injectScript(): Plugin {
  return {
    name: "vite-plugin-inject-scripts",
    transformIndexHtml(html, ctx) {
      const content = getColorModeScript({
        initialColorMode: defaultConfig.initialColorMode,
      })


      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), injectScript()],
})
Copied!

Use Components

Once you've added UIProvider, you can start using components within your application.

app.tsx

import { FC } from "react"
import { Button } from "@yamada-ui/react"


const App: FC = () => {
  return <Button>Click me!</Button>
}


export default App
Copied!

Edit this page on GitHub

PreviousNext.jsNextRemix