Getting Started with Next.js
Install the package
First, create your application.
Execute one of the following commands in your terminal.
pnpm create next-app my-app --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 convenient table components using @tanstack/react-table. | |
| @yamada-ui/calendar | Provides convenient calendar and date picker components using dayjs. | |
| @yamada-ui/carousel | Provides convenient carousel components using embla-carousel-react. | |
| @yamada-ui/dropzone | Provides convenient dropzone components using react-dropzone. | |
| @yamada-ui/charts | Provides convenient chart components using recharts. | |
| @yamada-ui/markdown | Provides convenient markdown components using react-markdown and react-syntax-highlighter. | |
| @yamada-ui/fontawesome | Provides components for conveniently using Font Awesome. |
To install individual components or hooks for better 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.
layout.tsx
import { UIProvider } from "@yamada-ui/react"export default function RootLayout({children,}: {children: React.ReactNode}) {return (<html lang="en"><body><UIProvider>{children}</UIProvider></body></html>)}
The default theme is included within UIProvider.
If you want to customize the theme or config, please check Customize Theme and Customize Config.
Add ColorModeScript
To make the color mode work properly, you need 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.
layout.tsx
import { UIProvider, ColorModeScript } from "@yamada-ui/react"export default function RootLayout({children,}: {children: React.ReactNode}) {return (<html lang="en"><body><ColorModeScript /><UIProvider>{children}</UIProvider></body></html>)}
Use components
After adding UIProvider, you can call components within your application.
page.tsx
import { Button } from "@yamada-ui/react"export default function Home() {return <Button>Click me!</Button>}
Edit this page on GitHub