---
title: Components
description: "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](https://yamada-ui.com/docs/components/cli.md). The other is the traditional method of importing components from modules.

### Download

The cases for downloading components locally from [CLI](https://yamada-ui.com/docs/components/cli.md) are as follows.

- Customize the [variant](https://yamada-ui.com/docs/components/styled.md#variant-style) or [size](https://yamada-ui.com/docs/components/styled.md#size-style) 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.

```bash
pnpm yamada-cli add button
```

```bash
npm yamada-cli add button
```

```bash
yarn yamada-cli add button
```

```bash
bun yamada-cli add button
```

:::note
Yamada UI updates the components, you can easily update the components by checking the [Check Differences](https://yamada-ui.com/docs/components/cli.md#check-differences) or [Update Components](https://yamada-ui.com/docs/components/cli.md#update-components) in [CLI](https://yamada-ui.com/docs/components/cli.md). If your changes conflict with the updates, they will be displayed in the same way as the [HOW CONFLICTS ARE PRESENTED](https://git-scm.com/docs/git-merge#_how_conflicts_are_presented) of [Git](https://git-scm.com), 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.

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

```tsx
import { Button } from "@/components/ui"
```

```tsx
import { Button } from "@workspaces/ui"
```

## Components

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

- [Accordion](https://yamada-ui.com/docs/components/accordion.md)
- [ActionBar](https://yamada-ui.com/docs/components/action-bar.md)
- [Airy](https://yamada-ui.com/docs/components/airy.md)
- [Alert](https://yamada-ui.com/docs/components/alert.md)
- [AlphaSlider](https://yamada-ui.com/docs/components/alpha-slider.md)
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md)
- [AspectRatio](https://yamada-ui.com/docs/components/aspect-ratio.md)
- [Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md)
- [Avatar](https://yamada-ui.com/docs/components/avatar.md)
- [Badge](https://yamada-ui.com/docs/components/badge.md)
- [BarChart](https://yamada-ui.com/docs/components/bar-chart.md)
- [Bleed](https://yamada-ui.com/docs/components/bleed.md)
- [Blockquote](https://yamada-ui.com/docs/components/blockquote.md)
- [Box](https://yamada-ui.com/docs/components/box.md)
- [Breadcrumb](https://yamada-ui.com/docs/components/breadcrumb.md)
- [Button](https://yamada-ui.com/docs/components/button.md)
- [Calendar](https://yamada-ui.com/docs/components/calendar.md)
- [Card](https://yamada-ui.com/docs/components/card.md)
- [Carousel](https://yamada-ui.com/docs/components/carousel.md)
- [Center](https://yamada-ui.com/docs/components/center.md)
- [Chat](https://yamada-ui.com/docs/components/chat.md)
- [Checkbox](https://yamada-ui.com/docs/components/checkbox.md)
- [CheckboxCard](https://yamada-ui.com/docs/components/checkbox-card.md)
- [CircleProgress](https://yamada-ui.com/docs/components/circle-progress.md)
- [ClientOnly](https://yamada-ui.com/docs/components/client-only.md)
- [CloseButton](https://yamada-ui.com/docs/components/close-button.md)
- [Code](https://yamada-ui.com/docs/components/code.md)
- [Collapse](https://yamada-ui.com/docs/components/collapse.md)
- [ColorPicker](https://yamada-ui.com/docs/components/color-picker.md)
- [ColorSelector](https://yamada-ui.com/docs/components/color-selector.md)
- [ColorSwatch](https://yamada-ui.com/docs/components/color-swatch.md)
- [Container](https://yamada-ui.com/docs/components/container.md)
- [DataList](https://yamada-ui.com/docs/components/data-list.md)
- [DatePicker](https://yamada-ui.com/docs/components/date-picker.md)
- [Dockable](https://yamada-ui.com/docs/components/dockable.md)
- [DonutChart](https://yamada-ui.com/docs/components/donut-chart.md)
- [Drawer](https://yamada-ui.com/docs/components/drawer.md)
- [Dropzone](https://yamada-ui.com/docs/components/dropzone.md)
- [Editable](https://yamada-ui.com/docs/components/editable.md)
- [Em](https://yamada-ui.com/docs/components/em.md)
- [EmptyState](https://yamada-ui.com/docs/components/empty-state.md)
- [Fade](https://yamada-ui.com/docs/components/fade.md)
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md)
- [Field](https://yamada-ui.com/docs/components/field.md)
- [Fieldset](https://yamada-ui.com/docs/components/fieldset.md)
- [FileButton](https://yamada-ui.com/docs/components/file-button.md)
- [FileInput](https://yamada-ui.com/docs/components/file-input.md)
- [Flex](https://yamada-ui.com/docs/components/flex.md)
- [Flip](https://yamada-ui.com/docs/components/flip.md)
- [Float](https://yamada-ui.com/docs/components/float.md)
- [FocusLock](https://yamada-ui.com/docs/components/focus-lock.md)
- [For](https://yamada-ui.com/docs/components/for.md)
- [Form](https://yamada-ui.com/docs/components/form.md)
- [Format](https://yamada-ui.com/docs/components/format.md)
- [Grid](https://yamada-ui.com/docs/components/grid.md)
- [Group](https://yamada-ui.com/docs/components/group.md)
- [Heading](https://yamada-ui.com/docs/components/heading.md)
- [Highlight](https://yamada-ui.com/docs/components/highlight.md)
- [HStack](https://yamada-ui.com/docs/components/h-stack.md)
- [HueSlider](https://yamada-ui.com/docs/components/hue-slider.md)
- [Icon](https://yamada-ui.com/docs/components/icon.md)
- [IconButton](https://yamada-ui.com/docs/components/icon-button.md)
- [Image](https://yamada-ui.com/docs/components/image.md)
- [Indicator](https://yamada-ui.com/docs/components/indicator.md)
- [InfiniteScrollArea](https://yamada-ui.com/docs/components/infinite-scroll-area.md)
- [Input](https://yamada-ui.com/docs/components/input.md)
- [Kbd](https://yamada-ui.com/docs/components/kbd.md)
- [LineChart](https://yamada-ui.com/docs/components/line-chart.md)
- [Link](https://yamada-ui.com/docs/components/link.md)
- [LinkBox](https://yamada-ui.com/docs/components/link-box.md)
- [List](https://yamada-ui.com/docs/components/list.md)
- [Loading](https://yamada-ui.com/docs/components/loading.md)
- [Mark](https://yamada-ui.com/docs/components/mark.md)
- [Menu](https://yamada-ui.com/docs/components/menu.md)
- [Modal](https://yamada-ui.com/docs/components/modal.md)
- [Motion](https://yamada-ui.com/docs/components/motion.md)
- [NativePopover](https://yamada-ui.com/docs/components/native-popover.md)
- [NativeSelect](https://yamada-ui.com/docs/components/native-select.md)
- [NativeTable](https://yamada-ui.com/docs/components/native-table.md)
- [NumberInput](https://yamada-ui.com/docs/components/number-input.md)
- [Pagination](https://yamada-ui.com/docs/components/pagination.md)
- [PasswordInput](https://yamada-ui.com/docs/components/password-input.md)
- [PhoneInput](https://yamada-ui.com/docs/components/phone-input.md)
- [Picture](https://yamada-ui.com/docs/components/picture.md)
- [PieChart](https://yamada-ui.com/docs/components/pie-chart.md)
- [PinInput](https://yamada-ui.com/docs/components/pin-input.md)
- [Popover](https://yamada-ui.com/docs/components/popover.md)
- [Portal](https://yamada-ui.com/docs/components/portal.md)
- [Progress](https://yamada-ui.com/docs/components/progress.md)
- [QrCode](https://yamada-ui.com/docs/components/qr-code.md)
- [RadarChart](https://yamada-ui.com/docs/components/radar-chart.md)
- [RadialChart](https://yamada-ui.com/docs/components/radial-chart.md)
- [Radio](https://yamada-ui.com/docs/components/radio.md)
- [RadioCard](https://yamada-ui.com/docs/components/radio-card.md)
- [Rating](https://yamada-ui.com/docs/components/rating.md)
- [Reorder](https://yamada-ui.com/docs/components/reorder.md)
- [Resizable](https://yamada-ui.com/docs/components/resizable.md)
- [Ripple](https://yamada-ui.com/docs/components/ripple.md)
- [Rotate](https://yamada-ui.com/docs/components/rotate.md)
- [SaturationSlider](https://yamada-ui.com/docs/components/saturation-slider.md)
- [ScrollArea](https://yamada-ui.com/docs/components/scroll-area.md)
- [SegmentedControl](https://yamada-ui.com/docs/components/segmented-control.md)
- [Select](https://yamada-ui.com/docs/components/select.md)
- [Separator](https://yamada-ui.com/docs/components/separator.md)
- [Show](https://yamada-ui.com/docs/components/show.md)
- [SimpleGrid](https://yamada-ui.com/docs/components/simple-grid.md)
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md)
- [Slide](https://yamada-ui.com/docs/components/slide.md)
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md)
- [Slider](https://yamada-ui.com/docs/components/slider.md)
- [Slot](https://yamada-ui.com/docs/components/slot.md)
- [Snacks](https://yamada-ui.com/docs/components/snacks.md)
- [Spacer](https://yamada-ui.com/docs/components/spacer.md)
- [Stack](https://yamada-ui.com/docs/components/stack.md)
- [Stat](https://yamada-ui.com/docs/components/stat.md)
- [Status](https://yamada-ui.com/docs/components/status.md)
- [Steps](https://yamada-ui.com/docs/components/steps.md)
- [Swipeable](https://yamada-ui.com/docs/components/swipeable.md)
- [Switch](https://yamada-ui.com/docs/components/switch.md)
- [Table](https://yamada-ui.com/docs/components/table.md)
- [Tabs](https://yamada-ui.com/docs/components/tabs.md)
- [Tag](https://yamada-ui.com/docs/components/tag.md)
- [Text](https://yamada-ui.com/docs/components/text.md)
- [Textarea](https://yamada-ui.com/docs/components/textarea.md)
- [Timeline](https://yamada-ui.com/docs/components/timeline.md)
- [TimePicker](https://yamada-ui.com/docs/components/time-picker.md)
- [Tip](https://yamada-ui.com/docs/components/tip.md)
- [Toggle](https://yamada-ui.com/docs/components/toggle.md)
- [Tooltip](https://yamada-ui.com/docs/components/tooltip.md)
- [Tour](https://yamada-ui.com/docs/components/tour.md)
- [Tree](https://yamada-ui.com/docs/components/tree.md)
- [VisuallyHidden](https://yamada-ui.com/docs/components/visually-hidden.md)
- [VStack](https://yamada-ui.com/docs/components/v-stack.md)
- [Wrap](https://yamada-ui.com/docs/components/wrap.md)
- [ZStack](https://yamada-ui.com/docs/components/z-stack.md)