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

`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

`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 labels, help messages, error messages, 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

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

Toggle

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

Form

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

Badge

`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

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

`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

`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

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

ScrollArea

`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

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

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

Data Display

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

Breadcrumb

`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

`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

`Tabs` is a component for switching between different display areas.

Tabs

We are currently considering the development of `Tree`.

Tree

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

Disclosure

We are currently considering the development of `ContextMenu`.

ContextMenu

`Dialog` is a component used to confirm or interrupt user actions.

Dialog

`Drawer` is a component for a panel that appears from the edge of the screen.

Drawer

`Menu` is a component that displays a common dropdown menu.

Modal

`Popover` is a component that floats around an element to display information.

Popover

`Tooltip` is a component that displays short information, such as supplementary details for an element.

Tooltip

We are currently considering the development of `Tour`.

Tour

Components such as `Modal` and `Drawer` are available to temporarily block interactions with the background UI.

Overlay

`Alert` is a component that conveys information to the user.

Alert

`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

`CircleProgress` is a component that displays progress in a circular progress bar.

CircleProgress

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

DonutChart

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

LineChart

`Loading` is a component displayed during waiting times, such as when data is being loaded.

Loading

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

PieChart

`Progress` is a component for visually indicating progress.

Progress

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

RadarChart

`Skeleton` is a component that acts as a placeholder until content is loaded.

Skeleton

Components such as `Alert` and `Skeleton` are available for notifying users and prompting them to wait while content is loading.

Feedback

`Avatar` is a component that displays a profile picture or an icon with initials representing a user.

Avatar

`@yamada-ui/fontawesome` provides convenient components for using `Font Awesome`.

Fontawesome Icon

Components such as `Icon` and `Image` are available to embed images and `svg` into your project.

Components