How to install and use Yamada UI in your project.

Installation

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

Learn the Basics

Learn the applications of themes, styles, responsive, dark mode, and animations of Yamada UI.

Learn the Advanced

A guide to installing and using Yamada UI in your Create React App project.

Create React App

A guide to installing and using Yamada UI in your Next.js project.

Next.js

A guide to installing and using Yamada UI in your Vite project.

Vite

A guide to installing and using Yamada UI in your Remix project.

Remix

A guide to installing and using Yamada UI in your Gatsby project.

Gatsby

A guide to installing and using Yamada UI in your Hono project.

Hono

How to install and use Yamada UI for each framework.

Framework

Getting Started

Learn about Style props in Yamada UI. Style props is a method to change the style of a component just by passing props to the component.

Style Props

Default Theme

How to customize the default theme of Yamada UI.

Customize Theme

How to create and customize styles for components.

Component Styles

Switching Themes

The theme of Yamada UI is customizable and ensures the consistency of the application's design.

Theming

Default Config

How to customize the default config of Yamada UI.

Customize Config

The config of Yamada UI is a global setting used in various parts of the system.

Configure

Yamada UI supports ready-to-use responsive styles.

Responsive Styles

All components in Yamada UI support dark mode.

Color Mode

At-Rules

Yamada UI supports ready-to-use animations.

Animation

Yamada UI supports readily usable gradients.

Gradient

Semantic Tokens

Text and Layer Styles

Yamada UI supports the loading animations needed in applications.

Loading

Yamada UI supports the necessary notifications in the application.

Notification

How to generate JSX elements enabled with Yamada UI's style system.

Global Styles

Reset Styles

Generate types of customized themes using CLI commands.

Learn about the Style props and themes of Yamada UI. Style props is a method to change the style of a component just by passing props to the component.

Styled System

`AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.

AspectRatio

`Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.

`Center` is a component that aligns the child elements in the center within the component.

Center

`Container` is a component used as a general division element. By default, it renders the `section` element.

Container

`Divider` is a component that represents a division between elements.

Divider

`Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.

Flex

`Grid` is a component for managing grid layouts. It also comes with handy style shorthand.

Grid

`SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.

SimpleGrid

`Spacer` is a component used to add space between elements.

Spacer

`Stack` is a component that groups elements and provides spacing between child elements.

Stack

`Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`.

Wrap

Components for building the layout of the project, such as `Box` and `Stack`, are available.

Layout

`Heading` is a component that represents section headings. By default, it renders an `h1` element.

Heading

`Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.

Highlight

`Text` is a component that represents a paragraph of text. By default, it renders a `p` element.

Text

Components such as `Heading` and `Text` are available for constructing text in your project.

Typography

`AlphaSlider` is a component used to allow the user to select color transparency.

AlphaSlider

`Autocomplete` is a component used to display suggestions in response to user text input.

Autocomplete

`Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Button

`Checkbox` is a component used for allowing users to select multiple values from multiple options.

Checkbox

`ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.

ColorPicker

`DatePicker` is a component used for users to select a date.

DatePicker

`Dropzone` is a component used for uploading files via drag and drop.

Dropzone

`Editable` is a component used to obtain inline editable text input.

Editable

`Fieldset` is a component used to group elements such as legends, helper messages, and error messages in a fieldset element.

Fieldset

`FileButton` is a button component used for users to select files.

FileButton

`FileInput` is a component used for users to select files.

FileInput

`FormControl` is a component used to group form elements with label, helper message, error message, etc.

FormControl

`HueSlider` is a component used to allow the user to select a color hue.

HueSlider

`IconButton` is a component that displays an icon within a button.

IconButton

`Input` is a component used to obtain text input from the user.

Input

`MonthPicker` is a component used for users to select a month.

MonthPicker

`MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.

MultiAutocomplete

`MultiDatePicker` is a component used for users to select multiple dates.

MultiDatePicker

`MultiSelect` is a component used for allowing users to select multiple values from a list of options.

MultiSelect

`NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).

NativeSelect

`NumberInput` is a component used to obtain numeric input from the user.

NumberInput

We are currently considering the development of `PhoneInput`.

PhoneInput

`PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.

PinInput

`Radio` is a component used for allowing users to select one option from multiple choices.

Radio

`RangeDatePicker` is a component used for users to select a range of dates.

RangeDatePicker

`RangeSlider` is a component used for users to select a range of related values.

RangeSlider

`Rating` is a component used to allow users to provide ratings.

Rating

