Learn the Basics

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

Components

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

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"

Styling

Style Props is a prop that applies styles to elements using props. Style Props follows the CSS properties and provides all properties in camelCase.

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

Conditional Styles

Conditional styles allow you to apply styles to pseudo-elements, pseudo-classes, and selectors.

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

Color Schemes

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

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

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

Responsive Design

Responsive design refers to the breakpoints defined in the theme. Yamada UI has a default theme, and breakpoints are defined.

To apply responsive design to Style Props, set an object with the breakpoints as the key.

• The keys of the object define the keys set in the theme's breakpoints.
• The values of the object define the values of the styles set by the key.

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

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, set an array.

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

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

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///"😘

Learn more

Want to learn more about Yamada UI?😎