This is the full developer documentation for Yamada UI v2.
# CLI
## Usage
:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md).
:::
### Add Components
When you run the `add` command, the specified component and its dependencies will be added to your project.
```bash
pnpm yamada-cli add box
```
```bash
npm yamada-cli add box
```
```bash
yarn yamada-cli add box
```
```bash
bun yamada-cli add box
```
:::note
All components that the specified component depends on will also be added.
:::
If you don't specify a component, all available components will be added.
```bash
pnpm yamada-cli add
```
```bash
npm yamada-cli add
```
```bash
yarn yamada-cli add
```
```bash
bun yamada-cli add
```
```bash
Usage: pnpm yamada-cli add [options] [components...]
add a component to your project
Arguments:
components components to add
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-o, --overwrite overwrite existing files. (default: false)
-i, --install install dependencies (default: false)
-s, --sequential run tasks sequentially. (default: false)
-f, --format format the output files.
-l, --lint lint the output files.
-h, --help display help for command
```
### Check Differences
When you run the `diff` command, you can check the difference between the local and remote components.
```bash
pnpm yamada-cli diff box
```
```bash
npm yamada-cli diff box
```
```bash
yarn yamada-cli diff box
```
```bash
bun yamada-cli diff box
```
If you don't specify a component, you can check the difference for all components in your project.
```bash
pnpm yamada-cli diff
```
```bash
npm yamada-cli diff
```
```bash
yarn yamada-cli diff
```
```bash
bun yamada-cli diff
```
```bash
Usage: pnpm yamada-cli diff [options] [component]
check for updates against the registry
Arguments:
component component to check
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-s, --sequential run tasks sequentially. (default: false)
-d, --detail show detailed changes (default: false)
-h, --help display help for command
```
### Update Components
When you run the `update` command, the specified component will be updated.
```bash
pnpm yamada-cli update box
```
```bash
npm yamada-cli update box
```
```bash
yarn yamada-cli update box
```
```bash
bun yamada-cli update box
```
If you don't specify a component, all components in your project will be updated.
```bash
pnpm yamada-cli update
```
```bash
npm yamada-cli update
```
```bash
yarn yamada-cli update
```
```bash
bun yamada-cli update
```
```bash
Usage: pnpm yamada-cli update [options] [components...]
update components in your project
Arguments:
components components to update
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-i, --install install dependencies (default: false)
-s, --sequential run tasks sequentially. (default: false)
-f, --format format the output files.
-l, --lint lint the output files.
-h, --help display help for command
```
# createComponent
## Overview
`createComponent` creates a component that supports conditional styles such as variants. The created component can be inherited, has high extensibility, and generates `className` and `displayName`, so you can also create components with consistent naming conventions in your project.
## Usage
To create a single component, use [createComponent](#createcomponent), and to create a slot component, use [createSlotComponent](#createslotcomponent).
### createComponent
To create a single component, use `createComponent`.
```tsx
import type { HTMLStyledProps, ThemeProps } from "@yamada-ui/react"
import { createComponent, defineComponentStyle } from "@yamada-ui/react"
```
```tsx
import type { HTMLStyledProps, ThemeProps } from "@/components/ui"
import { createComponent, defineComponentStyle } from "@/components/ui"
```
```tsx
import type { HTMLStyledProps, ThemeProps } from "@workspaces/ui"
import { createComponent, defineComponentStyle } from "@workspaces/ui"
```
```tsx
const componentStyle = defineComponentStyle({
base: {
/* base style */
},
variants: {
/* variant style */
},
sizes: {
/* size style */
},
props: {
/* props style */
},
compounds: {
/* compound style */
},
defaultProps: {
/* default props */
},
})
type ComponentStyle = typeof componentStyle
export interface ComponentProps
extends HTMLStyledProps<"div">,
ThemeProps {}
const {
component,
ComponentContext,
PropsContext: ComponentPropsContext,
useComponentContext,
usePropsContext: useComponentPropsContext,
withContext,
useComponentProps,
} = createComponent("component", componentStyle)
export { ComponentPropsContext, useComponentPropsContext }
```
:::note
`defineComponentStyle` is a function that defines the component style. This function has an important role in type completion.
:::
- The first argument is the component name used for `className` and `displayName`.
- The second argument is the component style.
#### Create a component
To create a component, use `withContext`. Set the argument to the HTML element name or function. `withContext` uses the provided style and `PropsContext` props.
```tsx
export const Component = withContext("div")()
```
```tsx
export const Component = withContext((props) => {
return
})()
```
If you don't want to use the provided style and `PropsContext` props, or want to handle the logic, use `component`.
```tsx
export const Component = component((props) => {
const computedProps = useComponentProps(props)
return
})()
```
#### Calculate props
`withContext` and `component` can perform multi-stage calculations on the provided props.
```tsx
export const Component = withContext("button")(
{ "aria-label": "Default Label" },
({ "aria-label": ariaLabel, ...rest }) => ({
ariaLabel: ariaLabel === "Default Label" ? "Changed Label" : ariaLabel,
...rest,
}),
)
```
:::warning
For objects, they are deeply merged. For functions, you need to return the provided props. If you don't return the provided props, the provided props will be lost.
:::
#### Transfer props
Style props are filtered after calculating the styling. If you also want to use it in the component logic, use `transferProps`.
```tsx
export const Component = withContext(
({ size, ...rest }) => {
return
},
{
transferProps: ["size"],
},
)()
```
#### Inherit a component
`createComponent` created components can be inherited.
```tsx
import { Component } from "./component"
```
```tsx
const additionalComponentStyle = defineComponentStyle({
base: {
/* base style */
},
variants: {
/* variant style */
},
sizes: {
/* size style */
},
props: {
/* props style */
},
compounds: {
/* compound style */
},
defaultProps: {
/* default props */
},
})
type AdditionalComponentStyle = typeof additionalComponentStyle
export interface AdditionalComponentProps
extends HTMLStyledProps<"div">,
ThemeProps {}
const {
ComponentContext,
PropsContext: AdditionalComponentPropsContext,
useComponentContext,
usePropsContext: useAdditionalComponentPropsContext,
useComponentProps,
withContext,
component,
} = createComponent(
"additional-component",
additionalComponentStyle,
)
export { AdditionalComponentPropsContext, useAdditionalComponentPropsContext }
```
```tsx
export const AdditionalComponent = withContext(Component)()
```
This creates an `AdditionalComponent` that inherits `Component`.
The difference from the traditional component inheritance is that it can merge [ref](https://ja.react.dev/learn/referencing-values-with-refs), class names, styles, and [event handlers](https://ja.react.dev/learn/responding-to-events).
```tsx
export const AdditionalComponent: FC = ({
className,
...rest
}) => {
const ref = useRef(null)
const onClick = useCallback(() => {}, [])
return (
)
}
```
In this case, if `ref` and `onClick` exist in the provided props, they will be overwritten. Depending on the logic, it may not work well. To solve this, you need to merge each value and logic for each component.
```tsx
export const AdditionalComponent: FC = ({
ref: forwardedRef,
className,
onClick: onClickProp,
...rest
}) => {
const ref = useRef(null)
const onClick = useCallback(() => {}, [])
return (
)
}
```
By using `createComponent` to inherit a component, you can automatically merge event handlers such as `ref` and `onClick`.
:::note
If there is a style conflict, that is, each component has `variants`, the `variants` of the inherited component will take precedence.
:::
### createSlotComponent
To create a slot component, use `createSlotComponent`. The functionality is the same as [createComponent](#createcomponent).
```tsx
import type { HTMLStyledProps, ThemeProps } from "@yamada-ui/react"
import { createSlotComponent, defineComponentSlotStyle } from "@yamada-ui/react"
```
```tsx
import type { HTMLStyledProps, ThemeProps } from "@/components/ui"
import { createSlotComponent, defineComponentSlotStyle } from "@/components/ui"
```
```tsx
import type { HTMLStyledProps, ThemeProps } from "@workspaces/ui"
import { createSlotComponent, defineComponentSlotStyle } from "@workspaces/ui"
```
```tsx
const componentStyle = defineComponentSlotStyle({
base: {
root: {
/* base root style */
},
item: {
/* base item style */
},
},
variants: {
/* variant style */
},
sizes: {
/* size style */
},
props: {
/* props style */
},
compounds: {
/* compound style */
},
defaultProps: {
/* default props */
},
})
type ComponentStyle = typeof componentStyle
export interface ComponentRootProps
extends HTMLStyledProps<"div">,
ThemeProps {}
const {
ComponentContext,
PropsContext: ComponentPropsContext,
StyleContext,
useComponentContext,
usePropsContext: useComponentPropsContext,
useStyleContext,
useClassNames,
useRootComponentProps,
useSlotComponentProps,
withProvider,
withContext,
component,
} = createSlotComponent(
"component",
componentStyle,
)
export { ComponentPropsContext, useComponentPropsContext }
```
:::note
`defineComponentSlotStyle` is a function that defines the component style. This function has an important role in type completion.
:::
- The first argument is the component name prefix used for `className` and `displayName`.
- The second argument is the component style.
#### Create a component
To create a component, use `withProvider` and `withContext`. Each sets the argument to the HTML element name or function for the first argument, and the slot name for the second argument. `withProvider` uses the provided style and `PropsContext` props to generate a context. `withContext` uses the context generated by `withProvider` to use the style based on the slot name.
```tsx
export const RootComponent = withProvider("div", "root")()
export const ItemComponent = withContext("div", "item")()
```
```tsx
export const RootComponent = withProvider((props) => {
return
}, "root")()
export const ItemComponent = withContext((props) => {
return
}, "item")()
```
If you don't want to use the provided style and `PropsContext` props, or want to handle the logic, use `component`.
```tsx
export const RootComponent = component((props) => {
const [context, computedProps] = useRootComponentProps(props, "root")
return (
)
}, "root")()
export const ItemComponent = component((props) => {
const computedProps = useSlotComponentProps(props, "item")
return
}, "item")()
```
#### Use modifiers
To use modifiers, set the slot name to an array.
```tsx
const componentStyle = defineComponentSlotStyle({
base: {
root: {
/* base root style */
},
item: {
/* base item style */
},
start: {
/* base start style */
},
end: {
/* base end style */
},
},
})
```
```tsx
export const StartItemComponent = withContext("div", ["item", "start"])()
export const EndItemComponent = withContext("div", ["item", "end"])()
```
In this case, the style of `item` and `start` or `end` is set, and the class name is `"{prefix}-{name}__item--start"` or `"{prefix}-{name}__item--end"`.
# Components
## 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)
# Internationalization
## Overview
Internationalization is the process of structuring code and user interfaces to be localized. Yamada UI supports various localizations in many components, from built-in string translations to date and number formats. By using Yamada UI's components, these internationalizations are automatically handled.
## Localization
Localization is the process of adapting an application to a specific language or region. It includes adjustments such as text translations, date and number formats, and text search. Yamada UI supports localization in over 30 locales.
:::note
Yamada UI uses [Intl MessageFormat](https://formatjs.github.io/docs/intl-messageformat) internally.
:::
## Change the Locale
To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales).
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
:::note
Yamada UI automatically detects the locale using [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) and [Intl.DateTimeFormat.supportedLocalesOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf). After detection, it automatically updates using [languagechange](https://developer.mozilla.org/en-US/docs/Web/API/Window/languagechange_event). Therefore, when setting the locale to match the user's application, you do not need to set the `locale`.
:::
## Change the Label
To change the label, you need to download the `i18n-provider` using the [CLI](https://yamada-ui.com/docs/get-started/cli.md).
:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and run the `init` command. Please refer to [this](https://yamada-ui.com/docs/get-started/cli.md) for more details.
:::
### Add the Provider
Use the `add` command to add the `i18n-provider`.
```bash
pnpm yamada-cli add i18n-provider
```
```bash
npm yamada-cli add i18n-provider
```
```bash
yarn yamada-cli add i18n-provider
```
```bash
bun yamada-cli add i18n-provider
```
### Change the Language Data
The `i18n-provider`'s `intl` folder contains the data for each language. Change the data for the language you want to change.
```ts
import type { IntlData } from "."
const data: IntlData = {
/* ... */
avatar: {
"Avatar Icon": "ユーザーアイコン",
},
/* ... */
}
export default data
```
:::warning
The language data is based on English, and the English key is associated with the data for each language. If you change `en-US.ts`, you need to correct all language data. If you do not change it, the association of language data will be lost.
:::
## Add a Language
To add a language, you need to download the `i18n-provider` using the [CLI](https://yamada-ui.com/docs/get-started/cli.md).
:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and run the `init` command. Please refer to [this](https://yamada-ui.com/docs/get-started/cli.md) for more details.
:::
### Add the Provider
Use the `add` command to add the `i18n-provider`.
```bash
pnpm yamada-cli add i18n-provider
```
```bash
npm yamada-cli add i18n-provider
```
```bash
yarn yamada-cli add i18n-provider
```
```bash
bun yamada-cli add i18n-provider
```
### Add the Language Data
The `i18n-provider`'s `intl` folder contains the data for each language. Add the data for the new language. The data is copied and pasted from `intl/en-US.ts` and changed for each value.
```ts
import type { IntlData } from "."
const data: IntlData = {
autocomplete: {
"Clear value": "Giá trị xóa",
"No results found": "Không tìm thấy kết quả",
},
/* ... */
}
export default data
```
### Update the Index
Add the language data you added to `intl/index.ts`.
```ts
import arAE from "./ar-AE"
/* ... */
import viVN from "./vi-VN"
/* ... */
export default {
"ar-AE": arAE,
/* ... */
"vi-VN": viVN,
}
```
## Supported Locales
- Japanese (Japan)
- English (Great Britain)
- English (United States)
- Arabic (United Arab Emirates)
- Bulgarian (Bulgaria)
- Croatian (Croatia)
- Czech (Czech Republic)
- Danish (Denmark)
- Dutch (Netherlands)
- Estonian (Estonia)
- Finnish (Finland)
- French (Canada)
- French (France)
- German (Germany)
- Greek (Greece)
- Hebrew (Israel)
- Hungarian (Hungary)
- Italian (Italy)
- Latvian (Latvia)
- Lithuanian (Lithuania)
- Norwegian (Norway)
- Polish (Poland)
- Portuguese (Brazil)
- Romanian (Romania)
- Russian (Russia)
- Serbian (Serbia)
- Slovakian (Slovakia)
- Slovenian (Slovenia)
- Spanish (Spain)
- Swedish (Sweden)
- Turkish (Turkey)
- Ukrainian (Ukraine)
- Chinese (Simplified)
- Chinese (Traditional)
- Korean (Korea)
## Optimize the Bundle Size
Yamada UI includes the data for all of the languages above by default. This is convenient for many users, but it increases the bundle size. If your application does not support all of these locales, you can optimize the bundle size by removing unnecessary data from `intl/index.ts`.
# styled
## Overview
`styled` is an object of JSX elements enabled with Yamada UI's style system, and can also be used as a function for custom components to receive Yamada UI's style system.
## Usage
Use the `styled.` notation to generate an HTML element with [Style Props](https://yamada-ui.com/docs/styling/style-props.md).
For example, to generate an `button` element with [Style Props](https://yamada-ui.com/docs/styling/style-props.md), write ``.
```tsx
```
### Create a component
`styled` can be used in two ways: as an object of JSX elements (``) and as a function that returns a JSX element (`styled('div')`).
The function is suitable for generating simple components.
```tsx
import { styled } from "@workspaces/ui"
const Button = styled("button")
const App = () => {
return
}
```
You can also pass a custom component to the argument and generate a custom component with [Style Props](https://yamada-ui.com/docs/styling/style-props.md).
```tsx
import { styled } from "@workspaces/ui"
import { YourComponent } from "./your-component"
const NewComponent = styled(YourComponent)
const App = () => {
return
}
```
### Styling
You can set default styles for a component or set styles based on conditions such as `variant` and `size`.
#### Base Style
Base style sets the default styles for a component.
```tsx
const Button = styled("button", {
base: {
alignItems: "center",
appearance: "none",
cursor: "pointer",
display: "inline-flex",
fontWeight: "medium",
justifyContent: "center",
overflow: "hidden",
position: "relative",
rounded: "l2",
transitionDuration: "moderate",
transitionProperty: "common",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
_readOnly: { layerStyle: "readOnly" },
_disabled: { layerStyle: "disabled" },
},
})
```
#### Variant Style
Variant style sets styles based on the `variant` of the component.
```tsx
const Button = styled("button", {
variants: {
outline: {
layerStyle: "outline",
_hover: { layerStyle: "outline.hover" },
},
solid: {
layerStyle: "solid",
_hover: { layerStyle: "solid.hover" },
},
subtle: {
layerStyle: "subtle",
_hover: { layerStyle: "subtle.hover" },
},
},
})
```
To apply the variant style, set the `variant` value.
```tsx
```
Or, set the `variant` value in `defaultProps`.
```tsx
const Button = styled("button", {
defaultProps: {
variant: "solid",
},
})
```
#### Size Style
Size style sets styles based on the `size` of the component.
```tsx
const Button = styled("button", {
sm: {
fontSize: "sm",
gap: "2",
h: "9",
lineHeight: "{sizes.9}",
minW: "9",
px: "3",
_icon: { fontSize: "md" },
},
md: {
fontSize: "md",
gap: "2",
h: "10",
lineHeight: "{sizes.10}",
minW: "10",
px: "3",
_icon: { fontSize: "lg" },
},
lg: {
fontSize: "lg",
gap: "2.5",
h: "11",
lineHeight: "{sizes.11}",
minW: "11",
px: "4",
_icon: { fontSize: "2xl" },
},
})
```
To apply the size style, set the `size` value.
```tsx
```
Or, set the `size` value in `defaultProps`.
```tsx
const Button = styled("button", {
defaultProps: {
size: "sm",
},
})
```
#### Props Style
Props style sets styles based on the props of the component.
```tsx
const Button = styled("button", {
props: {
fullRounded: {
true: { rounded: "full" },
},
},
})
```
To apply the props style, set the value to the props you set.
```tsx
```
Or, set the value to the props you set in `defaultProps`.
```tsx
const Button = styled("button", {
defaultProps: {
fullRounded: true,
},
})
```
#### Compounds Style
Compounds style sets styles based on multiple conditions such as [variant style](https://yamada-ui.com/docs/components/styled.md#variant-style) and [size style](https://yamada-ui.com/docs/components/styled.md#size-style).
This is an example of setting additional styles when `variant` is `"solid"` and `fullRounded` is `true`.
```tsx
const Button = styled("button", {
compounds: [
{
variant: "solid",
fullRounded: true,
css: {
/* Additional styles */
},
},
],
})
```
By setting an array, you can match multiple conditions.
This is an example of setting additional styles when `variant` is `"solid"` or `"subtle"` and `fullRounded` is `true`.
```tsx
const Button = styled("button", {
compounds: [
{
variant: ["solid", "subtle"],
fullRounded: true,
css: {
/* Additional styles */
},
},
],
})
```
You can also use regular expressions.
```tsx
const Button = styled("button", {
compounds: [
{
variant: /^solid|subtle$/,
fullRounded: true,
css: {
/* Additional styles */
},
},
],
})
```
### Set className
```tsx
const Button = styled("button", {
className: "button",
})
```
### Set displayName
```tsx
const Button = styled("button", {
displayName: "Button",
})
```
### Forward props
`styled` filters [Style Props](https://yamada-ui.com/docs/styling/style-props.md) and forwards props to the provided component or HTML element. To set which props to forward, set `forwardProps` or `shouldForwardProp`.
For example, to forward `transition` to `YourComponent`, set `["transition"]` in `forwardProps`. This is an effective way when the props of [Style Props](https://yamada-ui.com/docs/styling/style-props.md) and `YourComponent` conflict.
```tsx
const Button = styled(YourComponent, {
forwardProps: ["transition"],
})
```
# Accessibility
We take care of many of the difficult implementation details related to accessibility, including `aria` and `role` attributes, focus management, and keyboard navigation. That means that users should be able to use our components as-is in most contexts and rely on functionality to follow the expected accessibility design patterns.
## WAI-ARIA
[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2) is developed by [W3C](https://www.w3.org) and defines the semantics of many common UI patterns seen in Yamada UI. This is designed to give meaning to controls built without using the browser-provided elements. For example, if you were to create a button using `div` instead of `button`, there are attributes that you would need to add to `div` to inform screen readers and speech recognition tools that it is a button.
In addition to semantics, there are also expected behaviors for different types of components. `button` is an example of a component that needs to be reimplemented using JavaScript because it has interactions that do not exist on `div`. [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg) provides additional guidance for implementing the behaviors of many of the controls that come with Yamada UI.
## Accessible Label
Many components are designed to provide semantic meaning and context to the corresponding input or select elements. For components that Yamada UI does not provide, [WAI-ARIA provides a specification](https://www.w3.org/TR/wai-aria-1.2/#namecalculation) that provides a specification for providing accessible names and descriptions for those components.
Yamada UI is as abstracted as possible and simplifies the labeling of components. [Field.Label](https://yamada-ui.com/docs/components/field.md) is designed to work with many of our components. Ultimately, it is your responsibility to provide labels so that users have the appropriate context when navigating your application.
## Keyboard Navigation
[Tabs](https://yamada-ui.com/docs/components/tabs.md) and [Modal](https://yamada-ui.com/docs/components/modal.md) are examples of complex components that require users to interact with content using keyboard and other non-mouse input modalities. Yamada UI provides basic keyboard support following the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg).
## Focus Management
Proper keyboard navigation and proper labeling are closely related to focus management. It is often helpful to move focus in response to an action when a user interacts with an element, and the result of that interaction changes something in the application, and the next focus should logically function according to the new context of the application. For users who use screen readers, moving focus is often accompanied by an announcement that conveys the new context, which is essential for proper labeling.
Many of Yamada UI's components move focus based on the actions that users typically perform on the components.
# Learn the Advanced
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.
:::
## Theme
Yamada UI has the same concept as other UI libraries, which is theme.
Theme is an object that can be changed and has [colors](https://yamada-ui.com/docs/theming/tokens/colors.md), [spaces](https://yamada-ui.com/docs/theming/tokens/spaces.md), [font sizes](https://yamada-ui.com/docs/theming/tokens/font-sizes.md), and many other tokens defined.
[Breakpoints](https://yamada-ui.com/docs/theming/breakpoints.md) and [color modes](https://yamada-ui.com/docs/theming/color-mode.md) used in applications can also be easily changed.
Also, [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md) that is not implemented in other UI libraries is supported.
```tsx
const { themeScheme, changeThemeScheme } = useTheme()
return (
The current scheme is "{themeScheme}"PrimarySecondaryPrimarySecondary
)
```
:::note
If you want to know more about the theme, please check [this](https://yamada-ui.com/docs/theming.md).
:::
### Layer Styles
Layer styles are tokens used to reuse visual styles across the project.
```tsx preview
{(token, index) => (
{toTitleCase(token)}
)}
```
:::note
If you want to know more about the layer styles, please check [this](https://yamada-ui.com/docs/styling/layer-styles.md).
:::
### Text Styles
Text styles are tokens used to reuse text styles across the project.
```tsx
Mono
```
:::note
If you want to know more about the text styles, please check [this](https://yamada-ui.com/docs/styling/text-styles.md).
:::
## Loading
Yamada UI supports loading animations needed for applications.
To execute the loading animation, use [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md). [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md) returns instances of `screen`, `page`, and `background`. The instances include several methods.
- `start`: Start the loading animation.
- `update`: Update the loading animation.
- `finish`: Finish the loading animation.
- `force`: Force update the loading animation.
```tsx
const { screen, page, background } = useLoading()
const onLoadingScreen = async () => {
try {
screen.start()
await wait(3000)
} finally {
screen.finish()
}
}
const onLoadingPage = async () => {
try {
page.start()
await wait(3000)
} finally {
page.finish()
}
}
const onLoadingBackground = async () => {
try {
background.start()
await wait(3000)
} finally {
background.finish()
}
}
return (
)
```
### Use useAsyncCallback
When executing asynchronous callbacks in applications, [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md) is useful to indicate whether a button or other elements are loading.
```tsx
const [loading, onClick] = useAsyncCallback(async () => {
await wait(3000)
}, [])
return (
)
```
`screen` and `page` can also be executed together.
```tsx
const [loading, onClick] = useAsyncCallback(
async () => {
await wait(3000)
},
[],
{ loading: "page" },
)
return (
)
```
:::note
If you want to know more about the loading animation, please check [this](https://yamada-ui.com/docs/hooks/use-loading.md).
:::
## Notice
Yamada UI supports notices needed for applications.
To display the notice, use [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md). [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md) returns an instance that displays and controls the notice.
```tsx
const notice = useNotice()
return (
)
```
:::note
If you want to know more about the notice, please check [this](https://yamada-ui.com/docs/hooks/use-notice.md).
:::
## Animation
Yamada UI provides components specialized in CSS animations and animations.
### CSS Animation
[@keyframes](https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes) to apply intermediate states of animations, use `_keyframes`.
```tsx
Box
```
Also, you can apply common keyframes throughout your application by using [theme](https://yamada-ui.com/docs/theming.md) [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md). Set the value to `animationName` or `_keyframes`.
```tsx
Box
```
:::note
If you want to know more about the animation, please check [this](https://yamada-ui.com/docs/styling/animation.md).
:::
### Motion
Yamada UI provides a convenient component that extends the Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) to [Motion](https://motion.dev).
```tsx
```
[Motion](https://yamada-ui.com/docs/components/motion.md) supports gesture animations.
- `whileHover`: The animation executed when the pointer is moved over the component.
- `whileTap`: The animation executed when the pointer is clicked or tapped on the component.
- `whileFocus`: The animation executed when the component is focused.
```tsx
Click me!
```
:::note
If you want to know more about the `Motion` component, please check [this](https://yamada-ui.com/docs/components/motion.md).
:::
## Congratulations!
Congratulations!🎉
This means you've become a **Wonderful Yamada**🥳
## Learn more
Want to learn more about Yamada UI?😎
- [Learn the Theme](https://yamada-ui.com/docs/theming.md): Yamada UI's theme is customizable and ensures consistency in the application's design.
- [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.
# 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.
:::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
```
:::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
Hover me
```
:::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
Solid
Subtle
```
Color schemes inherit the color scheme of the parent element.
```tsx
Provided by Parent
Child
```
:::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
```
:::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
```
:::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.
# CLI
## Installation
To use CLI, you need to install `@yamada-ui/cli` in your project.
```bash
pnpm add -D @yamada-ui/cli
```
```bash
npm i -D @yamada-ui/cli
```
```bash
yarn add -D @yamada-ui/cli
```
```bash
bun add -D @yamada-ui/cli
```
## Commands
### init
When you run the `init` command, the necessary files and folders for your project will be created.
```bash
pnpm yamada-cli init
```
```bash
npm yamada-cli init
```
```bash
yarn yamada-cli init
```
```bash
bun yamada-cli init
```
```bash
Usage: pnpm yamada-cli init [options]
initialize your project and install dependencies
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-o, --overwrite overwrite existing files. (default: false)
-j, --jsx use jsx instead of tsx (default: false)
-h, --help display help for command
```
After running the `init` command, you will see the following prompts.
```txt
Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes
```
After the prompts, the config and required dependencies will be installed.
### add
When you run the `add` command, the specified component and its dependencies will be added to your project.
```bash
pnpm yamada-cli add box
```
```bash
npm yamada-cli add box
```
```bash
yarn yamada-cli add box
```
```bash
bun yamada-cli add box
```
:::note
All components that the specified component depends on will also be added.
:::
If you don't specify a component, all available components will be added.
```bash
pnpm yamada-cli add
```
```bash
npm yamada-cli add
```
```bash
yarn yamada-cli add
```
```bash
bun yamada-cli add
```
```bash
Usage: pnpm yamada-cli add [options] [components...]
add a component to your project
Arguments:
components components to add
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-o, --overwrite overwrite existing files. (default: false)
-i, --install install dependencies (default: false)
-s, --sequential run tasks sequentially. (default: false)
-f, --format format the output files.
-l, --lint lint the output files.
-h, --help display help for command
```
### diff
When you run the `diff` command, you can check the difference between the local and remote components.
```bash
pnpm yamada-cli diff box
```
```bash
npm yamada-cli diff box
```
```bash
yarn yamada-cli diff box
```
```bash
bun yamada-cli diff box
```
If you don't specify a component, you can check the difference for all components in your project.
```bash
pnpm yamada-cli diff
```
```bash
npm yamada-cli diff
```
```bash
yarn yamada-cli diff
```
```bash
bun yamada-cli diff
```
```bash
Usage: pnpm yamada-cli diff [options] [component]
check for updates against the registry
Arguments:
component component to check
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-s, --sequential run tasks sequentially. (default: false)
-d, --detail show detailed changes (default: false)
-h, --help display help for command
```
### update
When you run the `update` command, the specified component will be updated.
```bash
pnpm yamada-cli update box
```
```bash
npm yamada-cli update box
```
```bash
yarn yamada-cli update box
```
```bash
bun yamada-cli update box
```
If you don't specify a component, all components in your project will be updated.
```bash
pnpm yamada-cli update
```
```bash
npm yamada-cli update
```
```bash
yarn yamada-cli update
```
```bash
bun yamada-cli update
```
```bash
Usage: pnpm yamada-cli update [options] [components...]
update components in your project
Arguments:
components components to update
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-i, --install install dependencies (default: false)
-s, --sequential run tasks sequentially. (default: false)
-f, --format format the output files.
-l, --lint lint the output files.
-h, --help display help for command
```
### theme
When you run the `theme` command, the theme will be generated at the specified path.
```bash
pnpm yamada-cli theme
```
```bash
npm yamada-cli theme
```
```bash
yarn yamada-cli theme
```
```bash
bun yamada-cli theme
```
:::note
If you don't specify a path, the theme will be generated in `./theme`.
:::
```bash
Usage: pnpm yamada-cli theme [options] [path]
generate theme to your project
Arguments:
path path to the theme directory
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-o, --overwrite overwrite existing directory. (default: false)
-j, --js use js instead of ts
-f, --format format the output files.
-l, --lint lint the output files.
-h, --help display help for command
```
### tokens
When you run the `tokens` command, you can update the customized theme typings.
This typings are used for [Style Props](https://yamada-ui.com/docs/styling/style-props.md).
```bash
pnpm yamada-cli tokens
```
```bash
npm yamada-cli tokens
```
```bash
yarn yamada-cli tokens
```
```bash
bun yamada-cli tokens
```
:::note
If you don't specify a path, the `theme.path` will be used.
:::
```bash
Usage: pnpm yamada-cli tokens [options] [path]
generate theme typings
Arguments:
path path to the theme file
Options:
--cwd current working directory
-c, --config path to the config file (default: "ui.json")
-o, --out output path
-f, --format format the output file
-l, --lint lint the output file
--internal generate internal tokens (default: false)
-h, --help display help for command
```
## Configuration
After running the `init` command, a `ui.json` will be generated in your project. You can customize it in various ways.
| Property | Default | Description |
| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |
| `path` | `./ui` | The path to the workspace. |
| `monorepo` | `false` | Whether to use a monorepo. |
| `jsx` | `false` | Whether to use JSX. |
| `theme.path` | `./theme` | The path to the theme directory. |
| `components.path` | `./components` | The path to the components directory. |
| `components.overwrite` | `true` | Whether to update the local references of existing components when components are added. |
| `components.dependents` | `true` | Whether to add dependents of components when components are added. |
| `components.dependencies` | `false` | Whether to add dependencies of components when components are added. |
| `hooks.path` | `./hooks` | The path to the hooks directory. |
| `hooks.overwrite` | `false` | Whether to update the local references of existing hooks when components are added. |
| `hooks.dependents` | `true` | Whether to add dependents of hooks when hooks are added. |
| `hooks.dependencies` | `false` | Whether to add dependencies of hooks when hooks are added. |
| `providers.path` | `./providers` | The path to the providers directory. |
| `providers.overwrite` | `false` | Whether to update the local references of existing providers when components are added. |
| `providers.dependents` | `true` | Whether to add dependents of providers when providers are added. |
| `providers.dependencies` | `false` | Whether to add dependencies of providers when providers are added. |
| `format.configPath` | - | The path to the config file for [Prettier](https://prettier.io). |
| `format.enabled` | `false` | Whether to run the `--write` option of [Prettier](https://prettier.io) when components are added or updated. |
| `lint.enabled` | `false` | Whether to run the `--fix` option of [ESLint](https://eslint.org) when components are added or updated. |
# Get Started
## Pick your framework
- [Next.js (App)](https://yamada-ui.com/docs/get-started/frameworks/next-app.md): A guide for installing and using Yamada UI with Next.js app directory.
- [Next.js (Pages)](https://yamada-ui.com/docs/get-started/frameworks/next-pages.md): A guide for installing and using Yamada UI with Next.js pages directory.
- [Vite](https://yamada-ui.com/docs/get-started/frameworks/vite.md): A guide for installing and using Yamada UI with Vite.js projects.
- [React Router](https://yamada-ui.com/docs/get-started/frameworks/react-router.md): A guide for installing and using Yamada UI with React Router projects.
## Installation
To install Yamada UI in your project, you can either set it up using the [CLI](https://yamada-ui.com/docs/get-started/cli.md) or install it via [npm](https://www.npmjs.com).
:::warning
Yamada UI is compatible with React 19. If you are using React 18 or earlier, please upgrade to React 19.
:::
### CLI
#### Setup
Running the command will create the necessary files and folders in your project.
```bash
pnpm dlx @yamada-ui/cli init
```
```bash
npx @yamada-ui/cli init
```
```bash
yarn dlx @yamada-ui/cli init
```
```bash
bunx @yamada-ui/cli init
```
#### Install the package
Install `@workspaces/ui` to your application.
```bash
pnpm add "@workspaces/ui@workspace:*"
```
```bash
npm install "@workspaces/ui@workspace:*"
```
```bash
yarn add "@workspaces/ui@workspace:*"
```
```bash
bun add "@workspaces/ui@workspace:*"
```
#### Add provider
After installing, add `UIProvider` to the root of your application.
```tsx
import { UIProvider } from "@workspaces/ui"
const App = () => {
return (
)
}
```
#### Use components
After adding `UIProvider`, you can use the components in your application.
```tsx
import { Button } from "@workspaces/ui"
const App = () => {
return
}
```
That's it! You've successfully set up Yamada UI.
### npm
#### Install the package
Yamada UI can be installed with `@yamada-ui/react` only, and all components and hooks can be used.
```bash
pnpm add @yamada-ui/react
```
```bash
npm install @yamada-ui/react
```
```bash
yarn add @yamada-ui/react
```
```bash
bun add @yamada-ui/react
```
#### Add provider
After installing, add `UIProvider` to the root of your application.
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
#### Use components
After adding `UIProvider`, you can use the components in your application.
```tsx
import { Button } from "@yamada-ui/react"
const App = () => {
return
}
```
That's it! You've successfully set up Yamada UI.
# Legacy Documentation
This is the documentation for Yamada UI v2.x. If you are looking for the documentation for v1.x, please see [this link](https://v1.yamada-ui.com).
# LLMs.txt
Yamada UI's documentation supports [LLMs.txt](https://llmstxt.org) to make it available for large language models.
## Files
- [/llms.txt](https://yamada-ui.com/llms.txt): The documentation site map.
- [/llms-full.txt](https://yamada-ui.com/llms-full.txt): All documentation.
- [/llms/get-started.txt](https://yamada-ui.com/llms/get-started.txt): Only the documentation for the Get Started.
- [/llms/components.txt](https://yamada-ui.com/llms/components.txt): Only the documentation for the Components.
- [/llms/hooks.txt](https://yamada-ui.com/llms/hooks.txt): Only the documentation for the Hooks.
- [/llms/styling.txt](https://yamada-ui.com/llms/styling.txt): Only the documentation for the Styling.
- [/llms/theming.txt](https://yamada-ui.com/llms/theming.txt): Only the documentation for the Theming.
## Usage
### Cursor
Use the [@Docs](https://cursor.com/docs/context/symbols#docs) of [Cursor](https://cursor.com) to add [llms.txt](https://yamada-ui.com/llms.txt) or [llms-full.txt](https://yamada-ui.com/llms-full.txt) to your project.
# Migration
## New Features
### Setup
Using [CLI](https://yamada-ui.com/docs/get-started/cli.md), you can easily set up Yamada UI in your project.
```bash
pnpm yamada-cli init
```
```bash
npm yamada-cli init
```
```bash
yarn yamada-cli init
```
```bash
bun yamada-cli init
```
`init` command will display the following prompts.
```txt
Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes
```
### Download
From v2.x onwards, there are two ways to use components and hooks. One is the new method of downloading components and hooks locally via the [CLI](https://yamada-ui.com/docs/components/cli.md), and the other is the conventional method of importing them from the module.
By downloading the source code, you can customize the initial value or logic of the component or hook, and if there is a bug in the logic, you can fix it directly.
```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
By downloading the source code and customizing it, you can easily update the source code 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.
:::
### Namespace Import
You can now import components using namespaces.
```tsx
```
:::note
You can still import components individually, but there are components whose names have changed due to the namespace. For example, in the case of `Accordion`, it has been changed to `AccordionRoot`.
:::
### createComponent
Using [createComponent](https://yamada-ui.com/docs/components/create-component.md), you can create components that support conditional styles such as variants.
```tsx
const componentStyle = defineComponentStyle({
base: {
/* base style */
},
variants: {
/* variant style */
},
sizes: {
/* size style */
},
props: {
/* props style */
},
compounds: {
/* compound style */
},
defaultProps: {
/* default props */
},
})
type ComponentStyle = typeof componentStyle
export interface ComponentProps
extends HTMLStyledProps<"div">,
ThemeProps {}
const {
component,
ComponentContext,
PropsContext: ComponentPropsContext,
useComponentContext,
usePropsContext: useComponentPropsContext,
withContext,
useComponentProps,
} = createComponent("component", componentStyle)
export { ComponentPropsContext, useComponentPropsContext }
```
```tsx
export const Component = withContext("div")()
```
### mergeProps
Using `mergeProps`, you can easily merge props while preventing props from disappearing. Previously, you had to create components while considering the provided props. Using `mergeProps`, you can focus on creating components without considering the provided props.
**Before**
```tsx
export const Component: FC = ({
ref: forwardedRef,
className,
onClick: onClickProp,
...rest
}) => {
const ref = useRef(null)
const onClick = useCallback(() => {}, [])
return (
)
}
```
**After**
```tsx
export const Component: FC = (props) => {
const ref = useRef(null)
const onClick = useCallback(() => {}, [])
return
}
```
### PropsContext
Using the `PropsContext` provided by each component, you can set the props of the components in the child elements in bulk.
```tsx
const value = useMemo(() => ({ variant: "outline" }), [])
return (
)
```
In the above example, the `Badge` in the child elements of `BadgePropsContext` will all have `variant` set to `"outline"`.
### Polymorphism
In addition to the traditional `as`, `asChild` has been added. `as` is used to change the element of the component itself, while `asChild` is used to incorporate the functionality and style of the component into the child elements.
**as**
```tsx
```
**asChild**
```tsx
```
### Cascade Layers
Using the [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) of CSS, [Theme](https://yamada-ui.com/docs/theming.md) and [Style Props](https://yamada-ui.com/docs/styling/style-props.md) now have priority. Please refer to [Cascade Layers](https://yamada-ui.com/docs/styling/cascade-layers.md) for more details.
### Focus Ring
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) has been added [Focus Ring](https://yamada-ui.com/docs/styling/focus-ring.md). Focus Ring is a style used to identify the focused element. Please refer to [Focus Ring](https://yamada-ui.com/docs/styling/focus-ring.md) for more details.
```tsx
```
```tsx
```
### Interpolation
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) now allows you to easily reference [CSS Custom Properties](https://yamada-ui.com/docs/styling/css-custom-properties.md) using its values. Please refer to [Interpolation](https://yamada-ui.com/docs/styling/interpolation.md) for more details.
```tsx
```
### CSS Custom Properties
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) now allows you to easily set [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var). Please refer to [CSS Custom Properties](https://yamada-ui.com/docs/styling/css-custom-properties.md) for more details.
```tsx
```
You can also reference the tokens of [Theme](https://yamada-ui.com/docs/theming.md).
```tsx
```
### CSS Value Functions
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) now allows you to use [CSS Value Functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) and reference the corresponding [Theme](https://yamada-ui.com/docs/theming.md) tokens. Please refer to [CSS Value Functions](https://yamada-ui.com/docs/styling/css-value-functions.md) for more details.
```tsx
```
```tsx
```
### At-rules
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) has been added [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule). Please refer to [At-rules](https://yamada-ui.com/docs/styling/at-rules.md) for more details.
```tsx
```
[Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) are also supported.
```tsx
```
### Internationalization
To improve accessibility, we have supported 30 or more languages, including strings embedded in all components, date and number formats. Please refer to [Internationalization](https://yamada-ui.com/docs/components/internationalization.md) for more details.
### Icons
New icons have been added. Please refer to [Icons](https://yamada-ui.com/icons.md) for more details.
### Style Props
New CSS properties have been added. Please refer to [Style Props](https://yamada-ui.com/docs/styling/style-props.md) for more details.
### Theme
- New [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md), [aspectRatios](https://yamada-ui.com/docs/theming/tokens/aspect-ratios.md), [easings](https://yamada-ui.com/docs/theming/tokens/easings.md), and [durations](https://yamada-ui.com/docs/theming/tokens/durations.md) have been added to the theme tokens.
- `"mono"` has been added to the [Color Schemes](https://yamada-ui.com/docs/theming/tokens/color-schemes.md).
- New tokens have been added to the [Layer Styles](https://yamada-ui.com/docs/theming/styles/layer-styles.md).
- New tokens have been added to the [Text Styles](https://yamada-ui.com/docs/theming/styles/text-styles.md).
- New tokens have been added to the [Colors](https://yamada-ui.com/docs/theming/tokens/colors.md).
- You can now set `className` in the style object of the components.
## Improvements
### styled
[ui](https://v1.yamada-ui.com/styled-system/ui) has been renamed to [styled](https://yamada-ui.com/docs/components/styled.md). Also, since only the base style of the component could be set until now, it is now possible to set styles that vary depending on conditions, such as `variants` and `sizes`.
**Before**
```tsx
const Button = styled("button", {
base: {
alignItems: "center",
appearance: "none",
cursor: "pointer",
display: "inline-flex",
fontWeight: "medium",
justifyContent: "center",
overflow: "hidden",
position: "relative",
rounded: "l2",
transitionDuration: "moderate",
transitionProperty: "common",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
_readOnly: { layerStyle: "readOnly" },
_disabled: { layerStyle: "disabled" },
},
})
```
**After**
```tsx
const Button = styled("button", {
base: {
alignItems: "center",
appearance: "none",
cursor: "pointer",
display: "inline-flex",
fontWeight: "medium",
justifyContent: "center",
overflow: "hidden",
position: "relative",
rounded: "l2",
transitionDuration: "moderate",
transitionProperty: "common",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
_readOnly: { layerStyle: "readOnly" },
_disabled: { layerStyle: "disabled" },
},
variants: {
outline: {
layerStyle: "outline",
_hover: { layerStyle: "outline.hover" },
},
solid: {
layerStyle: "solid",
_hover: { layerStyle: "solid.hover" },
},
subtle: {
layerStyle: "subtle",
_hover: { layerStyle: "subtle.hover" },
},
},
})
```
### Conditional Styles
Conditional style setting has been simplified. The traditional setting can still be used.
**Before**
```tsx
```
**After**
```tsx
```
### Color Scheme
Previously, the [Color Scheme](https://yamada-ui.com/docs/styling/color-scheme.md) was set as props for each component. By integrating `colorScheme` into [Style Props](https://yamada-ui.com/docs/styling/style-props.md), it is now available for components other than components.
```tsx
```
Also, since `colorScheme` uses [CSS Custom Properties](https://yamada-ui.com/docs/styling/css-custom-properties.md) to generate a context, it is now also applied to the child elements.
```tsx
```
### Animation
Previously, the [Animation](https://yamada-ui.com/docs/styling/animation.md) used the [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md) hook. Now, you can set it directly from [Style Props](https://yamada-ui.com/docs/styling/style-props.md).
**Before**
```tsx
const animation = useAnimation({
_keyframes: {
from: { translate: "0 0" },
to: { translate: "100% 0" },
},
duration: "1s",
iterationCount: "infinite",
timingFunction: "linear",
})
return
```
**After**
```tsx
```
### Components
- The styles of each component have been adjusted.
- The slot names of each component have been adjusted.
- The class names of each component have been adjusted.
- The naming convention of all boolean properties (`isOpen`, `isDisabled`, etc.) in the props of each component has been changed. For example, `isOpen` has been changed to `open`.
:::note
The improvement points of each component are described in the documentation of each component.
:::
### Style Props
- `color-mix` has been supported. If the browser does not support `color-mix`, the fallback value will be applied.
- `blur` and `brightness` can now be applied without setting `filter="auto"`.
- `backdropBlur` and `backdropBrightness` can now be applied without setting `backdropFilter="auto"`.
- `translateX` and `skewX` can now be applied without setting `transform="auto"` or `transform="auto-3d"`.
### Theme
- [CSS Value Functions](https://yamada-ui.com/docs/styling/css-value-functions.md) can now be used for tokens.
- [Interpolation](https://yamada-ui.com/docs/styling/interpolation.md) can now be used for tokens.
- [Theme](https://yamada-ui.com/docs/theming.md) can now be defined using `defineTheme`.
- Tokens can now be defined using `defineTokens`.
- Semantic tokens can now be defined using `defineSemanticTokens`.
- Styles can now be defined using `defineStyles`.
- [Config](https://yamada-ui.com/docs/theming/config.md) can now be defined using `defineConfig`.
- The slot names of the components have been adjusted and changed.
- The global styles have been adjusted.
- The reset styles have been adjusted.
- The values of the tokens have been adjusted.
## Removed Features
### Packages
[Tree Shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) considerations have made it unnecessary to divide each package, and since there is a possibility that other choices than [React](https://react.dev) will become available in future Yamada UI projects, these packages have been deprecated.
- [@yamada-ui/input](https://www.npmjs.com/package/@yamada-ui/input) has been deprecated. Use [@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react) instead.
- [@yamada-ui/use-disclosure](https://www.npmjs.com/package/@yamada-ui/use-disclosure) has been deprecated. Use [@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react) instead.
- [@yamada-ui/providers](https://www.npmjs.com/package/@yamada-ui/providers) has been deprecated. Use [@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react) instead.
- [@yamada-ui/theme](https://www.npmjs.com/package/@yamada-ui/theme) has been deprecated. Use [@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react) instead.
- [@yamada-ui/theme-tools](https://www.npmjs.com/package/@yamada-ui/theme-tools) has been deprecated. Use [@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react) instead.
- [@yamada-ui/next](https://www.npmjs.com/package/@yamada-ui/next) has been deprecated.
### Style Props
- `fallback` has been removed.
- `keyframes` has been removed. Use `_keyframes` instead.
- `isTruncated` has been removed. Use `truncated` instead.
### Theme
- `transitions` has been removed. Use [easings](https://yamada-ui.com/docs/theming/tokens/easings.md) and [durations](https://yamada-ui.com/docs/theming/tokens/durations.md) instead.
- `semantics` has been removed. Use `semanticTokens` instead.
- `components` has been removed. Use [CLI](https://yamada-ui.com/docs/components/cli.md) to style components.
- `extendBaseTheme` has been removed. Use `extendTheme` instead.
- `extendStyle` has been removed. Use `extendTheme` instead.
- `extendToken` has been removed. Use `extendTheme` instead.
- `extendComponent` has been removed.
- `extendComponentSize` has been removed.
- `extendComponentVariant` has been removed.
- `extendComponentDefaultProps` has been removed.
- `withDefaultSize` has been removed.
- `withDefaultVariant` has been removed.
- `withDefaultColorScheme` has been removed.
- `withDefaultProps` has been removed.
- `generate` has been removed.
### Other
- `forwardRef` has been removed. Use [forwardRef](https://react.dev/reference/react/forwardRef) instead.
- `memo` has been removed. Use [memo](https://react.dev/reference/react/memo) instead.
- `ui` has been removed. Use [styled](https://yamada-ui.com/docs/components/styled.md) instead.
- `sx` and `__css` have been removed. Use `css` instead.
## Added Components
### Mark
[Mark](https://yamada-ui.com/docs/components/mark.md) has been added.
### ClientOnly
[ClientOnly](https://yamada-ui.com/docs/components/client-only.md) has been added.
### Format.Datetime
[Format.Datetime](https://yamada-ui.com/docs/components/format.md#日付) has been added.
### Show
[Show](https://yamada-ui.com/docs/components/show.md) has been added.
### Slot
[Slot](https://yamada-ui.com/docs/components/slot.md) has been added.
### Steps
[Steps](https://yamada-ui.com/docs/components/steps.md) has been added.
### Group
[Group](https://yamada-ui.com/docs/components/group.md) has been added.
### Timeline
[Timeline](https://yamada-ui.com/docs/components/timeline.md) has been added.
## Removed Components
### FontAwesomeIcon
[FontAwesomeIcon](https://v1.yamada-ui.com/components/media-and-icons/fontawesome) has been removed.
### NativeImage
[NativeImage](https://v1.yamada-ui.com/components/media-and-icons/native-image) has been removed. Use [Image](https://yamada-ui.com/docs/components/image.md) instead.
### Dialog
[Dialog](https://v1.yamada-ui.com/components/overlay/dialog) has been removed. Use [Modal](https://yamada-ui.com/docs/components/modal.md#use-props) instead.
### ContextMenu
[ContextMenu](https://v1.yamada-ui.com/components/navigation/context-menu) has been removed. Use [Menu.ContextTrigger](https://yamada-ui.com/docs/components/menu.md#use-context-menu) instead.
### FormControl
[FormControl](https://v1.yamada-ui.com/components/forms/form-control) has been removed. Use [Field](https://yamada-ui.com/docs/components/field.md) instead.
### MultiAutocomplete
[MultiAutocomplete](https://v1.yamada-ui.com/components/forms/multi-autocomplete) has been removed. Use `multiple` of [Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md#enable-multiple-selection) instead.
### MultiDatePicker
[MultiDatePicker](https://v1.yamada-ui.com/components/forms/multi-date-picker) has been removed. Use `multiple` of [DatePicker](https://yamada-ui.com/docs/components/date-picker.md#enable-multiple-selection) instead.
### RangeDatePicker
[RangeDatePicker](https://v1.yamada-ui.com/components/forms/range-date-picker) has been removed. Use `range` of [DatePicker](https://yamada-ui.com/docs/components/date-picker.md#enable-range-selection) instead.
### MultiSelect
[MultiSelect](https://v1.yamada-ui.com/components/forms/multi-select) has been removed. Use `multiple` of [Select](https://yamada-ui.com/docs/components/select.md#enable-multiple-selection) instead.
### YearPicker
[YearPicker](https://v1.yamada-ui.com/components/forms/year-picker) has been removed.
### MonthPicker
[MonthPicker](https://v1.yamada-ui.com/components/forms/month-picker) has been removed.
### RangeSlider
[RangeSlider](https://v1.yamada-ui.com/components/forms/range-slider) has been removed. Use `value` or `defaultValue` of [Slider](https://yamada-ui.com/docs/components/slider.md#enable-range-selection) with an array instead.
### Markdown
[Markdown](https://v1.yamada-ui.com/components/data-display/markdown) has been removed.
### Stepper
[Stepper](https://v1.yamada-ui.com/components/navigation/stepper) has been removed. Use [Steps](https://yamada-ui.com/docs/components/steps.md) instead.
### Divider
[Divider](https://v1.yamada-ui.com/components/layouts/divider) has been removed. Use [Separator](https://yamada-ui.com/docs/components/separator.md) instead.
### PagingTable
[PagingTable](https://v1.yamada-ui.com/components/data-display/paging-table) has been removed. Use `enablePagination` of [Table](https://yamada-ui.com/docs/components/table.md#enable-pagination) instead.
## Components that have not been migrated
v2.0 does not have all components migrated. These will be migrated in v2.0.x.
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md)
- [BarChart](https://yamada-ui.com/docs/components/bar-chart.md)
- [DonutChart](https://yamada-ui.com/docs/components/donut-chart.md)
- [LineChart](https://yamada-ui.com/docs/components/line-chart.md)
- [PieChart](https://yamada-ui.com/docs/components/pie-chart.md)
- [RadarChart](https://yamada-ui.com/docs/components/radar-chart.md)
- [RadialChart](https://yamada-ui.com/docs/components/radial-chart.md)
## Added Hooks
### useCounter
[useCounter](https://yamada-ui.com/docs/hooks/use-counter.md) has been added.
### useDescendants
[useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md) has been added.
### useEyeDropper
[useEyeDropper](https://yamada-ui.com/docs/hooks/use-eye-dropper.md) has been added.
### useFocusOnShow
[useFocusOnShow](https://yamada-ui.com/docs/hooks/use-focus-on-show.md) has been added.
### useFormatDateTime
[useFormatDateTime](https://yamada-ui.com/docs/hooks/use-format-date-time.md) has been added.
### useOnline
[useOnline](https://yamada-ui.com/docs/hooks/use-online.md) has been added.
## Removed Hooks
### useToken
[useToken](https://v1.yamada-ui.com/hooks/use-token) has been removed.
# Hooks
## Usage
Yamada UI provides hooks in two ways. One is a new method of downloading hooks locally from [CLI](https://yamada-ui.com/docs/components/cli.md). The other is the traditional method of importing hooks from modules.
### Download
The cases for downloading hooks locally from [CLI](https://yamada-ui.com/docs/components/cli.md) are as follows.
- Customize the initial value or logic of the hook.
- Fix a bug in the hook's logic by directly modifying it.
```bash
pnpm yamada-cli add use-disclosure
```
```bash
npm yamada-cli add use-disclosure
```
```bash
yarn yamada-cli add use-disclosure
```
```bash
bun yamada-cli add use-disclosure
```
:::note
Yamada UI updates the hooks, you can easily update them in the same way as [Update Components](https://yamada-ui.com/docs/components/cli.md#update-components). 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 hook without making any changes, you can simply import the hook from the module.
```tsx
import { useDisclosure } from "@yamada-ui/react"
```
```tsx
import { useDisclosure } from "@/components/ui"
```
```tsx
import { useDisclosure } from "@workspaces/ui"
```
## Hooks
Here's a list of all the hooks available in the library.
- [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md)
- [useAsync](https://yamada-ui.com/docs/hooks/use-async.md)
- [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md)
- [useBoolean](https://yamada-ui.com/docs/hooks/use-boolean.md)
- [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md)
- [useBreakpointEffect](https://yamada-ui.com/docs/hooks/use-breakpoint-effect.md)
- [useBreakpointState](https://yamada-ui.com/docs/hooks/use-breakpoint-state.md)
- [useBreakpointValue](https://yamada-ui.com/docs/hooks/use-breakpoint-value.md)
- [useClipboard](https://yamada-ui.com/docs/hooks/use-clipboard.md)
- [useColorMode](https://yamada-ui.com/docs/hooks/use-color-mode.md)
- [useColorModeValue](https://yamada-ui.com/docs/hooks/use-color-mode-value.md)
- [useCounter](https://yamada-ui.com/docs/hooks/use-counter.md)
- [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md)
- [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md)
- [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md)
- [useEyeDropper](https://yamada-ui.com/docs/hooks/use-eye-dropper.md)
- [useFocusOnShow](https://yamada-ui.com/docs/hooks/use-focus-on-show.md)
- [useFormatByte](https://yamada-ui.com/docs/hooks/use-format-byte.md)
- [useFormatDateTime](https://yamada-ui.com/docs/hooks/use-format-date-time.md)
- [useFormatNumber](https://yamada-ui.com/docs/hooks/use-format-number.md)
- [useHover](https://yamada-ui.com/docs/hooks/use-hover.md)
- [useIdle](https://yamada-ui.com/docs/hooks/use-idle.md)
- [useInfiniteScroll](https://yamada-ui.com/docs/hooks/use-infinite-scroll.md)
- [useInterval](https://yamada-ui.com/docs/hooks/use-interval.md)
- [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md)
- [useLocalStorage](https://yamada-ui.com/docs/hooks/use-local-storage.md)
- [useMediaQuery](https://yamada-ui.com/docs/hooks/use-media-query.md)
- [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md)
- [useOs](https://yamada-ui.com/docs/hooks/use-os.md)
- [useOutsideClick](https://yamada-ui.com/docs/hooks/use-outside-click.md)
- [usePrevious](https://yamada-ui.com/docs/hooks/use-previous.md)
- [useProcessing](https://yamada-ui.com/docs/hooks/use-processing.md)
- [usePromiseDisclosure](https://yamada-ui.com/docs/hooks/use-promise-disclosure.md)
- [useResizeObserver](https://yamada-ui.com/docs/hooks/use-resize-observer.md)
- [useTheme](https://yamada-ui.com/docs/hooks/use-theme.md)
- [useTimeout](https://yamada-ui.com/docs/hooks/use-timeout.md)
- [useUpdateBreakpointEffect](https://yamada-ui.com/docs/hooks/use-update-breakpoint-effect.md)
- [useUpdateEffect](https://yamada-ui.com/docs/hooks/use-update-effect.md)
- [useValue](https://yamada-ui.com/docs/hooks/use-value.md)
- [useWindowEvent](https://yamada-ui.com/docs/hooks/use-window-event.md)
# useAnimation
```tsx
const animation = useAnimation({
keyframes: {
"0%": {
bg: "red.500",
},
"20%": {
bg: "green.500",
},
"40%": {
bg: "purple.500",
},
"60%": {
bg: "yellow.500",
},
"80%": {
bg: "blue.500",
},
"100%": {
bg: "red.500",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
})
return
```
## Usage
```tsx
import { useAnimation } from "@yamada-ui/react"
```
```tsx
import { useAnimation } from "@/components/ui"
```
```tsx
import { useAnimation } from "@workspaces/ui"
```
```tsx
const animation = useAnimation()
```
### Use Theme Tokens
To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the argument.
```tsx
const animation = useAnimation("gradient")
return
```
:::warning
By default, no animation tokens are defined.
:::
### Use Multiple Animations
To use multiple animations, set the arguments as an array.
```tsx
const animation = useAnimation([
{
keyframes: {
"0%": {
bg: "red.500",
},
"20%": {
bg: "green.500",
},
"40%": {
bg: "purple.500",
},
"60%": {
bg: "yellow.500",
},
"80%": {
bg: "blue.500",
},
"100%": {
bg: "red.500",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
},
{
keyframes: {
"0%": {
h: "xs",
},
"50%": {
h: "md",
},
"100%": {
h: "xs",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
},
{
keyframes: {
"0%": {
w: "full",
},
"50%": {
w: "50%",
},
"100%": {
w: "full",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
},
])
return (
)
```
### Use Responsive Design
To use responsive design, set the `animation` as a object.
```tsx
const desktopAnimation = useAnimation({
keyframes: {
"0%": {
bg: "red.500",
},
"20%": {
bg: "green.500",
},
"40%": {
bg: "purple.500",
},
"60%": {
bg: "yellow.500",
},
"80%": {
bg: "blue.500",
},
"100%": {
bg: "red.500",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
})
const tabletAnimation = useAnimation({
keyframes: {
"0%": {
bg: "cyan.500",
},
"20%": {
bg: "emerald.500",
},
"40%": {
bg: "pink.500",
},
"60%": {
bg: "amber.500",
},
"80%": {
bg: "sky.500",
},
"100%": {
bg: "cyan.500",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
})
return (
)
```
### Use Color Mode
To use color mode, pass an array to `animation`.
```tsx
const lightAnimation = useAnimation({
keyframes: {
"0%": {
bg: "red.500",
},
"20%": {
bg: "green.500",
},
"40%": {
bg: "purple.500",
},
"60%": {
bg: "yellow.500",
},
"80%": {
bg: "blue.500",
},
"100%": {
bg: "red.500",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
})
const darkAnimation = useAnimation({
keyframes: {
"0%": {
bg: "red.800",
},
"20%": {
bg: "green.800",
},
"40%": {
bg: "purple.800",
},
"60%": {
bg: "yellow.800",
},
"80%": {
bg: "blue.800",
},
"100%": {
bg: "red.800",
},
},
duration: "10s",
iterationCount: "infinite",
timingFunction: "linear",
})
return
```
# useAsyncCallback
```tsx
const [loading, onClick] = useAsyncCallback(async () => {
await wait(3000)
}, [])
return (
)
```
## Usage
```tsx
import { useAsyncCallback } from "@yamada-ui/react"
```
```tsx
import { useAsyncCallback } from "@/components/ui"
```
```tsx
import { useAsyncCallback } from "@workspaces/ui"
```
```tsx
const [loading, onClick] = useAsyncCallback(async () => {}, [])
```
### Use loading
When using loading, set `loading` to `screen` or `page` etc.
```tsx
const [loading, onClick] = useAsyncCallback(
async () => {
await wait(3000)
},
[],
{ loading: "page" },
)
return (
)
```
### Disable processing
When disabling processing, set `processing` to `false`.
```tsx
const [, onClick] = useAsyncCallback(
async () => {
await wait(3000)
},
[],
{ loading: "page", processing: false },
)
return
```
# useAsync
```tsx
const [flg, { toggle }] = useBoolean()
const { value, error, loading } = useAsync(
async () =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve("Succeeded.")
} else {
reject(new Error("A pseudo random error occurred."))
}
}, 3000)
}),
[flg],
)
return (
{loading ? (
Loading...
) : error ? (
Error: {error.message}
) : (
Value: {value}
)}
)
```
## Usage
```tsx
import { useAsync } from "@yamada-ui/react"
```
```tsx
import { useAsync } from "@/components/ui"
```
```tsx
import { useAsync } from "@workspaces/ui"
```
```tsx
const { value, error, loading } = useAsync(async () => {}, [])
```
# useBoolean
```tsx
const [flg, { on, off, toggle }] = useBoolean()
return (
state: {String(flg)}OnOffToggle
)
```
## Usage
```tsx
import { useBoolean } from "@yamada-ui/react"
```
```tsx
import { useBoolean } from "@/components/ui"
```
```tsx
import { useBoolean } from "@workspaces/ui"
```
```tsx
const [flg, { on, off, toggle }] = useBoolean()
```
### Using Initial Values
```tsx
const [flg, { on, off, toggle }] = useBoolean(true)
return (
state: {String(flg)}OnOffToggle
)
```
# useBreakpointEffect
```tsx
const [device, setDevice] = useState("mobile");
useBreakpointEffect(breakpoint => {
if (breakpoint === "sm") {
setDevice("mobile");
} else if (breakpoint === "md") {
setDevice("tablet");
} else {
setDevice("desktop");
}
}, []);
return The current device is "{device}";
```
## Usage
```tsx
import { useBreakpointEffect } from "@yamada-ui/react"
```
```tsx
import { useBreakpointEffect } from "@/components/ui"
```
```tsx
import { useBreakpointEffect } from "@workspaces/ui"
```
```tsx
const [device, setDevice] = useState("mobile")
useBreakpointEffect((breakpoint) => {
if (breakpoint === "sm") {
setDevice("mobile")
} else if (breakpoint === "md") {
setDevice("tablet")
} else {
setDevice("desktop")
}
}, [])
```
# useBreakpointState
```tsx
const [value, setValue] = useBreakpointState({ base: 1, md: 2 })
return (
)
```
## Usage
```tsx
import { useBreakpointState } from "@yamada-ui/react"
```
```tsx
import { useBreakpointState } from "@/components/ui"
```
```tsx
import { useBreakpointState } from "@workspaces/ui"
```
```tsx
const [value, setValue] = useBreakpointState({ base: 1, md: 2 })
```
# useBreakpointValue
```tsx
const breakpoint = useBreakpoint()
const bg = useBreakpointValue({
base: "red.500",
sm: "purple.500",
md: "yellow.500",
lg: "green.500",
xl: "blue.500",
"2xl": "pink.500",
})
return (
The current breakpoint is "{breakpoint}"
)
```
## Usage
```tsx
import { useBreakpointValue } from "@yamada-ui/react"
```
```tsx
import { useBreakpointValue } from "@/components/ui"
```
```tsx
import { useBreakpointValue } from "@workspaces/ui"
```
```tsx
const bg = useBreakpointValue({
base: "red.500",
sm: "purple.500",
md: "yellow.500",
lg: "green.500",
xl: "blue.500",
"2xl": "pink.500",
})
```
# useBreakpoint
```tsx
const breakpoint = useBreakpoint()
return The current breakpoint is "{breakpoint}".
```
## Usage
```tsx
import { useBreakpoint } from "@yamada-ui/react"
```
```tsx
import { useBreakpoint } from "@/components/ui"
```
```tsx
import { useBreakpoint } from "@workspaces/ui"
```
```tsx
const breakpoint = useBreakpoint()
```
:::note
The return value refers to the [breakpoint](https://yamada-ui.com/docs/theming/breakpoints.md) of the theme.
:::
# useClipboard
```tsx
const { onCopy, value, setValue, copied } = useClipboard()
return (
setValue(e.target.value)}
/>
)
```
## Usage
```tsx
import { useClipboard } from "@yamada-ui/react"
```
```tsx
import { useClipboard } from "@/components/ui"
```
```tsx
import { useClipboard } from "@workspaces/ui"
```
```tsx
const { onCopy, value, setValue, copied } = useClipboard("initial value")
```
### Using Initial Values
```tsx
const { onCopy, value, setValue, copied } = useClipboard("initial value")
return (
setValue(e.target.value)}
/>
)
```
### Change Timeout
To change the timeout, set a number(milliseconds) to the second argument. The default is `1500`.
```tsx
const { onCopy, value, setValue, copied } = useClipboard("", 5000)
return (
setValue(e.target.value)}
/>
)
```
### Copy the Specified Value
```tsx
const { onCopy, copied } = useClipboard()
const value = "Read-Only Value"
return (
)
```
# useColorModeValue
```tsx
const { colorMode } = useColorMode()
const color = useColorModeValue("green", "red")
return The current colorMode is "{colorMode}"
```
## Usage
```tsx
import { useColorModeValue } from "@yamada-ui/react"
```
```tsx
import { useColorModeValue } from "@/components/ui"
```
```tsx
import { useColorModeValue } from "@workspaces/ui"
```
```tsx
const color = useColorModeValue("green", "red")
```
:::tip
Color Mode overview is [here](https://yamada-ui.com/docs/styling/color-mode.md).
:::
# useColorMode
```tsx
const { colorMode } = useColorMode()
return The current colorMode is "{colorMode}"
```
## Usage
```tsx
import { useColorMode } from "@yamada-ui/react"
```
```tsx
import { useColorMode } from "@/components/ui"
```
```tsx
import { useColorMode } from "@workspaces/ui"
```
```tsx
const { changeColorMode, colorMode, internalColorMode, toggleColorMode } =
useColorMode()
```
:::tip
Color Mode overview is [here](https://yamada-ui.com/docs/styling/color-mode.md).
:::
### Switching Color Mode
- `colorMode`: Provides the current color mode.
- `internalColorMode`: Provides the current color mode including `system`.
```tsx
const { colorMode, internalColorMode, changeColorMode, toggleColorMode } =
useColorMode()
return (
The current colorMode is "{colorMode}", internal colorMode is "
{internalColorMode}"
)
```
# useCounter
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 10,
})
return (
Count: {value} increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
## Usage
```tsx
import { useCounter } from "@yamada-ui/react"
```
```tsx
import { useCounter } from "@/components/ui"
```
```tsx
import { useCounter } from "@workspaces/ui"
```
```tsx
const { value, valueAsNumber, update, increment, decrement, reset, cast, out } =
useCounter()
```
### Set Default Value
To set a default value, pass a number or string to `defaultValue`.
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 10,
})
return (
Count: {value} increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
### Set Min And Max Values
To set minimum and maximum values, set `min` or `max` to a number.
```tsx
const { value, increment, decrement, min, max, reset } = useCounter({
defaultValue: 5,
min: 0,
max: 10,
})
return (
Count: {value} increment()}
disabled={max}
>
+ 1
decrement()}
disabled={min}
>
- 1
Reset
)
```
### Set Step Value
To set a step value, pass a number to `step`.
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 0,
step: 5,
})
return (
Count: {value} increment()}
>
+ 5
decrement()}
>
- 5
Reset
)
```
```tsx
const { value, increment, decrement } = useCounter({
defaultValue: 0,
})
return (
Count: {value}
{(step) => (
increment(step)}>
+ {step}
)}
{(step) => (
decrement(step)}>
- {step}
)}
)
```
### Specify Precision
To specify precision, pass a number to `precision`.
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 5.123,
step: 0.1,
precision: 2,
})
return (
Count: {value} increment()}
>
+ 0.1
decrement()}
>
- 0.1
Reset
)
```
### Allow Out Of Range Values
To allow out of range values, set `keepWithinRange` to `false`. The `out` property is also provided to indicate whether the value is out of range.
```tsx
const { value, increment, decrement, out, reset } = useCounter({
defaultValue: 5,
min: 0,
max: 10,
keepWithinRange: false,
})
return (
Count: {value} {out ? "(Out Of Range)" : ""}
increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
### Cast Value
To cast value, use the `cast` function.
```tsx
const { value, setValue, cast } = useCounter({
defaultValue: 0,
precision: 2,
})
return (
setValue(e.target.value)}
onBlur={(e) => cast(e.target.value)}
/>
)
```
# useDescendants
```tsx
const { useDescendants, useDescendant, DescendantsContext } =
createDescendants()
const ref = useRef(null)
const descendants = useDescendants()
const onFocus = useCallback(
(ev: FocusEvent) => {
if (ev.target !== ref.current) return
const descendant = descendants.enabledFirstValue()
if (descendant) {
descendant.node.focus()
if (ref.current) ref.current.tabIndex = -1
}
},
[descendants],
)
const onBlur = useCallback((ev: FocusEvent) => {
if (contains(ref.current, ev.relatedTarget)) return
if (ref.current) ref.current.tabIndex = 0
}, [])
const Item: FC<{ index: number }> = ({ index }) => {
const { descendants, register } = useDescendant()
const onKeyDown = useCallback(
(ev: KeyboardEvent) => {
runKeyAction(ev, {
ArrowDown: () => {
const descendant = descendants.enabledNextValue(index)
if (descendant) descendant.node.focus()
},
ArrowUp: () => {
const descendant = descendants.enabledPrevValue(index)
if (descendant) descendant.node.focus()
},
Home: () => {
const descendant = descendants.enabledFirstValue()
if (descendant) descendant.node.focus()
},
End: () => {
const descendant = descendants.enabledLastValue()
if (descendant) descendant.node.focus()
},
})
},
[descendants],
)
return (
)
}
return (
{Array.from({ length: 5 }).map((_, index) => (
))}
)
```
# useDisclosure
```tsx
const { open, onOpen, onClose } = useDisclosure()
return (
<>
)
```
## Usage
```tsx
import { useDisclosure } from "@yamada-ui/react"
```
```tsx
import { useDisclosure } from "@/components/ui"
```
```tsx
import { useDisclosure } from "@workspaces/ui"
```
```tsx
const { open, onOpen, onClose, onToggle } = useDisclosure()
```
### Using Callback Functions
To use callback functions, assign a function to `onOpen` or `onClose`. This is useful for executing APIs or other logic before opening components such as [Modal](https://yamada-ui.com/docs/components/modal.md).
```tsx
const { open, onClose, onOpen } = useDisclosure({
onClose: (value) => {
console.log("onClose:", value)
},
onOpen: (value) => {
console.log("onOpen:", value)
},
})
return (
<>
onClose("This is arg")}
onClose={() => onClose("This is arg")}
onSuccess={() => onClose("This is arg")}
/>
)
```
By default, the callback functions are executed before `onOpen` or `onClose`. If you want the callbacks to be executed after `onOpen` or `onClose`, set the `timing` option to `"after"`.
```tsx
const { open, onClose, onOpen } = useDisclosure({
onClose: (value) => {
console.log("onClose:", value)
},
onOpen: (value) => {
console.log("onOpen:", value)
},
timing: "after",
})
return (
<>
onClose("This is arg")}
onClose={() => onClose("This is arg")}
onSuccess={() => onClose("This is arg")}
/>
)
```
# useDynamicAnimation
```tsx
const [animation, setAnimation] = useDynamicAnimation({
moveLeft: {
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0%)" },
},
timingFunction: "ease-in-out",
},
moveRight: {
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(100%)" },
},
timingFunction: "ease-in-out",
},
})
return (
Box
)
```
## Usage
```tsx
import { useDynamicAnimation } from "@yamada-ui/react"
```
```tsx
import { useDynamicAnimation } from "@/components/ui"
```
```tsx
import { useDynamicAnimation } from "@workspaces/ui"
```
```tsx
const [animation, setAnimation] = useDynamicAnimation()
```
### Use Theme Tokens
To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the keys as the animation names.
```tsx
const [animation, setAnimation] = useDynamicAnimation({
slideToLeft: "slide-to-right-full-reverse",
slideToRight: "slide-to-right-full",
})
return (
Box
)
```
:::warning
By default, no animation tokens are defined.
:::
### Use Multiple Animations
To use multiple animations, pass an object with the keys as the animation names.
```tsx
const [animation, setAnimation] = useDynamicAnimation({
moveLeft: [
{
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0%)" },
},
timingFunction: "ease-in-out",
},
{
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { bg: "green" },
"100%": { bg: "orange" },
},
timingFunction: "ease-in-out",
},
],
moveRight: [
{
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(100%)" },
},
timingFunction: "ease-in-out",
},
{
duration: "moderate",
fillMode: "forwards",
keyframes: {
"0%": { bg: "orange" },
"100%": { bg: "green" },
},
timingFunction: "ease-in-out",
},
],
})
return (
Box
)
```
# useEyeDropper
```tsx
const { supported, onOpen } = useEyeDropper()
const [color, setColor] = useState("#FF0000")
const onClick = async () => {
const result = await onOpen()
if (result) setColor(result.sRGBHex)
}
return (
{color}
EyeDropper API is not supported in this browser.
)
```
## Usage
```tsx
import { useEyeDropper } from "@yamada-ui/react"
```
```tsx
import { useEyeDropper } from "@/components/ui"
```
```tsx
import { useEyeDropper } from "@workspaces/ui"
```
```tsx
const { supported, onOpen } = useEyeDropper()
```
# useFocusOnShow
```tsx
const [visible, setVisible] = useState(false)
const ref = useRef(null)
const inputRef = useRef(null)
useFocusOnShow(ref, {
focusTarget: inputRef,
visible,
shouldFocus: true,
})
return (
)
```
## Usage
```tsx
import { useFocusOnShow } from "@yamada-ui/react"
```
```tsx
import { useFocusOnShow } from "@/components/ui"
```
```tsx
import { useFocusOnShow } from "@workspaces/ui"
```
```tsx
const ref = useRef(null)
const focusTargetRef = useRef(null)
useFocusOnShow(ref, {
focusTarget: focusTargetRef,
visible: true,
shouldFocus: true,
})
```
# useFormatByte
```tsx
const kilobyte = useFormatByte(1024)
const megabyte = useFormatByte(1024 * 1024)
const gigabyte = useFormatByte(1024 * 1024 * 1024)
const terabyte = useFormatByte(1024 * 1024 * 1024 * 1024)
return (
<>
{kilobyte}{megabyte}{gigabyte}{terabyte}
)
```
## Usage
```tsx
import { useFormatByte } from "@yamada-ui/react"
```
```tsx
import { useFormatByte } from "@/components/ui"
```
```tsx
import { useFormatByte } from "@workspaces/ui"
```
```tsx
const kilobyte = useFormatByte(1024)
```
:::note
`FormatByte` automatically selects the most appropriate unit (`byte`, `kB`, `MB`, `GB`, `TB`) based on the byte value size.
:::
:::note
`useFormatByte` internally uses [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
:::
### Changing the Locale
To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales).
```tsx
const enByte = useFormatByte(1024, { locale: "en-US" })
const jaByte = useFormatByte(1024, { locale: "ja-JP" })
const deByte = useFormatByte(1024, { locale: "de-DE" })
return (
en-US{enByte}ja-JP{jaByte}de-DE{deByte}
)
```
### Set the Locale for the Entire Application
If you want to set the locale for the entire application, set the `locale` for the `UIProvider`.
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
### Unit Format
To convert units, set `unit` to either `"byte"` or `"bit"`. The default is `"byte"`.
```tsx
const bytes = useFormatByte(1024, { unit: "byte" })
const bits = useFormatByte(1024, { unit: "bit" })
return (
Bytes{bytes}Bits{bits}
)
```
### Unit Display
To change the unit display, set a value for [unitDisplay](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay).
```tsx
const short = useFormatByte(1024, { unitDisplay: "short" })
const narrow = useFormatByte(1024, { unitDisplay: "narrow" })
const long = useFormatByte(1024, { unitDisplay: "long" })
return (
Short{short}Narrow{narrow}Long{long}
)
```
# useFormatDateTime
```tsx
const formattedValue = useFormatDateTime(new Date())
return {formattedValue}
```
## Usage
```tsx
import { useFormatDateTime } from "@yamada-ui/react"
```
```tsx
import { useFormatDateTime } from "@/components/ui"
```
```tsx
import { useFormatDateTime } from "@workspaces/ui"
```
```tsx
const formattedValue = useFormatDateTime(new Date())
```
It formats date time according to the specified locale and options. The hook returns the formatted value directly.
:::note
`useFormatDateTime` internally uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
:::
### Changing the Locale
To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales).
```tsx
const enValue = useFormatDateTime(new Date(), { locale: "en-US" })
const jaValue = useFormatDateTime(new Date(), { locale: "ja-JP" })
const deValue = useFormatDateTime(new Date(), { locale: "de-DE" })
const frValue = useFormatDateTime(new Date(), { locale: "fr-FR" })
const zhValue = useFormatDateTime(new Date(), { locale: "zh-CN" })
return (
en-US{enValue}ja-JP{jaValue}de-DE{deValue}fr-FR{frValue}zh-CN{zhValue}
)
```
### Set the Locale for the Entire Application
If you want to set the locale for the entire application, set the `locale` for the `UIProvider`.
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
### Converting to Year
To convert to year, set a value for [year](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#year).
```tsx
const formattedValue = useFormatDateTime(new Date(), { year: "numeric" })
return {formattedValue}
```
### Converting to Month
To convert to month, set a value for [month](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#month).
```tsx
const formattedValue = useFormatDateTime(new Date(), { month: "long" })
return {formattedValue}
```
### Converting to Day
To convert to day, set a value for [day](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#day).
```tsx
const formattedValue = useFormatDateTime(new Date(), { day: "2-digit" })
return {formattedValue}
```
### Converting to Weekday
To convert to weekday, set a value for [weekday](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday).
```tsx
const formattedValue = useFormatDateTime(new Date(), { weekday: "long" })
return {formattedValue}
```
# useFormatNumber
```tsx
const formattedValue = useFormatNumber(1234567.89)
return {formattedValue}
```
## Usage
```tsx
import { useFormatNumber } from "@yamada-ui/react"
```
```tsx
import { useFormatNumber } from "@/components/ui"
```
```tsx
import { useFormatNumber } from "@workspaces/ui"
```
```tsx
const formattedValue = useFormatNumber(1234567.89)
```
It formats numbers according to the specified locale and options. The hook returns the formatted value directly.
:::note
`useFormatNumber` internally uses [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
:::
### Changing the Locale
To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales).
```tsx
const enValue = useFormatNumber(1234567.89, { locale: "en-US" })
const jaValue = useFormatNumber(1234567.89, { locale: "ja-JP" })
const deValue = useFormatNumber(1234567.89, { locale: "de-DE" })
const frValue = useFormatNumber(1234567.89, { locale: "fr-FR" })
const zhValue = useFormatNumber(1234567.89, { locale: "zh-CN" })
return (
en-US{enValue}ja-JP{jaValue}de-DE{deValue}fr-FR{frValue}zh-CN{zhValue}
)
```
### Set the Locale for the Entire Application
If you want to set the locale for the entire application, set the `locale` for the `UIProvider`.
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
### Converting to Currency
To convert to currency, set `"currency"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style).
```tsx
const usdValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "USD",
locale: "en-US",
})
const eurValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "EUR",
locale: "de-DE",
})
const jpyValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "JPY",
locale: "ja-JP",
})
return (
USD{usdValue}EUR{eurValue}JPY{jpyValue}
)
```
### Converting to Units
To convert to units, set `"unit"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style).
```tsx
const kilogramValue = useFormatNumber(100, {
style: "unit",
unit: "kilogram",
})
const celsiusValue = useFormatNumber(100, {
style: "unit",
unit: "celsius",
unitDisplay: "long",
})
const speedValue = useFormatNumber(100, {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow",
})
return (
{kilogramValue}{celsiusValue}{speedValue}
)
```
### Converting to Percent
To convert to percent, set `"percent"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style).
```tsx
const percent1Value = useFormatNumber(0.45, { style: "percent" })
const percent2Value = useFormatNumber(0.45, {
style: "percent",
minimumFractionDigits: 2,
})
return (
{percent1Value}{percent2Value}
)
```
### Converting Notation
To convert notation, set a value for [notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation).
```tsx
const standardValue = useFormatNumber(1234567.89, { notation: "standard" })
const scientificValue = useFormatNumber(1234567.89, { notation: "scientific" })
const engineeringValue = useFormatNumber(1234567.89, {
notation: "engineering",
})
const compactValue = useFormatNumber(1234567.89, { notation: "compact" })
return (
{standardValue}{scientificValue}{engineeringValue}{compactValue}
)
```
### Controlling Decimal Places
To control the number of decimal places, use [minimumFractionDigits](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) and [maximumFractionDigits](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits).
```tsx
const fixed2Value = useFormatNumber(1234.5, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
const range03Value = useFormatNumber(1234.567, {
minimumFractionDigits: 0,
maximumFractionDigits: 3,
})
const fixed4Value = useFormatNumber(1234, {
minimumFractionDigits: 4,
maximumFractionDigits: 4,
})
return (
{fixed2Value}{range03Value}{fixed4Value}
)
```
### Disabling Grouping
To disable grouping, set `false` for [useGrouping](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#usegrouping).
```tsx
const noGroupingValue = useFormatNumber(1234567.89, { useGrouping: false })
return {noGroupingValue}
```
### Changing the Sign Display
To change the sign display, set a value for [signDisplay](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay).
```tsx
const alwaysValue = useFormatNumber(1234.5, { signDisplay: "always" })
const exceptZeroValue = useFormatNumber(-1234.5, { signDisplay: "exceptZero" })
return (
{alwaysValue}{exceptZeroValue}
)
```
# useHover
```tsx
const { hovered, ref } = useHover()
return (
{hovered ? "I am hovered" : "Put mouse over me please"}
)
```
## Usage
```tsx
import { useHover } from "@yamada-ui/react"
```
```tsx
import { useHover } from "@/components/ui"
```
```tsx
import { useHover } from "@workspaces/ui"
```
```tsx
const { hovered, ref } = useHover()
```
# useIdle
```tsx
const idle = useIdle(2000)
return Current state: {idle ? "idle" : "not idle"}
```
## Usage
```tsx
import { useIdle } from "@yamada-ui/react"
```
```tsx
import { useIdle } from "@/components/ui"
```
```tsx
import { useIdle } from "@workspaces/ui"
```
```tsx
const idle = useIdle(2000)
```
# useInfiniteScroll
```tsx
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
## Usage
```tsx
import { useInfiniteScroll } from "@yamada-ui/react"
```
```tsx
import { useInfiniteScroll } from "@/components/ui"
```
```tsx
import { useInfiniteScroll } from "@workspace/ui"
```
```tsx
const { ref, finish } = useInfiniteScroll()
```
### Specify the Viewport
To specify the viewport, set a `ref` to `rootRef`.
:::note
If `rootRef` is not set, the browser's viewport will be used.
:::
```tsx
const rootRef = useRef(null)
const resetRef = useRef<() => void>(noop)
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
resetRef,
rootRef,
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
### Set rootMargin
To set [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin), assign a string to rootMargin.
```tsx
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
rootMargin: "300px 0px 0px 0px",
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
### Set threshold
To set [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold), assign a number to `threshold`.
```tsx
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
threshold: 1,
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
### Initial Load
To load initially, set `initialLoad` to `true`. By default, `initialLoad` is set to `false`, and the initial(`index=0`) `onLoad` is not executed.
`true`: The first `onLoad` is executed regardless of the scroll amount, and the provided `index` starts from `0`.\
`false`: `onLoad` is executed when a certain scroll is reached, and the provided `index` starts from `1`.
```tsx
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
initialLoad: true,
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
### Change the Starting index
To change the starting index, set a number to `startIndex`. The default is `1`.
```tsx
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
startIndex: 3,
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
{!finish ? (
) : null}
)
```
### Reverse
To reverse, set `reverse` to `true`. The default is `false`.
```tsx
const rootRef = useRef(null)
const [count, setCount] = useState(50)
const { ref, finish } = useInfiniteScroll({
reverse: true,
rootRef,
onLoad: ({ finish, index }) => {
console.log("onLoad", index)
setCount((prev) => prev + 50)
if (index >= 5) finish()
},
})
return (
{!finish ? (
) : null}
{Array(count)
.fill(0)
.map((_, index) => (
天元突破グレンラガン
いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
))}
)
```
# useInterval
```tsx
const [state, setState] = useState(1)
useInterval(() => setState((prev) => prev + 1), 3000)
return Current state: {state}
```
## Usage
```tsx
import { useInterval } from "@yamada-ui/react"
```
```tsx
import { useInterval } from "@/components/ui"
```
```tsx
import { useInterval } from "@workspaces/ui"
```
```tsx
const [state, setState] = useState(1)
useInterval(() => setState((prev) => prev + 1), 3000)
```
# useLoading
```tsx
const { screen, page, background } = useLoading()
const onLoadingScreen = async () => {
try {
screen.start()
await wait(3000)
} finally {
screen.finish()
}
}
const onLoadingPage = async () => {
try {
page.start()
await wait(3000)
} finally {
page.finish()
}
}
const onLoadingBackground = async () => {
try {
background.start()
await wait(3000)
} finally {
background.finish()
}
}
return (
)
```
## Usage
```tsx
import { useLoading } from "@yamada-ui/react"
```
```tsx
import { useLoading } from "@/components/ui"
```
```tsx
import { useLoading } from "@workspaces/ui"
```
```tsx
const { screen, page, background } = useLoading()
```
`useLoading` returns instances of `screen`, `page`, and `background`. Each instance provides several methods:
- `start`: Starts the loading animation.
- `update`: Updates the loading animation.
- `finish`: Finishes the loading animation.
- `force`: Forces the loading animation to update.
### Change Loading Scheme
```tsx
const { screen, page, background } = useLoading()
return (
)
```
### Set Duration
To set the duration, set a number (milliseconds) to `duration`.
```tsx
const { screen, page, background } = useLoading()
return (
)
```
### Set Message
To set a message, set a `ReactNode` to `message`.
```tsx
const { screen, page, background } = useLoading()
return (
)
```
### Update Message
To update a message, use `update`.
```tsx
const { screen, page, background } = useLoading()
const onLoadingScreen = async () => {
try {
screen.start({ message: "Loading" })
await wait(3000)
screen.update({ message: "Please Wait" })
await wait(3000)
} finally {
screen.finish()
}
}
const onLoadingPage = async () => {
try {
page.start({ message: "Loading" })
await wait(3000)
page.update({ message: "Please Wait" })
await wait(3000)
} finally {
page.finish()
}
}
const onLoadingBackground = async () => {
try {
background.start({ message: "Loading" })
await wait(3000)
background.update({ message: "Please Wait" })
await wait(3000)
} finally {
background.finish()
}
}
return (
)
```
## Configuration
### Change Loading Scheme
```tsx
const config = extendConfig({
loading: {
background: { loadingScheme: "puff" },
page: { loadingScheme: "dots" },
screen: { loadingScheme: "grid" },
},
})
const App: FC = () => {
const { screen, page, background } = useLoading()
return (
)
}
return (
)
```
# useLocalStorage
```tsx
const [value, setValue, resetValue] = useLocalStorage({
key: "value",
defaultValue: 1,
})
return (
)
```
## Usage
```tsx
import { useLocalStorage } from "@yamada-ui/react"
```
```tsx
import { useLocalStorage } from "@/components/ui"
```
```tsx
import { useLocalStorage } from "@workspaces/ui"
```
```tsx
const [value, setValue, resetValue] = useLocalStorage({
key: "value",
defaultValue: 1,
})
```
# useMediaQuery
```tsx
const large = useMediaQuery("(min-width: 1280px)")
return {large ? "larger than 1280px" : "smaller than 1280px"}
```
## Usage
```tsx
import { useMediaQuery } from "@yamada-ui/react"
```
```tsx
import { useMediaQuery } from "@/components/ui"
```
```tsx
import { useMediaQuery } from "@workspaces/ui"
```
```tsx
const large = useMediaQuery("(min-width: 1280px)")
```
# useNotice
```tsx
const notice = useNotice()
return (
)
```
## Usage
```tsx
import { useNotice } from "@yamada-ui/react"
```
```tsx
import { useNotice } from "@/components/ui"
```
```tsx
import { useNotice } from "@workspaces/ui"
```
```tsx
const notice = useNotice()
```
### Change Variant
```tsx
const notice = useNotice()
return (
{(variant) => (
)}
)
```
### Change Color Scheme
```tsx
const notice = useNotice()
return (
{(colorScheme) => (
)}
)
```
### Change Loading Scheme
```tsx
const notice = useNotice()
return (
{(loadingScheme) => (
)}
)
```
### Change Status
To change the status, set the `status` to `"info"` or `"success"` etc.
```tsx
const notice = useNotice()
return (
{(status) => (
)}
)
```
### Change Limit
To change the limit, set the `limit` to a number.
```tsx
const notice = useNotice({ limit: 10 })
return (
)
```
### Change Duration
To change the duration, set the `duration` to a number.
```tsx
const notice = useNotice({ duration: 10000 })
return (
)
```
### Keep Stay
To keep the notice staying, set the `duration` to `null`.
```tsx
const notice = useNotice({ duration: null })
return (
)
```
### Change Placement
To change the placement, set the `placement` to `"start"` or `"end"` etc.
```tsx
const notice = useNotice({ duration: null })
return (
{(placement) => (
)}
)
```
### Change Close Strategy
To change the close strategy, set the `closeStrategy` to `"click"` or `"drag"` etc.
```tsx
const notice = useNotice()
return (
{(closeStrategy) => (
)}
{(closeStrategy) => (
)}
)
```
### Close Notice
To close the notice, use `close` or `closeAll`.
```tsx
const notice = useNotice()
const id = useRef(null)
const onOpen = () => {
id.current = notice({
closable: true,
description: "お前が好きだ。",
duration: 30000,
title: "クラン・クラン",
})
}
const onClose = () => {
if (id.current) notice.close(id.current)
}
const onCloseAll = () => {
notice.closeAll()
}
return (
)
```
### Update Notice
To update the notice, use `update`.
```tsx
const notice = useNotice()
const id = useRef(null)
const onOpen = () => {
id.current = notice({
colorScheme: "orange",
description: "チャンスは目の前にあるものよ。",
duration: 5000,
title: "シェリル・ノーム",
})
}
const onUpdate = () => {
if (id.current)
notice.update(id.current, {
colorScheme: "blue",
description: "人生はワン･ツー･デカルチャー！！頑張れ、私。",
duration: 5000,
title: "ランカ・リー",
})
}
return (
)
```
## Configuration
### Make Notice Always Expand
To make the notice always expand, set the `expand` to `true`.
```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"
const config = extendConfig({
notice: {
expand: true,
},
})
const App = () => {
return (
)
}
```
### Change Placement
To change the placement, set the `placement` to `"start"` or `"end"` etc.
```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"
const config = extendConfig({
notice: {
placement: "end-end",,
},
})
const App = () => {
return (
)
}
```
### Change Limit
To change the limit, set the `limit` to a number.
```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"
const config = extendConfig({
notice: {
limit: 5,
},
})
const App = () => {
return (
)
}
```
### Change Close Strategy
To change the close strategy, set the `closeStrategy` to `"click"` or `"drag"` etc.
```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"
const config = extendConfig({
notice: {
closeStrategy: "click",
},
})
const App = () => {
return (
)
}
```
# useOS
```tsx
const os = useOS()
return Your os is "{os}"
```
## Usage
```tsx
import { useOS } from "@yamada-ui/react"
```
```tsx
import { useOS } from "@/components/ui"
```
```tsx
import { useOS } from "@workspaces/ui"
```
```tsx
const os = useOS()
```
# useOutsideClick
```tsx
const ref = useRef(null)
const { open, onOpen, onClose } = useDisclosure()
useOutsideClick({
ref,
handler: onClose,
})
return (
<>
{open ? (
)
```
## Usage
```tsx
import { useResizeObserver } from "@yamada-ui/react"
```
```tsx
import { useResizeObserver } from "@/components/ui"
```
```tsx
import { useResizeObserver } from "@workspaces/ui"
```
```tsx
const [ref, rect] = useResizeObserver()
```
# useTheme
```tsx
const { theme } = useTheme()
return {JSON.stringify(theme)}
```
## Usage
```tsx
import { useTheme } from "@yamada-ui/react"
```
```tsx
import { useTheme } from "@/components/ui"
```
```tsx
import { useTheme } from "@workspaces/ui"
```
```tsx
const { themeScheme, changeThemeScheme } = useTheme()
```
:::note
For more information about themes, please see [here](https://yamada-ui.com/docs/theming.md).
:::
### Switching Themes
```tsx
const { themeScheme, changeThemeScheme } = useTheme()
return (
The current scheme is "{themeScheme}"PrimarySecondaryPrimarySecondary
)
```
:::warning
In order to switch themes, you need to prepare multiple themes. For more details, please check [here](https://yamada-ui.com/docs/theming/switching-themes.md).
:::
# useTimeout
```tsx
const [state, setState] = useState(1)
useTimeout(() => setState((prev) => prev + 1), 3000)
return Current state: {state}
```
## Usage
```tsx
import { useTimeout } from "@yamada-ui/react"
```
```tsx
import { useTimeout } from "@/components/ui"
```
```tsx
import { useTimeout } from "@workspaces/ui"
```
```tsx
const [state, setState] = useState(1)
useTimeout(() => setState((prev) => prev + 1), 3000)
```
# useUpdateBreakpointEffect
```tsx
const [device, setDevice] = useState("unknown");
useUpdateBreakpointEffect(breakpoint => {
if (breakpoint === "sm") {
setDevice("mobile");
} else if (breakpoint === "md") {
setDevice("tablet");
} else {
setDevice("desktop");
}
}, []);
return The current device is "{device}";
```
## Usage
```tsx
import { useUpdateBreakpointEffect } from "@yamada-ui/react"
```
```tsx
import { useUpdateBreakpointEffect } from "@/components/ui"
```
```tsx
import { useUpdateBreakpointEffect } from "@workspaces/ui"
```
```tsx
const [device, setDevice] = useState("unknown")
useUpdateBreakpointEffect((breakpoint) => {
if (breakpoint === "sm") {
setDevice("mobile")
} else if (breakpoint === "md") {
setDevice("tablet")
} else {
setDevice("desktop")
}
}, [])
```
# useUpdateEffect
```tsx
const [state, setState] = useState(1)
const [updateState, setUpdateState] = useState(1)
const [flg, { toggle }] = useBoolean()
useEffect(() => {
setState((prev) => prev + 1)
}, [flg])
useUpdateEffect(() => {
setUpdateState((prev) => prev + 1)
}, [flg])
return (
state changed by useEffect: {String(state)}state changed by useUpdateEffect: {String(updateState)}
)
```
## Usage
```tsx
import { useUpdateEffect } from "@yamada-ui/react"
```
```tsx
import { useUpdateEffect } from "@/components/ui"
```
```tsx
import { useUpdateEffect } from "@workspaces/ui"
```
```tsx
useUpdateEffect(() => {}, [])
```
# useValue
```tsx
const breakpoint = useBreakpoint()
const color = useValue({ base: "red", md: "green" })
return The current breakpoint is "{breakpoint}"
```
```tsx
const { colorMode } = useColorMode()
const color = useValue(["green", "red"])
return The current colorMode is "{colorMode}"
```
## Usage
```tsx
import { useValue } from "@yamada-ui/react"
```
```tsx
import { useValue } from "@/components/ui"
```
```tsx
import { useValue } from "@workspaces/ui"
```
```tsx
const color = useValue({ base: "red", md: "green" })
```
:::note
`useValue` is using [useBreakpointValue](https://yamada-ui.com/hooks/use-breakpoint-value.md) and [useColorModeValue](https://yamada-ui.com/hooks/use-color-mode-value.md).
:::
# useWindowEvent
```tsx
const [count, setCount] = useState(0)
useWindowEvent("click", () => {
setCount((prev) => prev + 1)
})
return Click count: {count}
```
## Usage
```tsx
import { useWindowEvent } from "@yamada-ui/react"
```
```tsx
import { useWindowEvent } from "@/components/ui"
```
```tsx
import { useWindowEvent } from "@workspaces/ui"
```
```tsx
const [count, setCount] = useState(0)
useWindowEvent("click", () => {
setCount((prev) => prev + 1)
})
```
# Animation
## Usage
```tsx
Box
```
You can also use [theme](https://yamada-ui.com/docs/theming.md) [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md) to apply common keyframes throughout your application. Using `animationName` or `_keyframes` is recommended.
```tsx
Box
```
### Use Theme Tokens
To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the `animation` property.
```tsx
Box
```
:::warning
By default, no animation tokens are defined.
:::
## Components
Yamada UI provides components that make animations easier to implement.
- [Motion](https://yamada-ui.com/docs/components/motion.md): A convenient component that extends the Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) to [Motion](https://motion.dev/).
- [Airy](https://yamada-ui.com/docs/components/airy.md): A component that provides an animation that smoothly switches between two elements.
- [Collapse](https://yamada-ui.com/docs/components/collapse.md): A component that expands or collapses an element to display it.
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): A component that gradually expands or shrinks an element to display or hide it.
- [Fade](https://yamada-ui.com/docs/components/fade.md): A component that gradually displays or hides an element.
- [Flip](https://yamada-ui.com/docs/components/flip.md): A component that provides an animation that flips between two elements.
- [Ripple](https://yamada-ui.com/docs/components/ripple.md): A component that provides a ripple effect to an element to recognize if the user has clicked it.
- [Rotate](https://yamada-ui.com/docs/components/rotate.md): A component that provides an animation that rotates between two elements.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): A component that functions as a placeholder until the content is loaded.
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): A component that gradually displays or hides an element from a specified position.
- [Slide](https://yamada-ui.com/docs/components/slide.md): A component that displays or hides an element from the corner of the page.
## Hooks
Yamada UI provides convenient custom hooks for animations.
- [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md): A custom hook that implements animations similar to CSS `keyframes`.
- [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md): A custom hook that is used to switch animations.
# At-Rules
## Overview
You can configure CSS [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) by using [Style Props](https://yamada-ui.com/docs/styling/style-props.md).
## @media
[@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) to apply styles based on specific conditions, use `_media`.
```tsx
Print me
```
`print` and other media types have a convenient shortcut.
```tsx
Print me
```
:::note
Available @media are [here](https://yamada-ui.com/docs/styling/style-props.md#at-rules).
:::
### Use multiple queries
To use multiple queries, set multiple values in an array.
```tsx
Box
```
### Use arbitrary queries
To use arbitrary queries, use `query`.
```tsx
Box
```
## @container
[@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) to apply styles based on the size or conditions of a specific container, use `_container`.
```tsx
Resize me
```
### Specify container name
```tsx
Resize me
```
## @supports
[@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) to apply styles based on conditions, use `_supports`.
```tsx
Supported flex
```
## @keyframes
[@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) to apply intermediate states of an animation, use `_keyframes`.
```tsx
Box
```
:::note
Animations have their own documentation. See [Animations](https://yamada-ui.com/docs/styling/animation.md) for more details.
:::
## Arbitrary at-rules
To use arbitrary at-rules, use `css`.
```tsx
(RULE)": {
// Define the style you want to customize.
},
}}
>
Box
```
# Cascade Layers
## Overview
Yamada UI uses CSS [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to set the priority between [themes](https://yamada-ui.com/docs/theming.md) and [Style Props](https://yamada-ui.com/docs/styling/style-props.md). This priority plays an important role in component styling.
## Layer Types
The layer types are as follows.
- `tokens`: [themes](https://yamada-ui.com/docs/theming.md) tokens.
- `reset`: [reset styles](https://yamada-ui.com/docs/styling/reset-styles.md).
- `global`: [global styles](https://yamada-ui.com/docs/styling/global-styles.md).
- `base`: [base style](https://yamada-ui.com/docs/components/styled.md#base-style) of components.
- `size`: [size style](https://yamada-ui.com/docs/components/styled.md#size-style) of components.
- `variant`: [variant style](https://yamada-ui.com/docs/components/styled.md#variant-style) of components.
- `props`: [props style](https://yamada-ui.com/docs/components/styled.md#props-style) of components.
- `compounds`: [compounds style](https://yamada-ui.com/docs/components/styled.md#compounds-style) of components.
## Layer Order
The order of the generated layers is as follows. The same property is overridden in order of priority.
```css
@layer tokens, reset, global, base, size, variant, props, compounds;
```
:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md) is always prioritized unless [!important](https://developer.mozilla.org/en-US/docs/Web/CSS/important) is applied because it is not set in the layer.
:::
## Customize
### Generate a Theme
Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme.
:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md).
:::
```bash
pnpm yamada-cli theme
```
```bash
npm yamada-cli theme
```
```bash
yarn yamada-cli theme
```
```bash
bun yamada-cli theme
```
### Change the Config
Change the `config.ts` in the generated theme.
```tsx
import type { LayersConfig } from "@yamada-ui/react"
import { defineConfig } from "@yamada-ui/react"
export const layers: LayersConfig = {
tokens: { name: "tokens", order: 0 },
reset: { name: "reset", order: 1 },
global: { name: "global", order: 2 },
base: { name: "base", order: 3 },
size: { name: "size", order: 4 },
variant: { name: "variant", order: 5 },
props: { name: "props", order: 6 },
compounds: { name: "compounds", order: 7 },
}
export const config = defineConfig({
css: { layers, varPrefix: "ui" },
breakpoint: { direction: "down", identifier: "@media screen" },
defaultColorMode: "dark",
defaultThemeScheme: "base",
notice: { duration: 5000 },
theme: { responsive: true },
})
```
### Update the Provider
Set the generated theme to `UIProvider`.
```tsx
import { UIProvider } from "@workspaces/ui"
import { theme, config } from "@workspace/theme"
const App = () => {
return (
)
}
```
## Disable
To disable the cascade layers, set `css.layers` to `false`.
```tsx
import { defineConfig } from "@yamada-ui/react"
export const config = defineConfig({
css: { layers: false, varPrefix: "ui" }, // [!code highlight]
breakpoint: { direction: "down", identifier: "@media screen" },
defaultColorMode: "dark",
defaultThemeScheme: "base",
notice: { duration: 5000 },
theme: { responsive: true },
})
```
# Color Mode
## Overview
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.
:::info
If you want to change the default color mode, please see [here](https://yamada-ui.com/docs/theming/color-mode.md).
:::
## Usage
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
This is Box
```
## Utilities
Yamada UI provides useful custom hooks for color mode.
- [useColorMode](https://yamada-ui.com/docs/hooks/use-color-mode.md): A custom hook that returns the current color mode.
- [useColorModeValue](https://yamada-ui.com/docs/hooks/use-color-mode-value.md): A custom hook that returns the value of the current color mode from the provided values.
# Color Scheme
## Overview
Color scheme generates color contexts for components based on values. This improves color consistency.
When a value is set to the color scheme, the following properties are generated. These values are set in the [semantic tokens](https://yamada-ui.com/docs/theming/tokens/colors.md#semantic-tokens) of the [theme](https://yamada-ui.com/docs/theming.md).
- `colorScheme.solid`: The solid color used for background etc.
- `colorScheme.bg`: The faint color used for background etc.
- `colorScheme.ghost`: The faint color used for background etc.
- `colorScheme.fg`: The color used for text etc.
- `colorScheme.outline`: The color used for border etc.
- `colorScheme.contrast`: The text color used for `colorScheme.solid`.
- `colorScheme.subtle`: The color with higher contrast than `colorScheme.bg`.
- `colorScheme.muted`: The color with higher contrast than `colorScheme.subtle`.
- `colorScheme.emphasized`: The color with higher contrast than `colorScheme.muted`.
Also, [tone colors](https://yamada-ui.com/docs/theming/tokens/colors.md#tokens) from `colorScheme.50` to `colorScheme.950` are generated.
:::note
In Yamada UI, the `colorScheme` is set to `"mono"` for the `body` in the [global styles](https://yamada-ui.com/docs/styling/global-styles.md). If you want to change the `colorScheme` for the entire application, please refer to [customization](https://yamada-ui.com/docs/theming/styles/global-styles.md#customize).
:::
## 使い方
```tsx
Solid
Subtle
```
Color scheme inherits the color scheme of the parent element.
```tsx
Provided by Parent
Child
```
# Conditional Styles
## Overview
By using conditional styles, you can apply styles for [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).
## Pseudo Elements
To apply styles to the `::before` pseudo-element, use `_before`.
```tsx
Box
```
:::note
Available pseudo-elements are [here](https://yamada-ui.com/docs/styling/style-props.md#pseudo-elements).
:::
## Pseudo Classes
To apply styles to the `:hover` pseudo-class, use `_hover`.
```tsx
Hover me
```
You can also apply multiple values together.
```tsx
Hover me
```
You can also combine multiple conditions.
```tsx
Hover and focus me
```
:::note
Available pseudo-classes are [here](https://yamada-ui.com/docs/styling/style-props.md#pseudo-classes).
:::
## Selectors
To apply styles based on the `data-orientation` attribute, use `_horizontal` or `_vertical`.
```tsx
horizontal
```
:::note
Available selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors).
:::
### Group Selectors
To apply styles to an element based on the state or attribute of the parent element, add the `"group"` or `"data-group"` role to the parent element and use the `_group*` conditional styles for the child elements.
```tsx
Hover me
```
:::note
Available group selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors).
:::
### Peer Selectors
To apply styles to an element based on the state or attribute of the peer element, add the `data-peer` to the peer element and use the `_peer*` conditional styles.
```tsx
Focus the peer
Focus me!
```
:::note
Available peer selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors).
:::
### Any Selectors
To use any selectors, use `css` to apply styles.
```tsx
Closed
```
# CSS Custom Properties
## Usage
To create a [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), set a property with the `--` prefix in either props or `css`.
```tsx
```
To reference custom properties, use CSS [var](https://developer.mozilla.org/en-US/docs/Web/CSS/var) or `{}` ([interpolation](https://yamada-ui.com/docs/styling/interpolation.md)).
```tsx
Box
```
:::warning
Custom properties you set will only apply to child elements of the element where they are defined.
:::
Additionally, custom properties can reference [theme](https://yamada-ui.com/docs/theming.md) tokens.
```tsx
Box
```
# CSS Value Functions
:::note
Function arguments can reference tokens from the [theme](https://yamada-ui.com/docs/theming.md).
:::
## Calculation & Comparison
Yamada UI provides functions that make CSS calculation and comparison functions more convenient.
### calc
You can use CSS's [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to reference and calculate tokens from the [theme](https://yamada-ui.com/docs/theming.md).
```tsx
Calc
```
```tsx
Use interpolated token
```
:::warning
If the token name is a number, such as the [spaces](https://yamada-ui.com/docs/theming/tokens/spaces.md) tokens in the [theme](https://yamada-ui.com/docs/theming.md), reference it using `{}` (see [interpolation](https://yamada-ui.com/docs/styling/interpolation.md)).
:::
### min
Use CSS's [min](https://developer.mozilla.org/en-US/docs/Web/CSS/min) to set the smallest value from the given arguments.
If there is only one argument, a second value of `"100%"` is set.
```tsx
Min
Omitted Min
```
### max
Use CSS's [max](https://developer.mozilla.org/en-US/docs/Web/CSS/max) to set the largest value from the given arguments.
If there is only one argument, a second value of `"100%"` is set.
```tsx
Max
Omitted Max
```
### clamp
Use CSS's [clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) to constrain a value between an upper and lower bound.
If there are two arguments, a recommended value of `"100%"` is set.
```tsx
Clamp
Omitted Clamp
```
## Color
Yamada UI provides functions that easily mix colors together, lighten, and darken colors.
### mix
Use CSS's [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) to mix colors together.
You can specify two or three arguments. The [method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) can be omitted, and the default is `in srgb`.
```tsx
"in srgb" + "red.500" + "blue.500"
```
You can change the ratio by specifying a percentage.
```tsx
"in lab" + "orange.500 80%" + "purple.500 20%"
```
:::warning
Make sure the percentages add up to `100%`.
:::
### tint
Use [mix](#mix) to lighten a color by mixing it with `#FFFFFF`.
```tsx
Tint color
```
### shade
Use [mix](#mix) to darken a color by mixing it with `#000000`.
```tsx
Shade color
```
### transparentize
Use [mix](#mix) to make a color transparent by mixing it with `transparent`. A shorthand notation like `bg="red.500 / 50"` is also available.
```tsx
Transparentize color
```
### tone
Use [mix](#mix) to create a color based on a specified color and tone.
```tsx preview
{TONES.map((tone) => (
```
## Usage
```tsx
import { Motion } from "@yamada-ui/react"
```
```tsx
import { Motion } from "@/components/ui"
```
```tsx
import { Motion } from "@workspaces/ui"
```
:::note
`Motion` uses [Motion](https://motion.dev) internally. If you want to know more about the component's features, please refer to [this](https://motion.dev/docs/react-motion-component).
:::
- `initial`: The initial state of the component.
- `animate`: The animation executed when the component is mounted or updated.
- `exit`: The animation executed when the component is unmounted.
- `transition`: The object that sets the duration and delay.
:::note
The style object used in `initial`・`animate`・`exit` is not a [Style Props](https://yamada-ui.com/docs/styling/style-props.md) of Yamada UI. Please refer to the [Motion](https://motion.dev) documentation for the properties of the style object.
:::
:::warning
To enable the animation of `exit`, the component must be a child element of [AnimatePresence](https://motion.dev/docs/react-animate-presence).
:::
### Variants
Variants are useful for implementing dynamic animations. You can also orchestrate animations.
```tsx
const [visible, { toggle }] = useBoolean()
return (
Look at me!
)
```
:::note
Variants' animation to know more about the animation of variants, please refer to [this](https://motion.dev/docs/react-animation#variants).
:::
### Use AnimatePresence
In React, when a component is unmounted, the animation is not maintained. By using [AnimatePresence](https://motion.dev/docs/react-animate-presence), the component is not unmounted until the animation ends.
```tsx
const [visible, { toggle }] = useBoolean()
return (
)
```
### Keyframes
By setting the value to an array, you can set the keyframes. Each frame is processed at equal intervals. You can override this by setting an array of intervals to `transition`'s `times`.
```tsx
```
### Gestures
[Hover](#hover)・[Click/Tap](#clicktap)・[Focus](#focus) to detect and execute animations.
#### Hover
- `whileHover`: The animation executed when the pointer is moved over the component.
- `onHoverStart`: The callback function executed when the pointer is moved over the component.
- `onHoverEnd`: The callback function executed when the pointer is moved away from the component.
```tsx
console.log("Hover starts")}
onHoverEnd={(ev) => console.log("Hover ends")}
>
Hover me!
```
:::note
Hover's animation to know more about the animation of hover, please refer to [this](https://motion.dev/docs/react-hover-animation).
:::
#### Click/Tap
- `whileTap`: The animation executed when the pointer is clicked or tapped on the component.
- `onTapStart`: The callback function executed when the pointer starts pressing the component.
- `onTap`: The callback function executed when the pointer is released inside the component.
- `onTapCancel`: The callback function executed when the pointer is released outside the component.
```tsx
console.log("Tap starts")}
onTap={(ev) => console.log("Tap")}
onTapCancel={(ev) => console.log("Tap cancels")}
>
Click and Tap me!
```
:::note
Click/Tap's animation to know more about the animation of click/tap, please refer to [this](https://motion.dev/docs/react-gestures#tap).
:::
#### Focus
- `whileFocus`: The animation executed when the component is focused.
```tsx
Focus me!
```
:::note
Focus's animation to know more about the animation of focus, please refer to [this](https://motion.dev/docs/react-gestures#focus).
:::
### Drag
To enable the dragging of the component, set `drag` to `true`. Or set `"x"` or `"y"` to follow only the x-axis or y-axis.
- `whileDrag`: The animation executed when the component is dragged.
- `onDrag`: The callback function executed when the component is dragged.
- `onDragStart`: The callback function executed when the component starts dragging.
- `onDragEnd`: The callback function executed when the component ends dragging.
```tsx
```
:::note
Drag's animation to know more about the animation of drag, please refer to [this](https://motion.dev/docs/react-drag).
:::
#### Limit the possible area
To limit the possible area, set the value (pixels) to `top`・`bottom`・`left`・`right` of `dragConstraints`.
```tsx
Only Right & Bottom
```
Or, you can limit the possible area by setting `ref`.
```tsx
const ref = useRef(null)
return (
Drag me!
)
```
#### Set elasticity
To set elasticity, set the object with the value (pixels) set to `top`・`bottom`・`left`・`right` of `dragElastic` to `true` or a number.
```tsx
const ref = useRef(null)
return (
Drag me!
)
```
#### Set momentum
To set momentum, set the boolean value to `dragMomentum`.
```tsx
const ref = useRef(null)
return (
Drag me!
)
```
#### Limit the direction
To limit the direction, set `dragDirectionLock` to `true`.
```tsx preview functional client
const [direction, setDirection] = useState<"x" | "y" | null>(null)
return (
)
```
### Scroll
- `whileInView`: The animation executed when the component is in the viewport.
- `viewport`: The object that sets the detection method of the viewport.
- `once`: If `true`, the animation is executed when the component enters the viewport for the first time.
- `root`: If you set the scrollable element (`ref`), the element is used as the viewport instead of `window`.
- `margin`: The margin to add to the viewport.
- `amount`: `"some"`・`"all"`・number to set the height of the element that needs to intersect with the viewport.
- `onViewportEnter`: The callback function executed when the component enters the viewport.
- `onViewportLeave`: The callback function executed when the component leaves the viewport.
```tsx
const ref = useRef(null)
return (
Scroll me!
)
```
## Configuration
To set the common settings for `Motion` throughout the project, use [MotionConfig](https://motion.dev/docs/react-motion-config).
```tsx
import { MotionConfig } from "motion/react"
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
)
}
```
# Ripple
```tsx
const { onClick, ...rippleProps } = useRipple()
return (
Button
)
```
:::warning
You need to set `position: relative` and `overflow: hidden` on the parent element of `Ripple`.
:::
## Usage
```tsx
import { Ripple, useRipple } from "@yamada-ui/react"
```
```tsx
import { Ripple, useRipple } from "@/components/ui"
```
```tsx
import { Ripple, useRipple } from "@workspaces/ui"
```
```tsx
```
### Change the Color
To change the color, set a color to `color`. By default, `currentColor` is set.
```tsx
const { onClick, ...rippleProps } = useRipple()
return (
Button
)
```
### Disable Ripple
To disable, set `disabled` to `true`.
```tsx
const { onClick, ...rippleProps } = useRipple({ disabled: true })
return (
Button
)
```
Alternatively, you can disable it by setting `disabled` to `true` on `Ripple`.
```tsx
const { onClick, ...rippleProps } = useRipple()
return (
Button
)
```
## Props
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| `as` | - | `DOMElement` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `onClear` | - | `(key: Key) => void` | The callback invoked when a ripple is cleared. |
| `ripples` | - | `RippleOptions[]` | The ripples to use. |
| `disabled` | `false` | `boolean` | If `true`, disable ripple effects when pressing a element. |
# Rotate
```tsx
}
to={}
/>
```
## Usage
```tsx
import { Rotate } from "@yamada-ui/react"
```
```tsx
import { Rotate } from "@/components/ui"
```
```tsx
import { Rotate } from "@workspaces/ui"
```
```tsx
```
### Change Rotate
To change the rotate, set `rotate` to a numerical value. By default, `45` is set.
```tsx
}
to={}
/>
```
### Change Duration
To change the duration, set a numerical value (seconds) to `duration`.
```tsx
}
to={}
/>
```
### Delay
If you want to delay the switch, set a numerical value (seconds) to `delay`.
```tsx
}
to={}
/>
```
### Disable
To disable, set `disabled` to `true`.
```tsx
}
to={}
/>
```
### Read-Only
To ready-Only, set `readOnly` to `true`.
```tsx
}
to={}
/>
```
### Control
```tsx
const [value, onChange] = useState("from")
return (
}
to={}
value={value}
onChange={onChange}
/>
)
```
## Props
| Prop | Default | Type | Description |
| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `as` | - | `keyof IntrinsicElements` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `defaultValue` | `"from"` | `KeyframeIdent` | You can set the initial state. |
| `delay` | `0` | `number` | The animation delay. |
| `disabled` | `false` | `boolean` | If `true`, the component is disabled. |
| `duration` | `0.4` | `number` | The animation duration. |
| `from` | - | `ReactNode` | Passing React elements to "from" is required. |
| `onChange` | - | `(value: KeyframeIdent) => void` | This is a callback function that is called when the animation state changes. |
| `readOnly` | `false` | `boolean` | If `true`, the component is readonly. |
| `rotate` | `45` | `number` | The animation rotation. |
| `to` | - | `ReactNode` | Passing React elements to "to" is required. |
| `value` | - | `KeyframeIdent` | Use this when you want to control the animation from outside the component. |
# Skeleton
```tsx
```
## Usage
```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@yamada-ui/react"
```
```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui"
```
```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@workspaces/ui"
```
```tsx
```
### Change Variant
```tsx
{(variant) => (
)}
```
### Change Size
```tsx
```
Additionally, by passing child elements, you can match the width and height.
```tsx
BadgeBadge
```
### Change Blink Color
To change the blink color, use the `startColor` and `endColor` properties.
```tsx
```
### Change Text Gap
To change the gap between text lines, set the `gap` property.
```tsx
```
### Specify Number of Lines
To specify the number of lines, set a numeric value to `lineClamp`.
```tsx
```
### Change Blink Duration
To change the blink duration, set a numeric value (seconds) to `duration`.
```tsx
```
### Display Child Elements
To display child elements, pass `false` to `loading`.
```tsx
const { loading } = useAsync(() => wait(3000))
return (
プリン
つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
歌う。
)
```
### Change Fade In Duration
To change the fade in duration, set a numeric value (seconds) to `fadeDuration`.
```tsx
const { loading } = useAsync(() => wait(3000))
return (
プリン
つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
歌う。
)
```
## Props
### Skeleton
| Prop | Default | Type | Description |
| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `variant` | `"pulse"` | `"none" \| "pulse" \| "shine"` | The variant of the component. |
| `duration` | - | `number \| string` | The animation duration in seconds. |
| `endColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end. |
| `fadeDuration` | - | `number \| string` | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent` | `false` | `boolean` | If `true`, the skeleton will take the width of it's children. |
| `loading` | `true` | `boolean` | If `false`, it'll render its children with a nice fade transition. |
| `startColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start. |
### SkeletonCircle
| Prop | Default | Type | Description |
| -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `variant` | - | `"none" \| "pulse" \| "shine"` | The variant of the component. |
| `duration` | - | `number \| string` | The animation duration in seconds. |
| `endColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end. |
| `fadeDuration` | - | `number \| string` | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent` | `false` | `boolean` | If `true`, the skeleton will take the width of it's children. |
| `loading` | `true` | `boolean` | If `false`, it'll render its children with a nice fade transition. |
| `startColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start. |
### SkeletonText
| Prop | Default | Type | Description |
| -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `variant` | - | `"none" \| "pulse" \| "shine"` | The variant of the component. |
| `duration` | - | `string \| number` | The animation duration in seconds. |
| `endColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end. |
| `fadeDuration` | - | `string \| number` | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent` | `false` | `boolean` | If `true`, the skeleton will take the width of it's children. |
| `lineClamp` | - | `number` | The number of lines to display. |
| `loading` | `true` | `boolean` | If `false`, it'll render its children with a nice fade transition. |
| `rootProps` | - | `HTMLStyledProps` | Props for the root element. |
| `startColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start. |
# SlideFade
```tsx
const [open, { toggle }] = useBoolean()
return (
クラスは最低じゃないぞ！メンバーが最低なだけだ！
)
```
## Usage
```tsx
import { SlideFade } from "@yamada-ui/react"
```
```tsx
import { SlideFade } from "@/components/ui"
```
```tsx
import { SlideFade } from "@workspaces/ui"
```
```tsx
```
### Change the Duration
To change the duration, set a number (in seconds) to `duration`.
```tsx
const [open, { toggle }] = useBoolean()
return (
確かにアイツは勉強ができない。でもな、学力が低いからといって、全てが決まるわけじゃないだろう？
)
```
### Change the Position
To change the position, specify a string or number for `offsetX` or `offsetY`.
```tsx
const [open, { toggle }] = useBoolean()
return (
……私、このクラスの皆が好きなんです。人の為に一生懸命な皆のいる、Fクラスが
……女は胸じゃないのに。アキの、バカ……
)
```
### Unmount on Exit
To unmount the component when it is not visible, set `unmountOnExit` to `true`.
```tsx
const [open, { toggle }] = useBoolean()
return (
考えすぎではないかのぅ。メイド服くらい人間一度は着るものじゃ
)
```
### Delay
To delay the animation, set a number (in seconds) to `delay`.
```tsx
const [open, { toggle }] = useBoolean()
return (
たとえ許されない行為であろうとも自分の気持ちは偽れない。正直に言おう、今僕は…純粋に欲望のために女子風呂を覗きたいッ！！
)
```
## Props
| Prop | Default | Type | Description |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as` | - | `keyof IntrinsicElements` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `enter` | - | `any` | Custom `enter`. |
| `exit` | - | `any` | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial` | - | `any` | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation) |
| `delay` | `0` | `MotionLifecycleProps \| number` | Custom `delay` definition for `enter` and `exit`. |
| `duration` | `0.2` | `MotionLifecycleProps \| number` | Custom `duration` definition for `enter` and `exit`. |
| `offsetX` | `0` | `number \| string` | The offset on the horizontal or `x` axis. |
| `offsetY` | `8` | `number \| string` | The offset on the vertical or `y` axis. |
| `open` | - | `boolean` | Show the component. triggers when enter or exit states. |
| `reverse` | `true` | `boolean` | If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out. |
| `transition` | - | `MotionLifecycleProps` | Custom `transition` definition for `enter` and `exit`. |
| `transitionEnd` | - | `MotionLifecycleProps` | Custom `transitionEnd` definition for `enter` and `exit`. |
| `unmountOnExit` | - | `boolean` | If `true`, the element will unmount when `open={false}` and animation is done. |
# Slide
```tsx
const [open, { toggle }] = useBoolean()
return (
<>
クリリンのことか……クリリンのことかーーーっ！！！！！
)
```
## Usage
```tsx
import { Slide } from "@yamada-ui/react"
```
```tsx
import { Slide } from "@/components/ui"
```
```tsx
import { Slide } from "@workspaces/ui"
```
```tsx
```
### Change Placement
To change the placement, set `placement` to `"block-start"`, `"block-end"`, `"inline-start"`, or `"inline-end"`. Default is `"inline-end"`.
```tsx
const placements = ["block-start", "block-end", "inline-start", "inline-end"]
const [placement, setPlacement] = useState("inline-end")
const [open, { toggle }] = useBoolean()
return (
{placements.map((value) => (
))}
クリリンのことか……クリリンのことかーーーっ！！！！！
)
```
### Change Duration
To change the duration, set a number (in seconds) to `duration`. Default is `{ enter: 0.4, exit: 0.3 }`.
```tsx
const [open, { toggle }] = useBoolean()
return (
<>
クリリンのことか……クリリンのことかーーーっ！！！！！
)
```
### Unmount on Exit
To unmount the component when it is not visible, set `unmountOnExit` to `true`.
```tsx
const [open, { toggle }] = useBoolean()
return (
<>
クリリンのことか……クリリンのことかーーーっ！！！！！
)
```
### Delay
If you want to delay the switch, set a numerical value (seconds) to `delay`.
```tsx
const [open, { toggle }] = useBoolean()
return (
<>
クリリンのことか……クリリンのことかーーーっ！！！！！
)
```
## Props
| Prop | Default | Type | Description |
| --------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as` | - | `keyof IntrinsicElements` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `enter` | - | `any` | Custom `enter`. |
| `exit` | - | `any` | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial` | - | `any` | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation) |
| `delay` | `0` | `MotionLifecycleProps \| number` | Custom `delay` definition for `enter` and `exit`. |
| `duration` | `0.2` | `MotionLifecycleProps \| number` | Custom `duration` definition for `enter` and `exit`. |
| `open` | - | `boolean` | Show the component. triggers when enter or exit states. |
| `placement` | `"inline-end"` | `"block-end" \| "block-start" \| "inline-end" \| "inline-start" ...` | The placement of the slide. |
| `transition` | - | `MotionLifecycleProps` | Custom `transition` definition for `enter` and `exit`. |
| `transitionEnd` | - | `MotionLifecycleProps` | Custom `transitionEnd` definition for `enter` and `exit`. |
| `unmountOnExit` | - | `boolean` | If `true`, the element will unmount when `open={false}` and animation is done. |
# AreaChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# BarChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# DonutChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# LineChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# PieChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# RadarChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# RadialChart
Currently, this component is not migrated. This component will be migrated in v2.0.x.
# Accordion
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
## Usage
```tsx
import { Accordion } from "@yamada-ui/react"
```
```tsx
import { Accordion } from "@/components/ui"
```
```tsx
import { Accordion } from "@workspaces/ui"
```
```tsx
```
### Use items
```tsx
const items = useMemo(
() => [
{
button: "孫悟空少年編",
children:
"地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。",
},
{
button: "ピッコロ大魔王編",
children:
"天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。",
},
{
button: "サイヤ人編",
children:
"ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。",
},
],
[],
)
return
```
### Change Variant
```tsx
{(variant, index) => (
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
)}
```
### Set a Specific Item to be Expanded by Default
To have a specific item expanded by default, set the item's `index` to `defaultIndex`.
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Expand Multiple Items
To expand multiple items, set `multiple` to `true`.
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Enable Toggling
To enable toggling, set `toggle` to `true`.
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Hide Icon
To hide the icon, set `iconHidden` to `true`.
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Disable an Item
To disable a specific item, set `disabled`.
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Customize Icon
```tsx
}>
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
If you want to switch icons based on the expansion and collapse state of an item, control it with `expanded` provided by `icon`.
```tsx
(!expanded ? : )}
>
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Customize Label
```tsx
孫悟空少年編
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
ピッコロ大魔王編
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
サイヤ人編
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Customize Panel
```tsx
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
```
### Control
```tsx
const [index, onChange] = useState(
undefined,
)
return (
地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
)
```
## Props
### Accordion.Root
| Prop | Default | Type | Description |
| -------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `variant` | `"plain"` | `"panel" \| "plain"` | The variant of the component. |
| `defaultIndex` | - | `number \| number[]` | The initial index(es) of the accordion item to expand. |
| `icon` | - | `ReactNodeOrFunction` | The accordion icon for all items to use. |
| `iconHidden` | `false` | `boolean` | If `true`, hide the accordion icon for all items. |
| `index` | - | `number \| number[]` | The index(es) of the accordion item to expand. |
| `items` | - | `Omit[]` | If provided, generate elements based on items. |
| `multiple` | `false` | `boolean` | If `true`, multiple accordion items can be expanded at once. |
| `onChange` | - | `(index: number \| number[]) => void` | The callback invoked when accordion items are expanded or collapsed. |
| `toggle` | `false` | `boolean` | If `true`, any expanded accordion item can be collapsed again. |
### Accordion.Button
| Prop | Default | Type | Description |
| ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `containerProps` | - | `HTMLStyledProps` | Props the container element. |
| `icon` | - | `ReactNodeOrFunction<{ disabled?: boolean; expanded?: boolean }>` | The accordion icon to use. |
### Accordion.Item
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `index` | - | `number` | The index of the accordion item. |
| `button` | - | `ReactNodeOrFunction` | The accordion button to use. |
| `children` | - | `ReactNodeOrFunction` | The accordion children to use. |
| `disabled` | `false` | `boolean` | If `true`, the accordion item will be disabled. |
| `icon` | - | `ReactNodeOrFunction` | The accordion icon to use. |
### Accordion.Panel
| Prop | Default | Type | Description |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `enter` | - | `any` | Custom `enter`. |
| `exit` | - | `any` | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial` | - | `any` | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation) |
| `animationOpacity` | `true` | `boolean` | If `true`, the opacity of the content will be animated. |
| `delay` | `0` | `number \| MotionLifecycleProps` | Custom `delay` definition for `enter` and `exit`. |
| `duration` | `0.2` | `number \| MotionLifecycleProps` | Custom `duration` definition for `enter` and `exit`. |
| `endingHeight` | `"auto"` | `string \| number` | The height you want the content in its expanded state. |
| `open` | - | `boolean` | Show the component. triggers when enter or exit states. |
| `startingHeight` | `0` | `string \| number` | The height you want the content in its collapsed state. |
| `transition` | - | `MotionLifecycleProps` | Custom `transition` definition for `enter` and `exit`. |
| `transitionEnd` | - | `MotionLifecycleProps` | Custom `transitionEnd` definition for `enter` and `exit`. |
| `unmountOnExit` | - | `boolean` | If `true`, the element will unmount when `open={false}` and animation is done. |
## Accessibility
`Accordion` follows the [WAI-ARIA - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) for accessibility.
### Keyboard Navigation
| Key | Description | State |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `Tab` | Focuses the first item when focus moves to the accordion. Focuses the next item if already within the accordion. | - |
| `Shift` + `Tab` | Focuses the previous item that is not disabled. | - |
| `ArrowUp` | Focuses the previous item that is not disabled. If it's the first item, focuses the last item that is not disabled. | - |
| `ArrowDown` | Focuses the next item that is not disabled. If it's the last item, focuses the first item that is not disabled. | - |
| `Space`, `Enter` | Expands the panel of the focused item. | - |
| | Expands the panel of the focused item and collapses it if it is already expanded. | `multiple={true}`, `toggle={true}` |
| `Home` | Focuses the first item that is not disabled. | - |
| `End` | Focuses the last item that is not disabled. | - |
### ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
| ------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Accordion.Button` | `aria-disabled="true"` | Sets to `"true"` when the panel of the item is expanded. However, if `Accordion.Root` is set with `multiple={true}` or `toggle={true}` and `Accordion.Item` is not disabled, it does not become `"true"` as it can be collapsed. |
| | `id` | Used to associate with `Accordion.Panel`. |
| | `aria-controls` | Sets the `id` of the associated `Accordion.Panel`. |
| | `aria-expanded` | Sets to `"true"` when the panel of the item is expanded, and `"false"` when it is collapsed. |
| `Accordion.Panel` | `role="region"` | Indicates that it is a landmark region. |
| | `id` | Used to associate with `Accordion.Button`. |
| | `aria-labelledby` | Sets the `id` of the associated `Accordion.Button`. |
# ActionBar
Please post your thoughts on this GitHub [issue](https://github.com/yamada-ui/yamada-ui/issues/3212) to help us prioritize its development.
# Alert
```tsx
セル
か…完全体に………完全体になれさえすれば………！！！
```
## Usage
```tsx
import { Alert } from "@yamada-ui/react"
```
```tsx
import { Alert } from "@/components/ui"
```
```tsx
import { Alert } from "@workspaces/ui"
```
```tsx
```
### Change Status
```tsx
{(status, index) => (
セル
か…完全体に………完全体になれさえすれば………！！！
)}
```
### Change Variant
```tsx
{(variant, index) => (
{variant !== "island" && }
セル
か…完全体に………完全体になれさえすれば………！！！
)}
```
### Change Color Scheme
```tsx
{(row, index) => (
セル
か…完全体に………完全体になれさえすれば………！！！
)}
```
### Change Loading Scheme
```tsx
{(row, index) => (
セル
か…完全体に………完全体になれさえすれば………！！！
)}
```
### Customize Layout
```tsx
セル
か…完全体に………完全体になれさえすれば………！！！
セル
か…完全体に………完全体になれさえすれば………！！！
```
## Props
### Alert.Root
| Prop | Default | Type | Description |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `variant` | `"plain"` | `"island" \| "plain" \| "solid" \| "subtle" \| "surface" ...` | The variant of the component. |
| `status` | `"info"` | `StatusScheme` | The status of the alert. |
### Alert.Description
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Alert.Icon
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Alert.Loading
| Prop | Default | Type | Description |
| ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `duration` | - | `IconProps["dur"]` | The CSS `dur` property. |
| `loadingScheme` | `"oval"` | `Loading.Scheme` | The loading scheme. |
| `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. |
### Alert.Title
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
## Accessibility
`Alert` follows the [WAI-ARIA - Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) for accessibility.
### ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
| ------------ | ------------------- | ------------------------------ |
| `Alert.Root` | `role="alert"` | Indicates that it is an alert. |
# AlphaSlider
```tsx
```
## Usage
```tsx
import { AlphaSlider } from "@yamada-ui/react"
```
```tsx
import { AlphaSlider } from "@/components/ui"
```
```tsx
import { AlphaSlider } from "@workspaces/ui"
```
```tsx
```
### Change Size
```tsx
{(size, index) => (
)}
```
### Set Default Value
To set a default value, set a value to `defaultValue`.
```tsx
```
### Set Minimum and Maximum Values
To set minimum and maximum values, set numbers to `min` or `max`.
```tsx
```
### Change Orientation
To change the orientation, set `orientation` to `"vertical"` or `"horizontal"`. The default is `"vertical"`.
```tsx
```
### Change Shape
```tsx
{(shape, index) => (
)}
```
### Set Step Value
To set the step value, set a value to `step`.
```tsx
```
### Disable
To disable, set `disabled` to `true`.
```tsx
```
### Read-Only
To make read-only, set `readOnly` to `true`.
```tsx
```
### Display Tooltip
```tsx
const [value, setValue] = useState(0.5)
return (
)
```
### Handle Start and End Change Events
To handle start and end change events, use `onChangeStart` and `onChangeEnd`.
```tsx
const [value, onChange] = useState(0.5)
const [startValue, onChangeStart] = useState(0.5)
const [endValue, onChangeEnd] = useState(0.5)
return (
Value: {value}, Start Value: {startValue}, End Value: {endValue}
)
```
### Control
```tsx
const [value, setValue] = useState(0.5)
return
```
## Props
### AlphaSlider.Root
| Prop | Default | Type | Description |
| ------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | - | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | - | `"outline" \| "solid"` | The variant of the component. |
| `color` | - | `string` | The color used for the slider. |
| `defaultValue` | - | `number` | The initial value of the slider. |
| `disabled` | `false` | `boolean` | If `true`, the field will be disabled. |
| `getAriaValueText` | - | `(value: number, index: number) => string \| undefined` | This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input. |
| `indicatorFill` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The fill color of the indicator. |
| `indicatorRounded` | - | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` | The rounded of the indicator. |
| `inputProps` | - | `SliderInputProps` | Props for the input element. |
| `invalid` | `false` | `boolean` | If `true`, the field will be invalid. |
| `max` | `1` | `number` | The maximum allowed value of the slider. Cannot be less than min. |
| `min` | `0` | `number` | The minimum allowed value of the slider. Cannot be greater than max. |
| `name` | - | `string` | The name attribute of the hidden `input` field. This is particularly useful in forms. |
| `onChange` | - | `(value: number) => void` | Function called whenever the slider value changes. |
| `onChangeEnd` | - | `(value: number) => void` | Function called when the user is done selecting a new value. |
| `onChangeStart` | - | `(value: number) => void` | Function called when the user starts selecting a new value. |
| `orientation` | `"horizontal"` | `"horizontal" \| "vertical"` | The orientation of the slider. |
| `overlayProps` | - | `AlphaSliderOverlayProps` | Props for the overlay element. |
| `readOnly` | `false` | `boolean` | If `true`, the field will be readonly. |
| `required` | `false` | `boolean` | If `true`, the field will be required. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the thumb. |
| `step` | `0.01` | `number` | The step in which increments or decrements have to be made. |
| `thumbProps` | - | `AlphaSliderThumbProps` | Props for the thumb element. |
| `thumbRounded` | - | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` | The rounded of the thumb. |
| `thumbSize` | - | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the thumb. |
| `thumbStroke` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The stroke color of the thumb. |
| `trackProps` | - | `AlphaSliderTrackProps` | Props for the track element. |
| `trackRounded` | - | `"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` | The rounded of the track. |
| `trackSize` | - | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the track. |
| `value` | - | `number` | The value of the slider. |
### AlphaSlider.Overlay
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `layers` | - | `HTMLStyledProps[]` | The layers used for the overlay element. |
### AlphaSlider.Thumb
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `index` | - | `number` | The index of the thumb. |
### AlphaSlider.Track
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
## Accessibility
Currently, this section is being updated due to the migration of v2.
# AspectRatio
```tsx
```
## Usage
```tsx
import { AspectRatio } from "@yamada-ui/react"
```
```tsx
import { AspectRatio } from "@/components/ui"
```
```tsx
import { AspectRatio } from "@workspaces/ui"
```
```tsx
```
### Using iframe
```tsx
```
## Props
| Prop | Default | Type | Description |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `ratio` | `"4 / 3"` | `number` | The aspect ratio of the Box. |
# Autocomplete
```tsx
アグモンガブモンテントモンピヨモンゴマモンパルモンパタモンテイルモン
```
## Usage
```tsx
import { Autocomplete } from "@yamada-ui/react"
```
```tsx
import { Autocomplete } from "@/components/ui"
```
```tsx
import { Autocomplete } from "@workspaces/ui"
```
```tsx
```
### Grouping Options
```tsx
成長期アグモンガブモンテントモンピヨモンゴマモンパルモンパタモンテイルモングレイモンガルルモンカブテリモンバードラモンイッカクモントグモンエンジェモン
メタルグレイモン
ワーガルルモン
アトラーカブテリモン
ガルダモンズドモンリリモン
ホーリーエンジェモン
エンジェウーモン
ウォーグレイモン
メタルガルルモン
ヘラクルカブテリモン
ホウオウモンヴァイクモンロゼモン
ゴッドドラモン
ホーリードラモン
```
### Use items
```tsx
const items = useMemo(
() => [
{ label: "オメガモン", value: "オメガモン" },
{ label: "ディアボロモン", value: "ディアボロモン" },
{
items: [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
label: "成長期",
},
{
items: [
{ label: "グレイモン", value: "グレイモン" },
{ label: "ガルルモン", value: "ガルルモン" },
{ label: "カブテリモン", value: "カブテリモン" },
{ label: "バードラモン", value: "バードラモン" },
{ label: "イッカクモン", value: "イッカクモン" },
{ label: "トグモン", value: "トグモン" },
{ label: "エンジェモン", value: "エンジェモン" },
],
label: "成熟期",
},
{
items: [
{ label: "メタルグレイモン", value: "メタルグレイモン" },
{ label: "ワーガルルモン", value: "ワーガルルモン" },
{ label: "アトラーカブテリモン", value: "アトラーカブテリモン" },
{ label: "ガルダモン", value: "ガルダモン" },
{ label: "ズドモン", value: "ズドモン" },
{ label: "リリモン", value: "リリモン" },
{ label: "ホーリーエンジェモン", value: "ホーリーエンジェモン" },
{ label: "エンジェウーモン", value: "エンジェウーモン" },
],
label: "完全体",
},
{
items: [
{ label: "ウォーグレイモン", value: "ウォーグレイモン" },
{ label: "メタルガルルモン", value: "メタルガルルモン" },
{ label: "ヘラクルカブテリモン", value: "ヘラクルカブテリモン" },
{ label: "ホウオウモン", value: "ホウオウモン" },
{ label: "ヴァイクモン", value: "ヴァイクモン" },
{ label: "ロゼモン", value: "ロゼモン" },
{ label: "ゴッドドラモン", value: "ゴッドドラモン" },
{ label: "ホーリードラモン", value: "ホーリードラモン" },
],
label: "究極体",
},
],
[],
)
return
```
### Use Query
```tsx
const items = useMemo(
() => [
{
label: (
<>
アグモン
),
query: "アグモン",
value: "アグモン",
},
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return
```
### Change Variants
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(variant) => (
)}
)
```
### Change Sizes
```tsx preview functional
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(size) => (
)}
)
```
### Set Default Value
To set a default value, specify a value for `defaultValue`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Set Default Input Value
To set a default input value, specify a string for `defaultInputValue`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Enable Multiple Selection
To enable multiple selection, set `multiple` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return
```
### Limit Maximum Selections
To limit the maximum number of selections, specify a number for `max`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Change Separator
To change the separator, specify a string for `separator`. By default, `,` is set.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Allow Custom Value
To allow input of value not in the list, set `allowCustomValue` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
console.log("value:", value)}
/>
)
```
### Change Offset
To change the offset, specify a value for `gutter` or `offset`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Change Animation
To change the animation, specify `"block-start"` or `"inline-end"` for `animationScheme`.
By default, `"scale"` is set.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(animationScheme) => (
)}
)
```
### Change Placement
To change the placement, specify `"start"` or `"end-end"` for `placement`. By default, `"end"` is set.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Blocking Scroll
To block scrolling, set `blockScrollOnMount` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Close Dropdown On Scroll
To close the dropdown on scroll, set `closeOnScroll` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Handle opening the dropdown on change
To handle the event of opening the dropdown on change, set a function to `openOnChange`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
ev.target.value.length > 2}
items={items}
placeholder="Select a digimon"
/>
)
```
### Handle closing the dropdown on change
To handle the event of closing the dropdown on change, set a function to `closeOnChange`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
!ev.target.value.length}
items={items}
placeholder="Select a digimon"
/>
)
```
### Disable Open Dropdown On Focus
To disable opening the dropdown on focus, set `openOnFocus` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Open Dropdown On Click
To disable opening the dropdown on click, set `openOnClick` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Focus After Clear
To disable focus after clear, set `focusOnClear` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Close On Select
To disable closing the dropdown on select, set `closeOnSelect` to `false`.
```tsx
const items = useMemo(
() => [
{ closeOnSelect: true, label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Close On Outside Click
To disable closing dropdown when clicking outside, set `closeOnBlur` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Close On Esc
To disable closing the dropdown with the Esc key, set `closeOnEsc` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Clear Button
To disable the clear button, set `clearable` to `false`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Disable Options
To disable specific options, set `disabled` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ disabled: true, label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return
```
### Disable
To disable, set `disabled` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(variant) => (
)}
)
```
### Read-Only
To make read-only, set `readOnly` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(variant) => (
)}
)
```
### Invalid
To make invalid, set `invalid` to `true`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
{(variant) => (
)}
)
```
### Change Border Color
To customize focus and error border colors, set colors for `focusBorderColor` or `errorBorderColor`.
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Customize Empty Message
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
### Customize Icons
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
}
placeholder="Select a digimon"
items={items}
/>
)
```
### Customize Option Icons
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
}}
/>
)
```
### Customize Multiple Selection Display
```tsx
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
(
{label}
)}
/>
)
```
### Control
```tsx
const [value, setValue] = useState("アグモン")
const items = useMemo(
() => [
{ label: "アグモン", value: "アグモン" },
{ label: "ガブモン", value: "ガブモン" },
{ label: "テントモン", value: "テントモン" },
{ label: "ピヨモン", value: "ピヨモン" },
{ label: "ゴマモン", value: "ゴマモン" },
{ label: "パルモン", value: "パルモン" },
{ label: "パタモン", value: "パタモン" },
{ label: "テイルモン", value: "テイルモン" },
],
[],
)
return (
)
```
## Props
### Autocomplete.Root
| Prop | Default | Type | Description |
| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"outline"` | `"filled" \| "flushed" \| "outline" \| "plain"` | The variant of the component. |
| `allowCustomValue` | `false` | `boolean` | If `true`, the autocomplete will allow custom value. |
| `animationScheme` | `"scale"` | `"none" \| "scale" \| SimplePlacement` | The animation of the element. |
| `autoUpdate` | `true` | `boolean` | If `true`, automatically updates the position of the floating element when necessary. |
| `blockScrollOnMount` | `false` | `boolean` | If `true`, scrolling will be disabled on the `body` when the modal opens. |
| `clearable` | `true` | `boolean` | If `true`, display the clear icon. |
| `clearIcon` | - | `ReactNode` | The icon to be used in the clear button. |
| `closeOnBlur` | `true` | `boolean` | If `true`, the popover will close when you blur out it by clicking outside or tabbing out. |
| `closeOnChange` | `false` | `((ev: ChangeEvent) => boolean) \| boolean` | If `true`, the autocomplete will be closed when the input value changes. |
| `closeOnEsc` | `true` | `boolean` | If `true`, the popover will hide on pressing Esc key. |
| `closeOnScroll` | `false` | `boolean` | If `true`, the popover will hide on scroll. |
| `closeOnSelect` | `true` | `boolean` | If `true`, the list element will be closed when value is selected. |
| `contentProps` | - | `AutocompleteContentProps` | Props for content element. |
| `defaultInputValue` | - | `string` | The initial value of the input. |
| `defaultOpen` | - | `boolean` | If `true`, the element will be initially opened. |
| `defaultValue` | - | `Multiple extends true ? string[] : string` | The initial value of the autocomplete. |
| `disabled` | `false` | `boolean` | If `true`, the combobox will be disabled. |
| `duration` | `0.2` | `MotionTransitionProps["duration"]` | The animation duration. |
| `elementProps` | - | `InputGroup.ElementProps` | The props for the end element. |
| `elements` | - | `{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }` | Object containing the reference and floating elements. |
| `emptyIcon` | - | `ReactNode` | The icon to be used in the empty element. |
| `emptyMessage` | `"No results found"` | `ReactNode` | The message displayed when the search yields no hits. |
| `emptyProps` | - | `AutocompleteEmptyProps` | Props for empty element. |
| `errorBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. |
| `filter` | - | `AutocompleteFilter` | The function to filter the items. |
| `flip` | `true` | `boolean` | If `true`, the popper will change its placement and flip when it's about to overflow its boundary area. |
| `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is focused. |
| `focusOnClear` | `true` | `boolean` | If `true`, the input will be focused when the clear icon is clicked. |
| `groupProps` | - | `Omit` | Props for group element. |
| `gutter` | `8` | `number` | The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. |
| `icon` | - | `ReactNode` | The icon to be used in the autocomplete. |
| `iconProps` | - | `AutocompleteIconProps` | Props for icon element. |
| `inputProps` | - | `HTMLStyledProps<"input">` | The props for the input element. |
| `inputValue` | - | `string` | The value of the input. |
| `invalid` | `false` | `boolean` | If `true`, the field will be invalid. |
| `items` | `[]` | `ComboboxItem[]` | If provided, generate options based on items. |
| `matcher` | - | `AutocompleteMatcher` | The function to match the items. |
| `matchWidth` | `false` | `boolean` | If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns. |
| `max` | - | `number` | The maximum selectable value. |
| `middleware` | - | `(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` | Array of middleware objects to modify the positioning or provide data for rendering. |
| `multiple` | `false` | `Multiple` | If `true`, the autocomplete will be multiple. |
| `name` | - | `string` | The `name` attribute of the input element. |
| `offset` | - | `[number, number]` | The main and cross-axis offset to displace popper element from its reference element. |
| `onChange` | - | `(value: Multiple extends true ? string[] : string) => void` | The callback invoked when value state changes. |
| `onClose` | - | `() => void \| Promise` | Callback invoked to close the element. |
| `onInputChange` | - | `(value: string) => void` | The callback invoked when input value state changes. |
| `onOpen` | - | `() => void \| Promise` | Callback invoked to open the element. |
| `open` | - | `boolean` | If `true`, the element will be opened. |
| `openOnChange` | `true` | `((ev: ChangeEvent) => boolean) \| boolean` | If `true`, the autocomplete will be opened when the input value changes. |
| `openOnClick` | `true` | `boolean` | If `true`, the combobox will be opened when click on the field. |
| `openOnEnter` | `true` | `boolean` | If `true`, the combobox will be opened when enter is pressed. |
| `openOnFocus` | `true` | `boolean` | If `true`, the autocomplete will be opened when the input is focused. |
| `openOnSpace` | `true` | `boolean` | If `true`, the combobox will be opened when space is pressed. |
| `optionProps` | - | `Omit` | Props for option element. |
| `placeholder` | - | `string` | The placeholder for autocomplete. |
| `placement` | `"end"` | `Direction` | The placement of the popper relative to its reference. |
| `platform` | - | `Platform` | Custom or extended platform object. |
| `preventOverflow` | `true` | `boolean` | If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area. |
| `readOnly` | `false` | `boolean` | If `true`, the combobox will be readonly. |
| `render` | - | `(props: AutocompleteRenderProps) => ReactNode` | The function to render the selected items. |
| `required` | `false` | `boolean` | If `true`, the field will be required. |
| `rootProps` | - | `InputGroup.RootProps` | Props for root element. |
| `selectFocusRef` | - | `RefObject` | The `ref` of the element that should receive focus when selected. |
| `selectOnSpace` | `true` | `boolean` | If `true`, the item will be selected when space is pressed. |
| `separator` | `","` | `string` | The visual separator between each value. |
| `strategy` | `"absolute"` | `Strategy` | The CSS positioning strategy to use. |
| `transferFocus` | `true` | `boolean` | If `true`, the focus will be transferred to the popover content when the tab key is pressed. |
| `value` | - | `Multiple extends true ? string[] : string` | The value of the autocomplete. |
| `whileElementsMounted` | - | `(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`). |
### Autocomplete.Group
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `label` | - | `ReactNode` | The label of the group. |
| `labelProps` | - | `AutocompleteLabelProps` | Props for the label component. |
### Autocomplete.Label
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Autocomplete.Option
| Prop | Default | Type | Description |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `closeOnSelect` | - | `boolean` | If `true`, the item will be closed when selected. |
| `disabled` | `false` | `boolean` | If `true`, the item will be disabled. |
| `icon` | - | `ReactNode` | The icon to be used in the autocomplete option. |
| `selected` | - | `boolean` | If `true`, the item will be selected. |
| `value` | - | `string` | The value of the item. |
## Accessibility
Currently, this section is being updated due to the migration of v2.
# Avatar
```tsx
```
## Usage
```tsx
import { Avatar, AvatarGroup } from "@yamada-ui/react"
```
```tsx
import { Avatar, AvatarGroup } from "@/components/ui"
```
```tsx
import { Avatar, AvatarGroup } from "@workspaces/ui"
```
```tsx
```
```tsx
```
### Change Variant
```tsx
{(variant, key) => (
)}
```
### Change Size
```tsx
{(size, key) => }
```
### Change Shape
```tsx
{(size, key) => }
```
### Display Initials
When you set a string to name, an icon with the user's initials will be displayed.
```tsx
```
### Display an Image
If you want to display an image in the avatar, set the path to `src`.
```tsx
```
### Fallback
There are two fallbacks if the loading of `src` fails:
- If `name` is provided: It uses an icon with the user's initials
- If `name` is not provided: It uses the default avatar icon.
```tsx
```
### Customize the Fallback
Here is an example of customizing the fallback icon and background color.
```tsx
} src="https://not-found.com" />
```
### Use random color
```tsx
const randomColorScheme = (name: string) => {
const index = name.charCodeAt(0) % COLOR_SCHEMES.length
return COLOR_SCHEMES[index]
}
return (
{(name, index) => (
)}
)
```
### Grouping
If you want to control the number of avatars displayed, specify a number with `max`. If there are more avatars than the specified number, it truncates and displays the remaining avatars as `+X`.
```tsx
```
## Props
### Avatar
| Prop | Default | Type | Description |
| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `alt` | - | `HTMLProps<"img">["alt"]` | The `HTMLImageElement` property `alt`. |
| `crossOrigin` | - | `HTMLProps<"img">["crossOrigin"]` | The `HTMLImageElement` property `crossOrigin`. |
| `fallback` | - | `ReactNode` | The fallback text to display if the image is not provided. |
| `fallbackProps` | - | `AvatarFallbackProps` | The props to pass to the fallback component. |
| `format` | - | `(name: string) => string` | Function to get the initials to display. |
| `icon` | - | `ReactElement` | The avatar icon to use. |
| `imageProps` | - | `AvatarImageProps` | The props to pass to the image component. |
| `loading` | - | `HTMLProps<"img">["loading"]` | Defines loading strategy. |
| `name` | - | `string` | The name of the person in the avatar. - If `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials |
| `referrerPolicy` | `"no-referrer"` | `HTMLProps<"img">["referrerPolicy"]` | Defining which referrer is sent when fetching the resource. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `src` | - | `HTMLProps<"img">["src"]` | The image url of the avatar. |
| `srcSet` | - | `HTMLProps<"img">["srcSet"]` | List of sources to use for different screen resolutions. |
### AvatarGroup.Root
| Prop | Default | Type | Description |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `max` | - | `number` | The maximum number of visible avatars. |
| `reverse` | - | `boolean` | Whether to reverse the order of the avatars. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
### AvatarGroup.Item
| Prop | Default | Type | Description |
| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `alt` | - | `HTMLProps<"img">["alt"]` | The `HTMLImageElement` property `alt`. |
| `crossOrigin` | - | `HTMLProps<"img">["crossOrigin"]` | The `HTMLImageElement` property `crossOrigin`. |
| `fallback` | - | `ReactNode` | The fallback text to display if the image is not provided. |
| `fallbackProps` | - | `AvatarFallbackProps` | The props to pass to the fallback component. |
| `format` | - | `(name: string) => string` | Function to get the initials to display. |
| `icon` | - | `ReactElement` | The avatar icon to use. |
| `imageProps` | - | `AvatarImageProps` | The props to pass to the image component. |
| `loading` | - | `HTMLProps<"img">["loading"]` | Defines loading strategy. |
| `name` | - | `string` | The name of the person in the avatar. - If `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials |
| `referrerPolicy` | `"no-referrer"` | `HTMLProps<"img">["referrerPolicy"]` | Defining which referrer is sent when fetching the resource. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `src` | - | `HTMLProps<"img">["src"]` | The image url of the avatar. |
| `srcSet` | - | `HTMLProps<"img">["srcSet"]` | List of sources to use for different screen resolutions. |
## Accessibility
Currently, this section is being updated due to the migration of v2.
# Badge
```tsx
Badge
```
## Usage
```tsx
import { Badge } from "@yamada-ui/react"
```
```tsx
import { Badge } from "@/components/ui"
```
```tsx
import { Badge } from "@workspaces/ui"
```
```tsx
```
### Change Variant
```tsx
{(variant, index) => (
{variant}
)}
```
### Change Size
```tsx
{(size, index) => (
{size}
)}
```
### Change Color Scheme
```tsx
{(colorScheme, index) => (
{colorScheme}
)}
```
## Props
| Prop | Default | Type | Description |
| ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"sm"` | `"lg" \| "md" \| "sm"` | The size of the component. |
| `variant` | `"outline"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `fullRounded` | `false` | `boolean` | If `true`, the button is full rounded. Else, it'll be slightly round. |
# Bleed
```tsx
北斗の拳
199X年。世界は核の炎に包まれた。文明社会は消え去り、世界は暴力が支配する弱肉強食の時代へと突入した。
それから数年後、一子相伝の暗殺拳である北斗神拳の伝承者となったケンシロウは愛する女性ユリアと共に旅に出る。
しかし、ユリアを愛する南斗孤鷲拳の使い手シンに敗北し、ケンシロウは胸に七つの傷をつけられユリアを奪われてしまう。
ユリアを取り戻すため荒野をさまようケンシロウ。そこでケンシロウは言葉を失った少女リンとしたたかに生きる少年バットと運命の出会いを果たす。
北斗神拳の宿命に導かれるまま乱世に覇をとなえる強敵たちと戦い、弱き者を救い続けるケンシロウ。北斗神拳と対を成す南斗の使い手との戦いや、ケンシロウを見守る兄トキとの出会い、そしてトキとケンシロウが目指した北斗の長兄であり最強の男ラオウとの戦いを通じ、ケンシロウは乱世を救う真の救世主へと成長していく。
```
## Usage
```tsx
import { Bleed } from "@yamada-ui/react"
```
```tsx
import { Bleed } from "@/components/ui"
```
```tsx
import { Bleed } from "@workspace/ui"
```
```tsx
```
### Align Vertically
To align vertically, use the `block` property.
```tsx
```
### Specify Direction
To align in a specific direction, use properties like `inlineStart` or `blockEnd`.
```tsx
```
### Match Screen Width
To match the screen width, set `inline` to `full`.
```tsx