Components

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

Usage

Yamada UI provides components in two ways. One is a new method of downloading components locally from CLI. The other is the traditional method of importing components from modules.

Download

The cases for downloading components locally from CLI are as follows.

  • Customize the variant or size styles of the component.
  • Customize the initial value or logic of the component.
  • Fix a bug in the component's style or logic by directly modifying it.
pnpm yamada-cli add button

Import

If you want to use the component without making any changes, you can simply import the component from the module.

import { Button } from "@yamada-ui/react"

Components

Here's a list of all the components available in the library.

AccordionActionBarAlertAlphaSliderAspectRatioAutocompleteAvatarBadgeBleedBlockquoteBoxBreadcrumbButtonCalendarCardCarouselCenterChatCheckboxCheckboxCardCircleProgressCloseButtonCodeColorPickerColorSwatchContainerDataListDatePickerDockableDrawerDropzoneEditableEmEmptyStateFieldFieldsetFileButtonFileInputFlexFloatFormGridGroupHeadingHighlightHStackHueSliderIconIconButtonImageIndicatorInfiniteScrollAreaInputKbdLinkLinkBoxListMarkMenuModalNativePopoverNativeSelectNativeTableNumberInputPaginationPasswordInputPhoneInputPicturePinInputPopoverProgressQrCodeRadioRadioCardRatingReorderResizableSaturationSliderScrollAreaSegmentedControlSelectSeparatorSimpleGridSliderSnacksSpacerStackStatStatusStepsSwipeableSwitchTableTabsTagTextTextareaTimelineTimePickerTipToggleTooltipTourTreeVStackWrapZStackAreaChartBarChartDonutChartLineChartPieChartRadarChartRadialChartAiryCollapseFadeScaleFadeFlipLoadingMotionRippleRotateSkeletonSlideFadeSlideClientOnlyFocusLockForFormatPortalShowSlotVisuallyHidden