---
title: Learn the Basics
description: "Read a 3-minute tutorial to learn the basics of Yamada UI's components, styling, responsive design, and color mode."
---

# Learn the Basics

Read a 3-minute tutorial to learn the basics of Yamada UI's components, styling, responsive design, and color mode.

This guide will help you understand the concepts of Yamada UI. We recommend reading this guide before you start developing with Yamada UI.

:::tip
This guide is basic and is intended to give you a sense of the **fun** of developing with Yamada UI. Therefore, it does not explain each concept and feature in depth. If you want to know more, please check the links within the page.
:::

## Components

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

:::note
If you want to know more about the components, please check [this](https://yamada-ui.com/docs/components.md).
:::

## Styling

[Style Props](https://yamada-ui.com/docs/styling/style-props.md) is a prop that applies styles to elements using props. Style Props follows the [CSS properties](https://developer.mozilla.org/ja/docs/Web/CSS/Properties) and provides all properties in camelCase.

```tsx
<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>
```

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) uses [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). When the library is updated, Style Props is also updated periodically.
:::

### Conditional Styles

Conditional styles allow you to apply styles to [pseudo-elements](https://yamada-ui.com/docs/styling/style-props.md#pseudo-elements), [pseudo-classes](https://yamada-ui.com/docs/styling/style-props.md#pseudo-classes), and [selectors](https://yamada-ui.com/docs/styling/style-props.md#selectors).

```tsx
<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", _hover: "success" }}>
  Hover me
</Box>
```

:::note
If you want to know more about the styling, please check [this](https://yamada-ui.com/docs/styling.md).
:::

### Color Schemes

Color schemes generate a color context for the component based on the values. This improves consistency in colors.

```tsx
<VStack gap="md">
  <Box
    p="md"
    colorScheme="blue"
    bg="colorScheme.solid"
    color="colorScheme.contrast"
  >
    Solid
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Subtle
  </Box>
</VStack>
```

Color schemes inherit the color scheme of the parent element.

```tsx
<VStack gap="md" colorScheme="blue">
  <Box p="md" bg="colorScheme.solid" color="colorScheme.contrast">
    Provided by Parent
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Child
  </Box>
</VStack>
```

:::note
If you want to know more about the color schemes, please check [this](https://yamada-ui.com/docs/styling/color-scheme.md).
:::

## Responsive Design

Responsive design refers to the breakpoints defined in the theme. Yamada UI has a default theme, and [breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md) are defined.

To apply responsive design to [Style Props](https://yamada-ui.com/docs/styling/style-props.md), set an object with the breakpoints as the key.

- The keys of the object define the keys set in the theme's [breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md).
- The values of the object define the values of the styles set by the key.

```tsx
<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
  Box
</Box>
```

:::note
If you want to know more about the responsive design, please check [this](https://yamada-ui.com/docs/styling/responsive-design.md).
:::

## Color Mode

Yamada UI has built-in support for managing the application's color mode, allowing you to easily switch between light and dark modes. All provided components also support dark mode.

To apply color mode to [Style Props](https://yamada-ui.com/docs/styling/style-props.md), set an array.

- Set the value for light mode as the first element.
- Set the value for dark mode as the last element.

```tsx
<Box p="md" bg={["success", "warning"]} color="white">
  Box
</Box>
```

:::note
If you want to know more about the color mode, please check [this](https://yamada-ui.com/docs/styling/color-mode.md).
:::

## Congratulations!

Congratulations!🎉

This means you've become a **Regular Yamada**🥳

To the **Regular Yamada**, I'd like to give you this word.

"Next, I'm waiting for you in [Learn the Advanced](https://yamada-ui.com/docs/get-started/advanced.md)///"😘

## Learn more

Want to learn more about Yamada UI?😎

- [Learn the Advanced](https://yamada-ui.com/docs/get-started/advanced.md): Learn the applications of styling, responsiveness, dark mode, and animations of Yamada UI.
- [Explore the Components](https://yamada-ui.com/docs/components.md): Yamada UI provides over 130 flexible components. All components support animations and dark mode.
- [Learn the Styling](https://yamada-ui.com/docs/styling.md): All components are designed to be styled using props.
- [Explore the Source Code](https://github.com/yamada-ui/yamada-ui): Yamada UI's package and documentation site are open source. If you like Yamada UI, please star it.