Documentation for the Components of Yamada UI v2. # Overview ## 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) # 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"`. # 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 Click me! } ``` 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"], }) ``` # Airy ```tsx } to={} /> ``` ## Usage ```tsx import { Airy } from "@yamada-ui/react" ``` ```tsx import { Airy } from "@/components/ui" ``` ```tsx import { Airy } from "@workspaces/ui" ``` ```tsx ``` ### Change the 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("to") 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.2` | `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. | | `to` | - | `ReactNode` | Passing React elements to "to" is required. | | `value` | - | `KeyframeIdent` | Use this when you want to control the animation from outside the component. | # Collapse ```tsx const [open, { toggle }] = useBoolean() return ( Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ ) ``` ## Usage ```tsx import { Collapse } from "@yamada-ui/react" ``` ```tsx import { Collapse } from "@/components/ui" ``` ```tsx import { Collapse } from "@workspaces/ui" ``` ```tsx ``` ### Change the Duration To change the duration, set a number (in seconds) to `duration`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ ) ``` ### Unmount on Exit To unmount the component when it is not visible, set `unmountOnExit` to `true`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ 私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… ) ``` ### Disable Opacity Animation To disable the opacity animation, set `animationOpacity` to `false`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ 私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… ) ``` ### Add a Starting Height To add a starting height, set a string or number to `startingHeight`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click 私の戦闘力は530000です。
ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… ) ``` ## 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) | | `animationOpacity` | `true` | `boolean` | If `true`, the opacity of the content will be animated. | | `delay` | `0` | `MotionLifecycleProps \| number` | Custom `delay` definition for `enter` and `exit`. | | `duration` | `0.2` | `MotionLifecycleProps \| number` | Custom `duration` definition for `enter` and `exit`. | | `endingHeight` | `"auto"` | `number \| string` | The height you want the content in its expanded state. | | `open` | - | `boolean` | Show the component. triggers when enter or exit states. | | `startingHeight` | `0` | `number \| string` | 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. | # FadeScale ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ ) ``` ## Usage ```tsx import { FadeScale } from "@yamada-ui/react" ``` ```tsx import { FadeScale } from "@/components/ui" ``` ```tsx import { FadeScale } from "@workspaces/ui" ``` ```tsx ``` ### Change the initial scale value To change the initial scale value, set a number to `scale`. The element will scale based on this value, starting from and shrinking to it. The default is `0.95`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ ) ``` ### Change the Duration To change the duration, set a number (in seconds) to `duration`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ ) ``` ### Unmount on Exit To unmount the component when it is not visible, set `unmountOnExit` to `true`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ 俺はたった今からデータを捨てる！そして俺は過去を凌駕する！ ) ``` ## 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. | | `reverse` | `true` | `boolean` | If `true`, the element will transition back to exit state. | | `scale` | `0.95` | `number` | The initial scale of the element. | | `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. | # Fade ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ ) ``` ## Usage ```tsx import { Fade } from "@yamada-ui/react" ``` ```tsx import { Fade } from "@/components/ui" ``` ```tsx import { Fade } from "@workspaces/ui" ``` ```tsx ``` ### Change the Duration To change the duration, set a number (in seconds) to `duration`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ ) ``` ### Unmount on Exit To unmount the component when it is not visible, set `unmountOnExit` to `true`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click その打球、消えるよ 俺はたった今からデータを捨てる！そして俺は過去を凌駕する！ ) ``` ## 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. | | `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. | # Flip ```tsx } to={} /> ``` ## Usage ```tsx import { Flip } from "@yamada-ui/react" ``` ```tsx import { Flip } from "@/components/ui" ``` ```tsx import { Flip } from "@workspaces/ui" ``` ```tsx ``` ### Change Direction To change the direction, set `orientation` to `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set. ```tsx } to={} /> ``` ### Change the 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. | | `orientation` | `"horizontal"` | `Orientation` | The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically. | | `readOnly` | `false` | `boolean` | If `true`, the component is readonly. | | `to` | - | `ReactNode` | Passing React elements to "to" is required. | | `value` | - | `KeyframeIdent` | Use this when you want to control the animation from outside the component. | # Loading ```tsx ``` ## Usage ```tsx import { Loading } from "@yamada-ui/react" ``` ```tsx import { Loading } from "@/components/ui" ``` ```tsx import { Loading } from "@workspaces/ui" ``` ```tsx ``` ### Change Variant ```tsx ``` ### Change Size ```tsx ``` ## Props ### Loading.Audio | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Circles | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Dots | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Grid | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Oval | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Puff | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Rings | 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. | | `secondaryColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property. | ### Loading.Suspense | 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. | | `loadingProps` | - | `LoadingProps` | The loading props. | | `loadingScheme` | - | `LoadingScheme` | The loading scheme. | # Motion ```tsx ``` ## 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 ( Click me! 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 ( Click me! {visible ? ( Enabled "AnimatePresence" ) : null} {visible ? ( Disabled "AnimatePresence" ) : null} ) ``` ### 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 {(drag) => ( console.log("Drag", "x:", point.x, "y:", point.y) } onDragStart={(ev, { point }) => console.log("Drag starts", "x:", point.x, "y:", point.y) } onDragEnd={(ev, { point }) => console.log("Drag ends", "x:", point.x, "y:", point.y) } > {drag === true ? "Drag me!" : drag === "x" ? "Only X" : "Only Y"} )} ``` :::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 ( setDirection(direction)} onDragEnd={() => setDirection(null)} > Drag me! ) ``` ### 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! {(once) => ( console.log("Scroll entires", entry)} onViewportLeave={(entry) => console.log("Scroll leaves", entry)} > {once ? "Once me!" : "You found 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 Badge Badge ``` ### 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 ( Please Click クラスは最低じゃないぞ！メンバーが最低なだけだ！ ) ``` ## 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 ( Please Click 確かにアイツは勉強ができない。でもな、学力が低いからといって、全てが決まるわけじゃないだろう？ ) ``` ### Change the Position To change the position, specify a string or number for `offsetX` or `offsetY`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click ……私、このクラスの皆が好きなんです。人の為に一生懸命な皆のいる、Fクラスが ……女は胸じゃないのに。アキの、バカ…… ) ``` ### Unmount on Exit To unmount the component when it is not visible, set `unmountOnExit` to `true`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click 考えすぎではないかのぅ。メイド服くらい人間一度は着るものじゃ ) ``` ### Delay To delay the animation, set a number (in seconds) to `delay`. ```tsx const [open, { toggle }] = useBoolean() return ( Please Click たとえ許されない行為であろうとも自分の気持ちは偽れない。正直に言おう、今僕は…純粋に欲望のために女子風呂を覗きたいッ！！ ) ``` ## 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 ( <> Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ Close ) ``` ## 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) => ( setPlacement(value)} variant={placement === value ? "solid" : "outline"} > {value} ))} Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ Close ) ``` ### 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 ( <> Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ Close ) ``` ### Unmount on Exit To unmount the component when it is not visible, set `unmountOnExit` to `true`. ```tsx const [open, { toggle }] = useBoolean() return ( <> Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ Close ) ``` ### Delay If you want to delay the switch, set a numerical value (seconds) to `delay`. ```tsx const [open, { toggle }] = useBoolean() return ( <> Please Click クリリンのことか……クリリンのことかーーーっ！！！！！ Close ) ``` ## 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