Leave Yamada UI a star

Star
Yamada UIYamada UIv1.3.4

Installation

Install the package

You can use most components and hooks by installing @yamada-ui/react.

Execute one of the following commands in your terminal.

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
PackageDescription
@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.

Add UIProvider

After installing Yamada UI, add UIProvider to the root of your application.

import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<UIProvider>
<YourApplication />
</UIProvider>
)
}

Use components

Once you've added UIProvider, call the components within your application.

import { Button } from "@yamada-ui/react"
const Demo = () => {
return <Button>Click me!</Button>
}

With this, the setup for Yamada UI is complete!

Start learning

Why not learn the basics and themes to get to know Yamada UI? 😎

Learn the Basics

Read a 3-minute tutorial to learn the basics of Yamada UI's themes, styles, responsiveness, dark mode, and animations.

Learn about theming

Learn how to know the default theme of Yamada UI, and how to create and change colors, fonts, and other theme values.

Explore components

Yamada UI offers over 100 flexible components. All components support animations and dark mode.

Explore the source code

The packages and documentation site for Yamada UI are open source. If you like Yamada UI, please give it a star.

Edit this page on GitHub

PreviousGetting StartedNextLearn the Basics