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
npm yamada-cli add button
yarn yamada-cli add button
bun yamada-cli add button
Yamada UI updates the components, you can easily update the components by checking the Check Differences or Update Components in CLI. If your changes conflict with the updates, they will be displayed in the same way as the HOW CONFLICTS ARE PRESENTED of Git, and you can easily resolve them.
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"
import { Button } from "@/components/ui"
import { Button } from "@workspaces/ui"
Components
Here's a list of all the components available in the library.
AccordionActionBarAlertAlphaSliderAspectRatioAutocompleteAvatarBadgeBleedBlockquoteBoxBreadcrumbButtonCalendarCardCarouselCenterChatCheckboxCheckboxCardCircleProgressCloseButtonCodeColorPickerColorSwatchContainerDataListDatePickerDockableDrawerDropzoneEditableEmEmptyStateFieldFieldsetFileButtonFileInputFlexFloatFormGridGroupHeadingHighlightHStackHueSliderIconIconButtonImageIndicatorInfiniteScrollAreaInputKbdLinkLinkBoxListMarkMenuModalNativePopoverNativeSelectNativeTableNumberInputPaginationPasswordInputPhoneInputPicturePinInputPopoverProgressQrCodeRadioRadioCardRatingReorderResizableSaturationSliderScrollAreaSegmentedControlSelectSeparatorSimpleGridSliderSnacksSpacerStackStatStatusStepsSwipeableSwitchTableTabsTagTextTextareaTimelineTimePickerTipToggleTooltipTourTreeVStackWrapZStackAreaChartBarChartDonutChartLineChartPieChartRadarChartRadialChartAiryCollapseFadeScaleFadeFlipLoadingMotionRippleRotateSkeletonSlideFadeSlideClientOnlyFocusLockForFormatPortalShowSlotVisuallyHidden