`SaturationSlider` is a component used to allow the user to select a color saturation.

SaturationSlider

`SegmentedControl` is a component used for allowing users to select one option from multiple choices.

SegmentedControl

`Select` is a component used for allowing a user to choose one option from a list.

Select

`Slider` is a component used for allowing users to select a value from a range.

Slider

`Switch` is a component used to toggle between on and off states.

Switch

`Textarea` is a component used to obtain multi-line text input.

Textarea

We are currently considering the development of `TimePicker`.

TimePicker

`Button` is a component that has two states: on or off.

Toggle

`YearPicker` is a component used for users to select a year.

YearPicker

Components for building forms in the project, such as `Input` and `Select`, are available.

Form

`AreaChart` is a component for drawing area charts to compare multiple sets of data.

AreaChart

`Badge` is a component that emphasizes the status of an item to make it immediately recognizable.

Badge

`BarChart` is a component for drawing bar charts to compare multiple sets of data.

BarChart

`Calendar` is a component for displaying or selecting dates in a calendar.

Calendar

`Card` is a component that groups and displays related information. By default, it renders a `section` element.

Card

`Carousel` is a component that displays multiple elements like a slideshow.

Carousel

`ColorSwatch` is a component that displays color samples.

ColorSwatch

We are currently considering the development of `Dockable`.

Dockable

`DonutChart` is a component for drawing donut charts to compare multiple sets of data.

DonutChart

`InfiniteScrollArea` is a component that provides infinite scrolling functionality. This component offers a smooth scrolling experience by automatically loading and displaying the next dataset when the end of the component is reached.

InfiniteScrollArea

`Kbd` is a component that represents keyboard input.

`LineChart` is a component for drawing line charts to compare multiple sets of data.

LineChart

`List` is a component for displaying lists. By default, it renders a `ul` element.

List

`Markdown` is a component that renders text in markdown format.

Markdown

`NativeTable` is a component for efficiently organizing and displaying data.

NativeTable

`PagingTable` is a table component with pagination functionality.

PagingTable

`PieChart` is a component for drawing pie charts to compare multiple sets of data.

PieChart

`RadarChart` is a component for drawing radar charts to compare multiple sets of data.

RadarChart

`Reorder` is a component that allows you to change the order of items using drag and drop.

Reorder

`Resizable` is accessible resizable panel groups and layouts with keyboard support.

Resizable

Components for constructing the display of project data, such as `Table` and `Calendar`, are available.

Data Display

Yamada UI provides prebuilt components to help you build projects faster.

Task	Title	Status	Priority
TASK-8782	DocumentationYou can't compress the program without quantifying the open-source SSD pixel!	In Progress	Medium
TASK-7878	DocumentationTry to calculate the EXE feed, maybe it will index the multi-byte pixel!	Backlog	Medium
TASK-7839	BugWe need to bypass the neural TCP card!	Todo	High
TASK-5562	FeatureThe SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!	Backlog	Medium
TASK-8686	FeatureI'll parse the wireless SSL protocol, that should driver the API panel!	Canceled	Medium
TASK-1280	BugUse the digital TLS panel, then you can transmit the haptic system!	Done	High
TASK-7262	FeatureThe UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!	Done	High
TASK-1138	FeatureGenerating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!	In Progress	Medium
TASK-7184	FeatureWe need to program the back-end THX pixel!	Todo	Low
TASK-5160	DocumentationCalculating the bus won't do anything, we need to navigate the back-end JSON protocol!	In Progress	High
TASK-5618	DocumentationGenerating the driver won't do anything, we need to index the online SSL application!	Done	Medium
TASK-6699	DocumentationI'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!	Backlog	Medium
TASK-2858	BugWe need to override the online UDP bus!	Backlog	Medium
TASK-9864	BugI'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!	Done	High
TASK-8404	BugWe need to generate the virtual HEX alarm!	In Progress	Low
TASK-5365	DocumentationBacking up the pixel won't do anything, we need to transmit the primary IB array!	In Progress	Low
TASK-1780	DocumentationThe CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!	Todo	High
TASK-6938	DocumentationUse the redundant SCSI application, then you can hack the optical alarm!	Todo	High
TASK-9885	BugWe need to compress the auxiliary VGA driver!	Backlog	High
TASK-3216	DocumentationTransmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!	Backlog	Medium

Check out some examples

Welcome back!

.css-11xuher{display:inline;}@media screen and (max-width: 768px){.css-11xuher{display:none;}}Check out some examples

Welcome back!

Check out some examples