Getting Started with Create React App
Install Packages
First, create your application.
Execute one of the following commands in your terminal.
pnpm create react-app my-app --template typescript
Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react.
pnpm add @yamada-ui/react
If you want to use tables, calendars, carousels, etc., you need to install them separately.
pnpm add @yamada-ui/table
| Package | Description | |
|---|---|---|
| @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. |
To install individual components or hooks for improved performance, please check here.
If you want to use only the Yamada UI style system, please check here.
Add UIProvider
After installing Yamada UI, add UIProvider.
index.tsx
import { createRoot } from "react-dom/client"import { App } from "./app"import { UIProvider } from "@yamada-ui/react"const container = document.getElementById("app")const root = createRoot(container!)root.render(<UIProvider><App /></UIProvider>,)
The Default Theme is included within UIProvider.
If you want to customize the theme or configuration, please check Customize Theme and Customize Config.
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"export const App: FC = () => {return <Button>Click me!</Button>}
Edit this page on GitHub