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

`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 blockquote. By default, it renders a `blockquote` element.

Blockquote

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

`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

We are currently considering the development of `PasswordInput`.

PasswordInput

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

`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

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

RadioCard

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

Radio

We are currently considering the development of `RadioCard`.

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

CheckboxCard

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

Checkbox

We are currently considering the development of `CheckboxCard`.

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

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

Switch

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

Toggle

`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

MultiMultiDatePicker

`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

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

`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

Rating is a component that allows users to evaluate items, presented in the form of icons such as stars or hearts, and visually displays the rating selected by the user.

`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.

Forms

`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

We are currently considering the development of `DataList`.

DataList

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

`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

`Table` is a table component equipped with column sorting, row selection, and click event features.

Table

The `Table` is a component that provides features such as column sorting, row selection, and click events.

`PagingTable` is a table component with pagination functionality.

PagingTable

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

NativeTable

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

Calendar

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

LineChart

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

AreaChart

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

BarChart

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

PieChart

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

DonutChart

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

RadarChart

`RadialChart` is a component for drawing radial charts to compare multiple sets of data.

RadialChart

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

Carousel

`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

We are currently considering the development of `Dockable`.

Dockable

`ScrollArea` is a component that displays a customized scrollbar.

ScrollArea

`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

`ColorSwatch` is a component that displays color samples.

ColorSwatch

`ColorPicker`は、色の見本を表示するコンポーネントです。

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

Markdown

We are currently considering the development of `Timeline`.

Timeline

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

Data Display

`LinkBox` is a component that allows elements such as articles or cards to function as a single link.

LinkBox

`Link` is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.

Link

`Breadcrumb` is a component that helps users understand the hierarchy of a website.

Breadcrumb

`Pagination` is a component for managing the pagination and navigation of content.

Pagination

`Stepper` is a component that displays the progress of a multi-step process.

Stepper

Components such as `Link` and `Breadcrumb` are available to display hyperlinks and the location of pages within the project.

Navigation

`Accordion` is a component for a list that displays information in an expandable or collapsible manner.

Accordion

Components such as `Accordion` or `Tabs` are available to save display space while showing numerous items.

Components

Layouts

Typography

Forms

Data Display

Navigation

Disclosure

Overlay

Feedback

Media and Icons

Transitions

Other