Keyboard Navigation

ARIA Roles and Attributes

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

Components

Forms

Toggle

CheckboxCard

Usage

Props

Theming

Accessibility

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.

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

Semantic Tokens

Yamada UI supports ready-to-use responsive styles.

Responsive Styles

All components in Yamada UI support dark mode.

Color Mode

How to create and reference CSS custom properties (variables) in Yamada UI.

CSS Custom Properties (Variables)

Yamada UI provides various functions that make CSS value functions more convenient.

CSS Value Functions

At-Rules

Yamada UI supports ready-to-use animations.

Animation

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.

A method for easily accessing CSS custom properties (variables) in the Yamada UI style system.

Interpolation

Global Styles

Reset Styles

Text and Layer 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

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

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

Stack

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

Container

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

Flex

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

Wrap

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

Center

`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

`Bleed` is a component used to extend elements beyond the boundaries of a container.

Bleed

`Float` is a component used to fix elements to the edges of a container.

Float

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

Separator

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

Divider

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

AspectRatio

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

Layouts

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

Text

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

Heading

`Blockquote` is a component that represents a quotation. By default, it renders a `blockquote` element.

Blockquote

`Em` is a component that represents emphasized text. By default, it renders a `em` element.

`Code` is a component that represents a code block. By default, it renders a `code` element.

Code

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

Highlight

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

Typography

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

FormControl

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

Fieldset

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

Button

`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

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

NumberInput

`PasswordInput` is a component that allows users to input passwords with a visibility toggle.

PasswordInput

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

PinInput

We are currently considering the development of `PhoneInput`.

PhoneInput

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

Textarea

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

Radio

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

RadioCard

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

Checkbox

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

Switch

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

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

Select

`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

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

Autocomplete

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

MultiAutocomplete

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

DatePicker

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

MultiDatePicker

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

RangeDatePicker

We are currently considering the development of `TimePicker`.

TimePicker

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

MonthPicker

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

YearPicker

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

ColorPicker

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

FileInput

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

FileButton

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

Dropzone

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

Slider

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

RangeSlider

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

HueSlider

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

AlphaSlider

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

SaturationSlider

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

Editable

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

Rating

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

SegmentedControl

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

`Tag` is a component used to categorize or organize items using keywords that describe them.

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

Badge

`Kbd` is a component that represents keyboard input.

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

List

`DataList` is used to display a list of data items.

DataList

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

Card

`Stat` is used to display numbers or data within a box.

Stat

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.

Key	Description	State
`Tab`	Focuses on a switch that is not disabled.	-
`Space`, `Enter`	Toggles the on/off state of the switch.	-

Component	Roles and Attributes	Usage
`Switch`	`role="switch"`	Indicates that it is a switch.
	`aria-checked`	Set to `"true"` if the switch is on, `"false"` if it is off.