) } ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```tsx import { Html, Head, Main, NextScript } from "next/document" import { ColorModeScript } from "@workspaces/ui" import { config } from "@workspace/theme" export default function Document() { return (

) } ``` #### Add getServerSideProps To share `getServerSideProps` across multiple pages, define `getServerSideSharedProps`. ```tsx import { GetServerSidePropsContext } from "next" export const getServerSideSharedProps = ({ req, }: GetServerSidePropsContext) => { return { props: { cookies: req.headers.cookie ?? "", }, } } ``` ```tsx import { getServerSideSharedProps } from "@/get-server-side-props" import { Button } from "@workspaces/ui" export const getServerSideProps = getServerSideSharedProps export default function Home() { return Click me! } ``` #### Update Provider ```tsx import { UIProvider } from "@workspaces/ui" import type { AppProps } from "next/app" export default function App({ Component, pageProps }: AppProps) { const { cookie } = pageProps return ( ) } ``` ### ThemeSchemeScript To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly. This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. #### Add Script ```tsx import { Html, Head, Main, NextScript } from "next/document" import { ThemeSchemeScript } from "@workspaces/ui" export default function Document() { return (

) } ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```tsx import { Html, Head, Main, NextScript } from "next/document" import { ThemeSchemeScript } from "@workspaces/ui" import { config } from "@workspace/theme" export default function Document() { return (

) } ``` #### Add getServerSideProps To share `getServerSideProps` across multiple pages, define `getServerSideSharedProps`. ```tsx import { GetServerSidePropsContext } from "next" export const getServerSideSharedProps = ({ req, }: GetServerSidePropsContext) => { return { props: { cookies: req.headers.cookie ?? "", }, } } ``` ```tsx import { getServerSideSharedProps } from "@/get-server-side-props" import { Button } from "@workspaces/ui" export const getServerSideProps = getServerSideSharedProps export default function Home() { return Click me! } ``` #### Update Provider ```tsx import { UIProvider } from "@workspaces/ui" import type { AppProps } from "next/app" export default function App({ Component, pageProps }: AppProps) { const { cookie } = pageProps return ( ) } ``` ## Component Integration You can integrate Next.js components such as [Link](https://nextjs.org/docs/pages/api-reference/components/link) and [Image](https://nextjs.org/docs/pages/api-reference/components/image) with Yamada UI components. ### Link ```tsx import type { ButtonProps, HTMLRefAttributes, IconButtonProps, LinkProps, Merge, } from "@workspaces/ui" import type { FC } from "react" import type { LinkProps as OriginalLinkProps } from "next/link" import { Button, IconButton, Link } from "@workspaces/ui" import OriginalLink from "next/link" export interface NextLinkProps extends Omit< Merge>, "as" > {} export const NextLink: FC = ({ href, children, ...rest }) => { return ( {children} ) } export interface NextLinkButtonProps extends Omit, "as" | "ref">, HTMLRefAttributes<"a"> {} export const NextLinkButton: FC = (props) => { return } export interface NextLinkIconButtonProps extends Omit, "as" | "ref">, HTMLRefAttributes<"a"> {} export const NextLinkIconButton: FC = (props) => { return } ``` ### Image ```tsx import { styled } from "@workspaces/ui" import Image from "next/image" export const AppImage = styled(Image, { forwardProps: ["fill", "height", "width"], }) ``` # React Router --- title: React Router description: "A guide for installing and using Yamada UI with React Router projects." --- # React Router A guide for installing and using Yamada UI with React Router projects. ## Installation ### Create application Create React Router application. ```bash pnpm create react-router my-app ``` ```bash npx create-react-router my-app ``` ```bash yarn create react-router my-app ``` ```bash bun create react-router my-app ``` ### Setup Running the command will create the necessary files and folders in your project. ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### Install the package Install `@workspaces/ui` to your application. ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### Add provider After installing, add `UIProvider` to the root of your application. To suppress hydration errors, add `suppressHydrationWarning` to the `html` and `body` tags. ```tsx import { Meta, Outlet, Scripts, ScrollRestoration } from "react-router" import { UIProvider } from "@workspaces/ui" export function Layout({ children }: { children: React.ReactNode }) { return ( {children} ) } export default function App() { return } ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { Button } from "@workspaces/ui" export default function Home() { return Click me! } ``` That's it! You've successfully set up Yamada UI. ## Scripts ### ColorModeScript To use [Color Mode](https://yamada-ui.com/docs/theming/color-mode.md), you need to add `ColorModeScript` to the `body` to ensure it works correctly. This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx import { data, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, } from "react-router" import { ColorModeScript, UIProvider } from "@workspaces/ui" import type { Route } from "./+types/root" export async function loader({ request }: Route.LoaderArgs) { const cookie = request.headers.get("cookie") ?? "" return data({ cookie }) } export function Layout({ children }: { children: React.ReactNode }) { const { cookie } = useRouteLoaderData("root") return ( {children} ) } export default function App() { return } ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```tsx import { data, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, } from "react-router" import { ColorModeScript, UIProvider } from "@workspaces/ui" import type { Route } from "./+types/root" import { config } from "@workspace/theme" export async function loader({ request }: Route.LoaderArgs) { const cookie = request.headers.get("cookie") ?? "" return data({ cookie }) } export function Layout({ children }: { children: React.ReactNode }) { const { cookie } = useRouteLoaderData("root") return ( {children} ) } export default function App() { return } ``` ### ThemeSchemeScript To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly. This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx import { data, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, } from "react-router" import { ThemeSchemeScript, UIProvider } from "@workspaces/ui" import type { Route } from "./+types/root" export async function loader({ request }: Route.LoaderArgs) { const cookie = request.headers.get("cookie") ?? "" return data({ cookie }) } export function Layout({ children }: { children: React.ReactNode }) { const { cookie } = useRouteLoaderData("root") return ( {children} ) } export default function App() { return } ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```tsx import { data, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, } from "react-router" import { ThemeSchemeScript, UIProvider } from "@workspaces/ui" import type { Route } from "./+types/root" import { config } from "@workspace/theme" export async function loader({ request }: Route.LoaderArgs) { const cookie = request.headers.get("cookie") ?? "" return data({ cookie }) } export function Layout({ children }: { children: React.ReactNode }) { const { cookie } = useRouteLoaderData("root") return ( {children} ) } export default function App() { return } ``` ## Component Integration You can integrate React Router components such as [Link](https://reactrouter.com/api/components/Link) with Yamada UI components. ### Link ```tsx import type { ButtonProps, HTMLRefAttributes, IconButtonProps, LinkProps, Merge, } from "@workspaces/ui" import type { FC } from "react" import type { LinkProps as OriginalLinkProps } from "react-router" import { Button, IconButton, Link } from "@workspaces/ui" import { Link as OriginalLink } from "react-router" export interface RouterLinkProps extends Merge {} export const RouterLink: FC = (props) => { return } export interface RouterLinkButtonProps extends Omit, "as" | "ref">, HTMLRefAttributes<"a"> {} export const RouterLinkButton: FC = (props) => { return } export interface RouterLinkIconButtonProps extends Omit, "as" | "ref">, HTMLRefAttributes<"a"> {} export const RouterLinkIconButton: FC = (props) => { return } ``` # TanStack Router --- title: TanStack Router description: "A guide for installing and using Yamada UI with TanStack Router projects." --- # TanStack Router A guide for installing and using Yamada UI with TanStack Router projects. ## Installation ### Create application Create TanStack Router application. ```bash pnpm dlx create-tsrouter-app my-app ``` ```bash npx create-tsrouter-app my-app ``` ```bash yarn dlx create-tsrouter-app my-app ``` ```bash bunx create-tsrouter-app my-app ``` ### Setup Running the command will create the necessary files and folders in your project. ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### Install the package Install `@workspaces/ui` to your application. ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### Add provider After installing, add `UIProvider` to the root of your application. ```tsx import ReactDOM from "react-dom/client" import { RouterProvider, createRouter } from "@tanstack/react-router" import { routeTree } from "./routeTree.gen" import { UIProvider } from "@workspaces/ui" const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, }) declare module "@tanstack/react-router" { interface Register { router: typeof router } } const rootElement = document.getElementById("app")! if (!rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render( , ) } ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { createFileRoute } from "@tanstack/react-router" import { Button } from "@workspaces/ui" export const Route = createFileRoute("/")({ component: App }) function App() { return Click me! } ``` That's it! You've successfully set up Yamada UI. ## Scripts ### ColorModeScript To use [Color Mode](https://yamada-ui.com/docs/theming/color-mode.md), you need to add `ColorModeScript` to the `body` to ensure it works correctly. This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: "light" }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], resolve: { tsconfigPaths: true }, }) export default config ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: themeConfig.defaultColorMode }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], resolve: { tsconfigPaths: true }, }) export default config ``` ### ThemeSchemeScript To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly. This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], resolve: { tsconfigPaths: true }, }) export default config ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: themeConfig.defaultThemeScheme }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], resolve: { tsconfigPaths: true }, }) export default config ``` ## Component Integration You can integrate TanStack Router components such as [Link](https://tanstack.com/router/latest/docs/guide/navigation#link-component) with Yamada UI components. ### Link ```tsx import type { LinkComponent } from "@tanstack/react-router" import { createLink } from "@tanstack/react-router" import { Button, IconButton, Link } from "@workspaces/ui" const CreatedLink = createLink(Link) export const RouterLink: LinkComponent = (props) => { return } const CreatedLinkButton = createLink(Button) export const RouterLinkButton: LinkComponent = ( props, ) => { return } const CreatedLinkIconButton = createLink(IconButton) export const RouterLinkIconButton: LinkComponent< typeof CreatedLinkIconButton > = (props) => { return } ``` # TanStack Start --- title: TanStack Start description: "A guide for installing and using Yamada UI with TanStack Start projects." --- # TanStack Start A guide for installing and using Yamada UI with TanStack Start projects. ## Installation ### Create application Create TanStack Start application. ```bash pnpm create @tanstack/start my-app ``` ```bash npx create @tanstack/start my-app ``` ```bash yarn create @tanstack/start my-app ``` ```bash bun create @tanstack/start my-app ``` ### Setup Running the command will create the necessary files and folders in your project. ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### Install the package Install `@workspaces/ui` to your application. ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### Add provider After installing, add `UIProvider` to the root of your application. To suppress hydration errors, add `suppressHydrationWarning` to the `html` and `body` tags. ```tsx import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router" import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools" import { TanStackDevtools } from "@tanstack/react-devtools" import { UIProvider } from "@workspaces/ui" export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "TanStack Start Starter" }, ], }), shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { return ( {children} , }, ]} /> ) } ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { createFileRoute } from "@tanstack/react-router" import { Button } from "@workspaces/ui" export const Route = createFileRoute("/")({ component: App }) function App() { return Click me! } ``` That's it! You've successfully set up Yamada UI. ## Scripts ### ColorModeScript To use [Color Mode](https://yamada-ui.com/docs/theming/color-mode.md), you need to add `ColorModeScript` to the `body` to ensure it works correctly. This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router" import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools" import { TanStackDevtools } from "@tanstack/react-devtools" import { ColorModeScript, UIProvider } from "@workspaces/ui" import { createServerFn } from "@tanstack/react-start" import { getRequestHeader } from "@tanstack/react-start/server" const getCookie = createServerFn({ method: "GET" }).handler(async () => { return getRequestHeader("cookie") ?? "" }) export const Route = createRootRoute({ loader: async () => ({ cookie: await getCookie(), }), head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "TanStack Start Starter" }, ], }), shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { const { cookie } = Route.useLoaderData() return ( {children} , }, ]} /> ) } ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```tsx import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router" import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools" import { TanStackDevtools } from "@tanstack/react-devtools" import { ColorModeScript, UIProvider } from "@workspaces/ui" import { createServerFn } from "@tanstack/react-start" import { getRequestHeader } from "@tanstack/react-start/server" import { config } from "@workspaces/theme" const getCookie = createServerFn({ method: "GET" }).handler(async () => { return getRequestHeader("cookie") ?? "" }) export const Route = createRootRoute({ loader: async () => ({ cookie: await getCookie(), }), head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "TanStack Start Starter" }, ], }), shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { const { cookie } = Route.useLoaderData() return ( {children} , }, ]} /> ) } ``` ### ThemeSchemeScript To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly. This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```tsx import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router" import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools" import { TanStackDevtools } from "@tanstack/react-devtools" import { ThemeSchemeScript, UIProvider } from "@workspaces/ui" import { createServerFn } from "@tanstack/react-start" import { getRequestHeader } from "@tanstack/react-start/server" const getCookie = createServerFn({ method: "GET" }).handler(async () => { return getRequestHeader("cookie") ?? "" }) export const Route = createRootRoute({ loader: async () => ({ cookie: await getCookie(), }), head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "TanStack Start Starter" }, ], }), shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { const { cookie } = Route.useLoaderData() return ( {children} , }, ]} /> ) } ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```tsx import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router" import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools" import { TanStackDevtools } from "@tanstack/react-devtools" import { ThemeSchemeScript, UIProvider } from "@workspaces/ui" import { createServerFn } from "@tanstack/react-start" import { getRequestHeader } from "@tanstack/react-start/server" import { config } from "@workspaces/theme" const getCookie = createServerFn({ method: "GET" }).handler(async () => { return getRequestHeader("cookie") ?? "" }) export const Route = createRootRoute({ loader: async () => ({ cookie: await getCookie(), }), head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "TanStack Start Starter" }, ], }), shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { const { cookie } = Route.useLoaderData() return ( {children} , }, ]} /> ) } ``` ## Component Integration You can integrate TanStack Start components such as [Link](https://tanstack.com/router/latest/docs/guide/navigation#link-component) with Yamada UI components. ### Link ```tsx import type { LinkComponent } from "@tanstack/react-router" import { createLink } from "@tanstack/react-router" import { Button, IconButton, Link } from "@workspaces/ui" const CreatedLink = createLink(Link) export const RouterLink: LinkComponent = (props) => { return } const CreatedLinkButton = createLink(Button) export const RouterLinkButton: LinkComponent = ( props, ) => { return } const CreatedLinkIconButton = createLink(IconButton) export const RouterLinkIconButton: LinkComponent< typeof CreatedLinkIconButton > = (props) => { return } ``` # Vite --- title: Vite description: "A guide for installing and using Yamada UI with Vite.js projects" --- # Vite A guide for installing and using Yamada UI with Vite.js projects ## Installation ### Create application Create Vite application. ```bash pnpm create vite my-app --template react-ts ``` ```bash npm create vite my-app -- --template react-ts ``` ```bash yarn create vite my-app --template react-ts ``` ```bash bun create vite my-app --template react-ts ``` ### Setup Running the command will create the necessary files and folders in your project. ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### Install the package Install `@workspaces/ui` to your application. ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### Add provider After installing, add `UIProvider` to the root of your application. ```tsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import App from "./App.tsx" import { UIProvider } from "@workspaces/ui" createRoot(document.getElementById("root")!).render( , ) ``` ### Use components After adding `UIProvider`, you can use the components in your application. ```tsx import { Button } from "@workspaces/ui" function App() { return Click me! } export default App ``` That's it! You've successfully set up Yamada UI. ## Scripts ### ColorModeScript To use [Color Mode](https://yamada-ui.com/docs/theming/color-mode.md), you need to add `ColorModeScript` to the `body` to ensure it works correctly. This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: "light" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` If you change the `defaultColorMode` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ColorModeScript`. ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config } from "@workspace/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: config.defaultColorMode }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` ### ThemeSchemeScript To use [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly. This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads. ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ``` If you change the `defaultThemeScheme` in your [config](https://yamada-ui.com/docs/theming/configuration/overview.md), set the `defaultValue` prop on `ThemeSchemeScript`. ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" import { config } from "@workspace/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: config.defaultThemeScheme }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ``` # Airy --- title: Airy description: "`Airy` is a component that provides a smooth animation to switch between two elements." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/airy/airy.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/airy - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-airy--basic --- # Airy `Airy` is a component that provides a smooth animation to switch between two elements. ```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. | ## Accessibility The `Airy` follows the [WAI-ARIA - Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) for accessibility. When `aria-label` is set, it will be read aloud by screen readers. ```tsx } to={} /> ``` ### Keyboard Navigation | Key | Description | State | | ---------------- | ------------------------------------- | ----- | | `Enter`, `Space` | When element has focus, activates it. | - | ## Similar Components - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. # Collapse --- title: Collapse description: "`Collapse` is a component that allows you to expand or collapse an element for display." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/collapse/collapse.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/collapse - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-collapse--basic --- # Collapse `Collapse` is a component that allows you to expand or collapse an element for display. ```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. | ## Similar Components - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. ## Used By Components & Hooks - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Sidebar](https://yamada-ui.com/docs/components/sidebar.md): `Sidebar` is a component used to display a list of items in a sidebar. - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format. # FadeScale --- title: FadeScale description: "`FadeScale` is a component that gradually scales up to reveal or scales down to hide an element." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fade-scale - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-fadescale--basic --- # FadeScale `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. ```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. | ## Similar Components - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. ## Used By Components & Hooks - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. # Fade --- title: Fade description: "`Fade` is a component that gradually shows or hides an element." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fade/fade.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fade - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-fade--basic --- # Fade `Fade` is a component that gradually shows or hides an element. ```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. | ## Similar Components - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. ## Used By Components & Hooks - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Dropzone](https://yamada-ui.com/docs/components/dropzone.md): `Dropzone` is a component used for uploading files via drag and drop. - [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information. # Flip --- title: Flip description: "`Flip` is a component that provides an animation to switch between two elements while flipping." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip/flip.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-flip--basic --- # Flip `Flip` is a component that provides an animation to switch between two elements while flipping. ```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. | ## Accessibility The `Flip` follows the [WAI-ARIA - Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) for accessibility. When `aria-label` is set, it will be read aloud by screen readers. ```tsx } to={} /> ``` ### Keyboard Navigation | Key | Description | State | | ---------------- | ------------------------------------- | ----- | | `Enter`, `Space` | When element has focus, activates it. | - | ## Similar Components - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. # Loading --- title: Loading description: "`Loading` is a component displayed during waiting times, such as when data is being loaded." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/loading/loading.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/loading - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-loading--basic --- # Loading `Loading` is a component displayed during waiting times, such as when data is being loaded. ```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 ``` ### Use Suspense ```tsx const SuspendButton = ({ children }: { children: React.ReactNode }) => { const [suspend, setSuspend] = useState(false) if (suspend) { throw new Promise((resolve) => { setTimeout(() => { setSuspend(false) resolve() }, 2000) }) } return ( setSuspend(true)} w="full"> {children} ) } return ( {([loadingScheme, color]) => ( {loadingScheme} )} ) ``` ## 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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. | ## Similar Components - [CircleProgress](https://yamada-ui.com/docs/components/circle-progress.md): `CircleProgress` is a component that displays progress in a circular progress bar. - [Progress](https://yamada-ui.com/docs/components/progress.md): `Progress` is a component for visually indicating progress. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. - [Tip](https://yamada-ui.com/docs/components/tip.md): `Tip` is a component that displays supplementary information with a built-in icon trigger. ## Uses Components & Hooks - [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Text](https://yamada-ui.com/docs/components/text.md): `Text` is a component that represents a paragraph of text. By default, it renders a `p` element. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [Center](https://yamada-ui.com/docs/components/center.md): `Center` is a component that aligns the child elements in the center within the component. - [useTimeout](https://yamada-ui.com/docs/hooks/use-timeout.md): `useTimeout` is a custom hook that executes a function after a specified number of milliseconds. ## Used By Components & Hooks - [Alert](https://yamada-ui.com/docs/components/alert.md): `Alert` is a component that conveys information to the user. - [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals. - [Dropzone](https://yamada-ui.com/docs/components/dropzone.md): `Dropzone` is a component used for uploading files via drag and drop. - [Sidebar](https://yamada-ui.com/docs/components/sidebar.md): `Sidebar` is a component used to display a list of items in a sidebar. - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format. - [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md): `useAsyncCallback` is a custom hook for managing asynchronous callbacks. # Motion --- title: Motion description: "`Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/motion - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-motion-animation--basic --- # Motion `Motion` is a convenient component that extends the Yamada UI Style Props to `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 ( ) } ``` ## Similar Components - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. ## Used By Components & Hooks - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [ActionBar](https://yamada-ui.com/docs/components/action-bar.md): `ActionBar` is a component that is used to display a bottom action bar with a set of actions. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded. - [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information. - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. - [Reorder](https://yamada-ui.com/docs/components/reorder.md): `Reorder` is a component that allows you to change the order of items using drag and drop. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [SegmentedControl](https://yamada-ui.com/docs/components/segmented-control.md): `SegmentedControl` is a component used for allowing users to select one option from multiple choices. - [Sidebar](https://yamada-ui.com/docs/components/sidebar.md): `Sidebar` is a component used to display a list of items in a sidebar. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Snacks](https://yamada-ui.com/docs/components/snacks.md): `Snacks` is a component for controlling notifications used in forms and other similar situations. - [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element. - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format. # Ripple --- title: Ripple description: "`Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/ripple/ripple.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/ripple --- # Ripple `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. ```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. | ## Similar Components - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. ## Used By Components & Hooks - [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals. # Rotate --- title: Rotate description: "`Rotate` is a component that provides an animation to switch between two elements while rotating." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate/rotate.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-rotate--basic --- # Rotate `Rotate` is a component that provides an animation to switch between two elements while rotating. ```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. | ## Accessibility The `Rotate` follows the [WAI-ARIA - Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) for accessibility. When `aria-label` is set, it will be read aloud by screen readers. ```tsx } to={} /> ``` ### Keyboard Navigation | Key | Description | State | | ---------------- | ------------------------------------- | ----- | | `Enter`, `Space` | When element has focus, activates it. | - | ## Similar Components - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. # Skeleton --- title: Skeleton description: "`Skeleton` is a component that acts as a placeholder until content is loaded." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/skeleton/skeleton.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/skeleton - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-skeleton--basic --- # Skeleton `Skeleton` is a component that acts as a placeholder until content is loaded. ```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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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. | | `startColor` | - | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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. | | `startColor` | - | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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. | | `rootProps` | - | `HTMLStyledProps` | Props for the root element. | | `startColor` | - | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The color at the animation start. | ## Similar Components - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [EmptyState](https://yamada-ui.com/docs/components/empty-state.md): `EmptyState` is a component used to display when a resource is empty or unavailable. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating. - [Alert](https://yamada-ui.com/docs/components/alert.md): `Alert` is a component that conveys information to the user. # SlideFade --- title: SlideFade description: "`SlideFade` is a component that gradually shows or hides an element while moving it from a specified position." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide-fade/slide-fade.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide-fade - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slidefade--basic --- # SlideFade `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. ```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. | ## Similar Components - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. ## Used By Components & Hooks - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. # Slide --- title: Slide description: "`Slide` is a component that shows or hides an element from the corners of the page." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide/slide.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slide--basic --- # Slide `Slide` is a component that shows or hides an element from the corners of the page. ```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. | | `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. | ## Similar Components - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner. - [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`. ## Used By Components & Hooks - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. # AreaChart --- title: AreaChart description: "`AreaChart` is a component for drawing area charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/area-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-areachart--basic --- # AreaChart `AreaChart` is a component for drawing area charts to compare multiple sets of data. ```tsx interface Data { date: string desktop: number mobile: number tablet: number } const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo( () => [ { date: "2026-03-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, { date: "2026-04-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, { date: "2026-05-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, { date: "2026-06-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, { date: "2026-07-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, { date: "2026-08-01", desktop: faker.number.int({ max: 2000, min: 1000 }), mobile: faker.number.int({ max: 4000, min: 3000 }), tablet: faker.number.int({ max: 3000, min: 2000 }), }, ], [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Usage ```tsx import { AreaChart } from "@yamada-ui/react" ``` ```tsx import { AreaChart } from "@/components/ui" ``` ```tsx import { AreaChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM")} /> dayjs(value as string).format("MMM")} /> ) ``` ### Change Size ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(size, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Change Color Scheme ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries( [{ dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }], "blue", ), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "blue" }, { dataKey: "tablet", color: "green" }, { dataKey: "mobile", color: "red" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Gradient To add a gradient, set `withGradient` or `areaProps.withGradient` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries( [{ dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }], "blue", ), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Type To change the type, set `type` in `series` or `areaProps.type` to `"monotone"`, `"linear"`, etc. The default is `"monotone"`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(type, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Stacked To stack the series, set `stackId` or `areaProps.stackId` to a string. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "blue" }, { dataKey: "tablet", color: "green" }, { dataKey: "mobile", color: "red" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Percent To make the series a percentage, set `stackId` or `areaProps.stackId` to a string and set `chartProps.stackOffset` to `"expand"`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "blue" }, { dataKey: "tablet", color: "green" }, { dataKey: "mobile", color: "red" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Y Axis To add the Y axis, set `withYAxis` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` To change the orientation of the Y axis, set `yAxisProps.orientation` to `"start"` or `"end"`. The default is `"start"`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ orientation: "end" }} /> ) ``` ### Add Legend To add the legend, set `withLegend` to `true`. The default is `false`. To change the placement of the legend, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "blue" }, { dataKey: "tablet", color: "green" }, { dataKey: "mobile", color: "red" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Name To change the name of the tooltip or legend, set `name` to a string in `series`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", name: "Desktop", color: "blue" }, { dataKey: "tablet", name: "Tablet", color: "green" }, { dataKey: "mobile", name: "Mobile", color: "red" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Grid To change the grid, set `horizontal` and `vertical` to a boolean in `gridProps`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(value, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Add Dot To add a dot, set `dot` of `series` or `areaProps.dot` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Label To add a label, set `label` of `series` or `areaProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Unit To add a unit, use `formatter` or `tickFormatter` or set `unit` to a string. ```tsx preview functional const series = useMemo[]>( () => AreaChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( `${(Number(value) / 1000).toFixed(1)}k`, }, }} chartProps={{ margin: { right: 16 } }} tooltipProps={{ formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k`, labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], tickFormatter: (value) => (value / 1000).toFixed(1), ticks: [0, 2500, 5000, 7500, 10000], unit: "k", }} /> ) ``` ### Sync To sync the chart, set `syncId` to a string. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Format To format the chart, use `formatter` or `tickFormatter` etc. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( [ Number(value).toLocaleString(), toTitleCase(name), ], labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ tickFormatter: (value) => value.toLocaleString(), }} /> ) ``` ### Add Reference Line ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} > ) ``` ### Add Tick Line To add a tick line, set `tickLine` to `true` in `xAxisProps` or `yAxisProps`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: true, }} yAxisProps={{ tickFormatter: (value) => value.toLocaleString(), tickLine: true, }} /> ) ``` ### Add Axis Label To add an axis label, set `label` to a string in `xAxisProps` or `yAxisProps`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: "Date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ label: "Value" }} /> ) ``` ### Set Domain To set the domain, set `domain` to an array in `yAxisProps`. To set the ticks, set `ticks` to an array in `yAxisProps`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000], }} /> ) ``` ### Add Tooltip Cursor To add a tooltip cursor, set `cursor` to `true` in `tooltipProps`. The default is `false`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM"), }} /> ) ``` ### Hide X Axis To hide the X axis, set `withXAxis` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( null }} /> ) ``` ### Hide Active Dot To hide the active dot, set `activeDot` or `areaProps.activeDot` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM"), }} /> ) ``` ### Customize Axis ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: { color: ["red", "blue"] }, }} yAxisProps={{ label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickLine: { color: ["red", "blue"] }, }} /> ) ``` ### Customize Dot ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet", dot: { fill: "blue" } }, { dataKey: "mobile", dot: { fill: ["white", "black"], stroke: "red", strokeWidth: 1 }, }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Active Dot ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Label ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "desktop" }], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000], }} /> ) ``` ### Customize Grid ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Tooltip Cursor ```tsx const series = useMemo[]>( () => AreaChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # BarChart --- title: BarChart description: "`BarChart` is a component for drawing bar charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/bar-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-barchart--basic --- # BarChart `BarChart` is a component for drawing bar charts to compare multiple sets of data. ```tsx interface Data { date: string desktop: number mobile: number tablet: number } const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo( () => [ { date: "2026-03-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-04-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-05-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-06-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-07-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-08-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, ], [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Usage ```tsx import { BarChart } from "@yamada-ui/react" ``` ```tsx import { BarChart } from "@/components/ui" ``` ```tsx import { BarChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM")} /> dayjs(value).format("MMM")} /> ) ``` ### Change Size ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(size, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Change Color Scheme ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue" }, { dataKey: "mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Range To display a range, set the values of the `data` items as `[min, max]` arrays. ```tsx const series = useMemo[]>( () => [{ dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }], [], ) const data = useMemo( () => Array.from({ length: 6 }, (_, index) => ({ date: dayjs().add(index, "month").format("YYYY-MM-DD"), desktop: [ faker.number.int({ min: 1000, max: 2000 }), faker.number.int({ min: 4000, max: 5000 }), ], mobile: [ faker.number.int({ min: 1000, max: 2000 }), faker.number.int({ min: 4000, max: 5000 }), ], tablet: [ faker.number.int({ min: 1000, max: 2000 }), faker.number.int({ min: 4000, max: 5000 }), ], })), [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Stacked To stack the series, set `stackId` in `series` or `barProps.stackId` to a string. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue", radius: [0, 0, 4, 4], stackId: "stack", }, { dataKey: "mobile", color: "green", radius: [4, 4, 0, 0], stackId: "stack", }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Percent To make the series a percentage, set `stackId` or `barProps.stackId` to a string and set `chartProps.stackOffset` to `"expand"`. ```tsx preview functional const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue" }, { dataKey: "mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ tickFormatter: (value) => `${(Number(value) * 100).toFixed(0)}%`, }} /> ) ``` ### Add Y Axis To add the Y axis, set `withYAxis` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` To change the orientation of the Y axis, set `yAxisProps.orientation` to `"start"` or `"end"`. The default is `"start"`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ orientation: "end" }} /> ) ``` ### Add Legend To add the legend, set `withLegend` to `true`. The default is `false`. To change the placement of the legend, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue" }, { dataKey: "mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Name To change the name of the tooltip or legend, set `name` to a string in `series`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", name: "Desktop", color: "red" }, { dataKey: "tablet", name: "Tablet", color: "blue" }, { dataKey: "mobile", name: "Mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Grid To change the grid, set `horizontal` and `vertical` to a boolean in `gridProps`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(value, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Add Label To add a label, set `label` of `series` or `barProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Unit To add a unit, use `formatter` or `tickFormatter` or set `unit` to a string. ```tsx preview functional const series = useMemo[]>( () => BarChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( `${(Number(value) / 1000).toFixed(1)}k`, }, }} chartProps={{ margin: { right: 16 } }} tooltipProps={{ formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k`, labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], tickFormatter: (value) => (value / 1000).toFixed(1), ticks: [0, 2500, 5000, 7500, 10000], unit: "k", }} /> ) ``` ### Vertical To make the chart vertical, set `layout` to `"vertical"` in `chartProps` and adjust the type of the axes. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ type: "number" }} yAxisProps={{ type: "category", dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Sync To sync the chart, set `syncId` to a string. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Format To format the chart, use `formatter` or `tickFormatter` etc. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( [ Number(value).toLocaleString(), toTitleCase(name), ], labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ tickFormatter: (value) => value.toLocaleString() }} /> ) ``` ### Add Reference Line ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} > ) ``` ### Add Tick Line To add a reference line, set `tickLine` to `true` in `xAxisProps` or `yAxisProps`. The default is `false`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: true, }} yAxisProps={{ tickLine: true }} /> ) ``` ### Add Axis Label To add an axis label, set `label` to a string in `xAxisProps` or `yAxisProps`. The default is `false`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: "Date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ label: "Value" }} /> ) ``` ### Set Domain To set the domain, set `domain` to an array in `yAxisProps`. To set the ticks, set `ticks` to an array in `yAxisProps`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 5000], ticks: [0, 1000, 2000, 3000, 4000, 5000], }} /> ) ``` ### Change Gap To change the gap, set `barCategoryGap` and `barGap` in `chartProps` to a number or string. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Radius To change the radius, set `radius` in `series` or `barProps.radius` to a number or an array. ```tsx const series = useMemo[]>( () => [ { color: "red", dataKey: "desktop", radius: 8 }, { color: "blue", dataKey: "tablet", radius: [0, 0, 8, 8], stackId: "stack", }, { color: "green", dataKey: "mobile", radius: [8, 8, 0, 0], stackId: "stack", }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Tooltip Cursor To add a tooltip cursor, set `cursor` to `true` in `tooltipProps`. The default is `false`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide X Axis To hide the X axis, set `withXAxis` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( null }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM"), }} /> ) ``` ### Customize Axis ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: { color: ["red", "blue"] }, }} yAxisProps={{ label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickLine: { color: ["red", "blue"] }, }} /> ) ``` ### Customize Label ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "desktop" }], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000], }} /> ) ``` ### Customize Grid ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Tooltip Cursor ```tsx const series = useMemo[]>( () => BarChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # ComposedChart --- title: ComposedChart description: "`ComposedChart` is a component for drawing composed charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/composed-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-composedchart--basic --- # ComposedChart `ComposedChart` is a component for drawing composed charts to compare multiple sets of data. ```tsx interface Data { date: string desktop: number mobile: number tablet: number } const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo( () => [ { date: "2026-03-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-04-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-05-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-06-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-07-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-08-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, ], [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Usage :```tsx import { ComposedChart } from "@yamada-ui/react" ```` ```tsx import { ComposedChart } from "@/components/ui" ```` ````tsx import { ComposedChart } from "@workspaces/ui" ```: ```tsx ```` ### Composition ```tsx const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM")} /> dayjs(value).format("MMM")} /> ) ``` ### Change Size ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(size, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Change Color Scheme ```tsx const series = useMemo( () => ComposedChart.mergeSeries( [ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ], "blue", ), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [ ["bar", { color: "blue", dataKey: "desktop" }], ["area", { color: "green", dataKey: "tablet" }], ["line", { color: "red", dataKey: "mobile" }], ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Y Axis To add a Y axis, set `withYAxis` to `true`. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` To change the Y axis orientation, set `orientation` in `yAxisProps` to `"start"` or `"end"`. The default is `"start"`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ orientation: "end" }} /> ) ``` ### Add Legend To add a legend, set `withLegend` to `true`. The default is `false`. To change the legend placement, set `placement` in `legendProps` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [ ["bar", { color: "blue", dataKey: "desktop" }], ["area", { color: "green", dataKey: "tablet" }], ["line", { color: "red", dataKey: "mobile" }], ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Name To change the name of the tooltip or legend, set `name` in `series`. ```tsx const series = useMemo[]>( () => [ ["bar", { name: "Desktop", color: "blue", dataKey: "desktop" }], ["area", { name: "Tablet", color: "green", dataKey: "tablet" }], ["line", { name: "Mobile", color: "red", dataKey: "mobile" }], ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Grid To change the grid, set `horizontal` and `vertical` to a boolean in `gridProps`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(value, index) => ( dayjs(value).format("MMM"), }} /> )} ) ``` ### Change Line Type To change the type, set `type` in `series` or `lineProps.type` or `areaProps.type` to `"monotone"`, `"linear"`, etc. The default is `"monotone"`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(type, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Add Line Dot To add a dot to the line, set `dot` in `series` or `lineProps.dot` or `areaProps.dot` to `true`. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Range Bar To add a range bar, set the value to an `[min, max]` array in the data item. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo( () => Array.from({ length: 6 }, (_, index) => ({ date: dayjs().add(index, "month").format("YYYY-MM-DD"), desktop: [ faker.number.int({ min: 1000, max: 2000 }), faker.number.int({ min: 4000, max: 5000 }), ], mobile: faker.number.int({ min: 1000, max: 5000 }), tablet: faker.number.int({ min: 1000, max: 5000 }), })), [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Stacked Bar To stack the bars, set `stackId` in `series` or `barProps.stackId` to a string. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ ["bar", { dataKey: "desktop", radius: [0, 0, 4, 4] }], ["bar", { dataKey: "tablet", radius: [4, 4, 0, 0] }], ["line", { dataKey: "mobile" }], ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Bar Size To change the bar size, set `barSize` in `series` or `barProps.barSize` to a number. The default is `40`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Bar Radius To change the bar radius, set `radius` in `series` or `barProps.radius` to a number or an array. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Bar Gap To change the bar gap, set `barGap` in `chartProps` and `barSize` in `barProps` to a number or string. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ ["bar", { dataKey: "desktop" }], ["bar", { dataKey: "tablet" }], ["line", { dataKey: "mobile" }], ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Show Label To show the label, set `label` in `series` or `lineProps.label` or `areaProps.label` or `barProps.label` to `true`. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000] }} /> ) ``` ### Add Unit To add a unit, use `formatter` or `tickFormatter` or set `unit` to a string. ```tsx preview functional const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( `${(Number(value) / 1000).toFixed(1)}k` }, }} tooltipProps={{ formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k`, labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], tickFormatter: (value) => (value / 1000).toFixed(1), ticks: [0, 2500, 5000, 7500, 10000], unit: "k", }} /> ) ``` ### Sync To sync the charts, set `syncId` to a string. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Format To format the chart, use `formatter` or `tickFormatter` etc. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( [ Number(value).toLocaleString(), toTitleCase(name), ], labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ tickFormatter: (value) => value.toLocaleString() }} /> ) ``` ### Add Reference Line ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} > ) ``` ### Add Tick Line To add a tick line to the axis, set `tickLine` in `xAxisProps` or `yAxisProps` to `true`. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: true, }} yAxisProps={{ tickLine: true }} /> ) ``` ### Add Axis Label To add a label to the axis, set `label` in `xAxisProps` or `yAxisProps` to a string. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: "Date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ label: "Value" }} /> ) ``` ### Set Domain To set the range, set `domain` to an array in `yAxisProps`. To set the interval, set `ticks` to an array in `yAxisProps`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 5000], ticks: [0, 1000, 2000, 3000, 4000, 5000] }} /> ) ``` ### Add Tooltip Cursor To add a tooltip cursor, set `cursor` to `true` in `tooltipProps`. The default is `false`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide X Axis To hide the X axis, set `withXAxis` to `false`. The default is `true`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( null }} /> ) ``` ### Hide Active Dot To hide the active dot, set `activeDot` in `series` or `lineProps.activeDot` or `areaProps.activeDot` to `false`. The default is `true`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo( () => ComposedChart.mergeSeries([ [ "bar", { dataKey: "desktop" }, ] satisfies ComposedChart.ComposedProps, [ "area", { dataKey: "tablet" }, ] satisfies ComposedChart.ComposedProps, [ "line", { dataKey: "mobile" }, ] satisfies ComposedChart.ComposedProps, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM"), }} /> ) ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # DonutChart --- title: DonutChart description: "`DonutChart` is a component for drawing donut charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/donut-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-donutchart--basic --- # DonutChart `DonutChart` is a component for drawing donut charts to compare multiple sets of data. ```tsx interface Data { browser: string visits: number fill?: CSSProps["fill"] } const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData([ { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "firefox", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "opera", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "other", visits: faker.number.int({ max: 5000, min: 1000 }), }, ]), [], ) return ``` ## Usage ```tsx import { DonutChart } from "@yamada-ui/react" ``` ```tsx import { DonutChart } from "@/components/ui" ``` ```tsx import { DonutChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( Donut Chart ) ``` ### Change Size ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( {(size, index) => ( )} ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData(), "blue"), [], ) return ``` ### Change Sector Colors ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Hide Sector Stroke To hide sector stroke lines, set `sectorStroke` to `"none"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Add Legend To add the legend, set `withLegend` to `true`. The default is `false`. To change the placement of the legend, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Display Multiple Donuts To display multiple donuts in one chart, set multiple entries in `series`. ```tsx const series = useMemo[]>( () => [ { dataKey: "visits", innerRadius: "80%", nameKey: "browser", }, { dataKey: "downloads", nameKey: "browser", innerRadius: "50%", outerRadius: "70%", }, ], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ``` ### Add Label To display labels, set `label` of `series` or `donutProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Add Label Line To display label lines, set `labelLine` of `series` or `donutProps.labelLine` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Change Label Offset To change the label offset, set `label.offset` of `series` or `donutProps.label.offset` to a number. The default is `0`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Add Label List To display values with label list, set `labelList` to `true` of `series` or `donutProps.labelList`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Center Label ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) const total = useMemo( () => data.reduce((acc, { visits }) => acc + visits, 0), [data], ) return ( Visitors { if (!viewBox) return null if (!("cx" in viewBox) || !("cy" in viewBox)) return null return ( {total.toLocaleString()} Visitors ) }} /> ) ``` ### Change Padding Angle To change the padding angle, set `paddingAngle` of `series` or `donutProps.paddingAngle` to a number. The default is `0`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Start Angle To change the start angle, set `startAngle` of `series` or `donutProps.startAngle` to a number. The default is `90`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change End Angle To change the end angle, set `endAngle` of `series` or `donutProps.endAngle` to a number. The default is `-270`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Inner Radius To change the inner radius, set `innerRadius` of `series` or `donutProps.innerRadius` to a number or string. The default is `"70%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Outer Radius To change the outer radius, set `outerRadius` of `series` or `donutProps.outerRadius` to a number or string. The default is `"100%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Sync To sync charts, set `syncId` to a string. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Format To format values and labels, use `formatter`. ```tsx preview functional const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( `${(percent * 100).toFixed(0)}%`, }, labelLine: true, labelList: { color: "white", formatter: (value) => (isString(value) ? toTitleCase(value) : value), }, }} tooltipProps={{ formatter: (value, name = "") => [ Number(value).toLocaleString(), toTitleCase(name), ], }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => DonutChart.mergeData(createPolarChartData()), [], ) return ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # LineChart --- title: LineChart description: "`LineChart` is a component for drawing line charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/line-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-linechart--basic --- # LineChart `LineChart` is a component for drawing line charts to compare multiple sets of data. ```tsx interface Data { date: string desktop: number mobile: number tablet: number } const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo( () => [ { date: "2026-03-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-04-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-05-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-06-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-07-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, { date: "2026-08-01", desktop: faker.number.int({ max: 5000, min: 1000 }), mobile: faker.number.int({ max: 5000, min: 1000 }), tablet: faker.number.int({ max: 5000, min: 1000 }), }, ], [], ) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Usage ```tsx import { LineChart } from "@yamada-ui/react" ``` ```tsx import { LineChart } from "@/components/ui" ``` ```tsx import { LineChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM")} /> dayjs(value).format("MMM")} /> ) ``` ### Change Size ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(size, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Change Color Scheme ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue" }, { dataKey: "mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Type To change the type, set `type` in `series` or `lineProps.type` to `"monotone"`, `"linear"`, etc. The default is `"monotone"`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(type, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Add Y Axis To add the Y axis, set `withYAxis` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` To change the orientation of the Y axis, set `yAxisProps.orientation` to `"start"` or `"end"`. The default is `"start"`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ orientation: "end" }} /> ) ``` ### Add Legend To add the legend, set `withLegend` to `true`. The default is `false`. To change the placement of the legend, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", color: "red" }, { dataKey: "tablet", color: "blue" }, { dataKey: "mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Name To change item names in the tooltip or legend, set `name` in `series`. ```tsx const series = useMemo[]>( () => [ { dataKey: "desktop", name: "Desktop", color: "red" }, { dataKey: "tablet", name: "Tablet", color: "blue" }, { dataKey: "mobile", name: "Mobile", color: "green" }, ], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Change Grid To change the grid, set booleans in `gridProps.horizontal` and `gridProps.vertical`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( {(value, index) => ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> )} ) ``` ### Add Dot To add dots, set `dot` of `series` or `lineProps.dot` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Label To add labels, set `label` of `series` or `lineProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Add Unit To add units, use `formatter`, `tickFormatter`, or set a string in `unit`. ```tsx preview functional const series = useMemo[]>( () => LineChart.mergeSeries([{ dataKey: "desktop" }]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( `${(Number(value) / 1000).toFixed(1)}k`, }, }} tooltipProps={{ formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k`, labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], tickFormatter: (value) => (value / 1000).toFixed(1), ticks: [0, 2500, 5000, 7500, 10000], unit: "k", }} /> ) ``` ### Sync To sync charts, set `syncId` to a string. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Format To format values, use `formatter`, `tickFormatter`, etc. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( [ Number(value).toLocaleString(), toTitleCase(name), ], labelFormatter: (value) => dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ tickFormatter: (value) => value.toLocaleString(), }} /> ) ``` ### Add Reference Line ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} > ) ``` ### Add Tick Line To add tick lines, set `xAxisProps.tickLine` or `yAxisProps.tickLine` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: true, }} yAxisProps={{ tickLine: true }} /> ) ``` ### Add Axis Label To add axis labels, set a string in `xAxisProps.label` or `yAxisProps.label`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: "Date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ label: "Value" }} /> ) ``` ### Set Domain To set the range, set `yAxisProps.domain` to `[min, max]`. To set the interval, set an array in `yAxisProps.ticks`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 5000], ticks: [0, 1000, 2000, 3000, 4000, 5000], }} /> ) ``` ### Add Tooltip Cursor To add a tooltip cursor, set `tooltipProps.cursor` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide X Axis To hide the X axis, set `withXAxis` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( null }} /> ) ``` ### Hide Active Dot To hide active dots, set `activeDot` in `series` or `lineProps.activeDot` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value).format("MMM"), }} /> ) ``` ### Customize Axis ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickFormatter: (value) => dayjs(value).format("MMM"), tickLine: { color: ["red", "blue"] }, }} yAxisProps={{ label: { color: ["red", "blue"] }, tick: { color: ["red", "blue"] }, tickLine: { color: ["red", "blue"] }, }} /> ) ``` ### Customize Dot ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet", dot: { fill: "blue" } }, { dataKey: "mobile", dot: { fill: ["white", "black"], stroke: "red", strokeWidth: 1 }, }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Active Dot ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Label ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "desktop" }], [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000], }} /> ) ``` ### Customize Grid ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), contentProps: { withSwatch: false }, }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ### Customize Tooltip Cursor ```tsx const series = useMemo[]>( () => LineChart.mergeSeries([ { dataKey: "desktop" }, { dataKey: "tablet" }, { dataKey: "mobile" }, ]), [], ) const data = useMemo(() => createCartesianChartData(), []) return ( dayjs(value as string).format("MMM"), }} xAxisProps={{ dataKey: "date", tickFormatter: (value) => dayjs(value).format("MMM"), }} /> ) ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # PieChart --- title: PieChart description: "`PieChart` is a component for drawing pie charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/pie-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-piechart--basic --- # PieChart `PieChart` is a component for drawing pie charts to compare multiple sets of data. ```tsx interface Data { browser: string visits: number fill?: CSSProps["fill"] } const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData([ { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "firefox", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "opera", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "other", visits: faker.number.int({ max: 5000, min: 1000 }), }, ]), [], ) return ``` ## Usage ```tsx import { PieChart } from "@yamada-ui/react" ``` ```tsx import { PieChart } from "@/components/ui" ``` ```tsx import { PieChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Change Size ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( {(size, index) => ( )} ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData(), "blue"), [], ) return ``` ### Change Sector Colors ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Hide Sector Stroke To hide sector stroke lines, set `sectorStroke` to `"none"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Add Legend To add the legend, set `withLegend` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` To change the placement of the legend, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Display Multiple Pies ```tsx const series = useMemo[]>( () => [ { dataKey: "visits", innerRadius: "80%", nameKey: "browser", }, { dataKey: "downloads", nameKey: "browser", outerRadius: "70%", }, ], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ``` ### Add Label To display labels, set `label` or `pieProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Add Label Line To display label lines, set `labelLine` of `series` or `pieProps.labelLine` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Change Label Offset To change the label offset, set `label.offset` of `series` or `pieProps.label.offset` to a number. The default is `0`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Add Label List To display values with label list, set `labelList` of `series` or `pieProps.labelList` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( ) ``` ### Change Padding Angle To change the padding angle, set `paddingAngle` of `series` or `pieProps.paddingAngle` to a number. The default is `0`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Start Angle To change the start angle, set `startAngle` of `series` or `pieProps.startAngle` to a number. The default is `90`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change End Angle To change the end angle, set `endAngle` of `series` or `pieProps.endAngle` to a number. The default is `-270`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Inner Radius To change the inner radius, set `innerRadius` of `series` or `pieProps.innerRadius` to a number or string. The default is `"0%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Change Outer Radius To change the outer radius, set `outerRadius` of `series` or `pieProps.outerRadius` to a number or string. The default is `"100%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Sync To sync charts, set `syncId` to a string. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ( ) ``` ### Format To format values and labels, use `formatter`. ```tsx preview functional const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ( `${(percent * 100).toFixed(0)}%`, }, labelLine: true, labelList: { color: "white", formatter: (value) => (isString(value) ? toTitleCase(value) : value), }, }} tooltipProps={{ formatter: (value, name = "") => [ Number(value).toLocaleString(), toTitleCase(name), ], }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => PieChart.mergeData(createPolarChartData()), [], ) return ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # RadarChart --- title: RadarChart description: "`RadarChart` is a component for drawing radar charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/radar-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-radarchart--basic --- # RadarChart `RadarChart` is a component for drawing radar charts to compare multiple sets of data. ```tsx interface Data { browser: string visits: number downloads: number fill?: CSSProps["fill"] } const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo( () => [ { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "firefox", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "opera", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "other", visits: faker.number.int({ max: 5000, min: 1000 }), downloads: faker.number.int({ max: 5000, min: 1000 }), }, ], [], ) return ``` ## Usage ```tsx import { RadarChart } from "@yamada-ui/react" ``` ```tsx import { RadarChart } from "@/components/ui" ``` ```tsx import { RadarChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Change Size ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( {(size, index) => ( )} ) ``` ### Change Color Scheme ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries( [{ dataKey: "visits" }, { dataKey: "downloads" }], "blue", ), [], ) const data = useMemo(() => createPolarChartData(), []) return ``` ### Change Color ```tsx const series = useMemo[]>( () => [ { color: "red", dataKey: "visits" }, { color: "green", dataKey: "downloads" }, ], [], ) const data = useMemo(() => createPolarChartData(), []) return ``` ### Add Radius Axis To add the radius axis, set `withRadiusAxis` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries( [{ dataKey: "visits" }, { dataKey: "downloads" }], "blue", ), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Change Radius Axis Angle To change the radius axis angle, set `radiusAxisProps.angle` to the desired angle. The default is `90`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries( [{ dataKey: "visits" }, { dataKey: "downloads" }], "blue", ), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Add Legend To add the legend, set `withLegend` to `true`. To change the placement, set `legendProps.placement`. ```tsx const series = useMemo[]>( () => [ { color: "red", dataKey: "visits" }, { color: "green", dataKey: "downloads" }, ], [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Add Label To display labels, set `label` or `radarProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "visits" }], [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Change Grid Type To change the grid type, set `gridProps.gridType` to `"polygon"` or `"circle"`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( {(gridType, index) => ( )} ) ``` ### Fill Grid ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( {(gridType, index) => ( )} ) ``` ### Display Line Only ```tsx const series = useMemo[]>( () => [ { color: "red", dataKey: "visits" }, { color: "green", dataKey: "downloads" }, ], [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Add Dot To display dots, set `dot` or `radarProps.dot` to `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Sync To sync charts, set `syncId` to a string. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Format To format the chart, use `formatter` or `tickFormatter` etc. ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "visits" }], [], ) const data = useMemo(() => createPolarChartData(), []) return ( toTitleCase(value) }} data={data} nameKey="browser" radarProps={{ dot: true, label: { formatter: (value) => Number(value).toLocaleString() }, }} series={series} tooltipProps={{ formatter: (value, name = "") => [ Number(value).toLocaleString(), toTitleCase(name), ], labelFormatter: (value) => toTitleCase(isString(value) ? value : ""), }} /> ) ``` ### Add Angle Axis Line To display the axis line of the angle axis, set `angleAxisProps.axisLine` to `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Add Angle Axis Tick Line To display tick lines of the angle axis, set `angleAxisProps.tickLine` to `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Set Domain To set the value range, set `radiusAxisProps.domain` to an array in `radiusAxisProps`. To set the ticks, set `radiusAxisProps.ticks` to an array in `radiusAxisProps`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Add Tooltip Cursor To display the tooltip cursor, set `tooltipProps.cursor` to `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Hide Angle Axis To hide the angle axis, set `withAngleAxis` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Hide Grid To hide the grid, set `withGrid` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Hide Active Dot To hide active dots, set `activeDot` or `radarProps.activeDot` to `false`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Customize Dot ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([ { dataKey: "visits", dot: { fill: "blue" } }, { dataKey: "downloads" }, ]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Customize Active Dot ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Customize Label ```tsx const series = useMemo[]>( () => [{ color: "blue", dataKey: "visits" }], [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ### Customize Tooltip Cursor ```tsx const series = useMemo[]>( () => RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]), [], ) const data = useMemo(() => createPolarChartData(), []) return ( ) ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # RadialChart --- title: RadialChart description: "`RadialChart` is a component for drawing radial charts to compare multiple sets of data." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/radial-chart.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-radialchart--basic --- # RadialChart `RadialChart` is a component for drawing radial charts to compare multiple sets of data. ```tsx interface Data { browser: string visits: number fill?: CSSProps["fill"] } const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => RadialChart.mergeData([ { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "firefox", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "opera", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }), }, { browser: "other", visits: faker.number.int({ max: 5000, min: 1000 }), }, ]), [], ) return ``` ## Usage ```tsx import { RadialChart } from "@yamada-ui/react" ``` ```tsx import { RadialChart } from "@/components/ui" ``` ```tsx import { RadialChart } from "@workspaces/ui" ``` ```tsx ``` ### Composition ```tsx const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ( ) ``` ### Change Size ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ( {(size, index) => ( )} ) ``` ### Change Color ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => RadialChart.mergeData(createPolarChartData(), "blue"), [], ) return ``` ### Change Sector Colors ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Add Legend To add the legend, set `withLegend` to `true`. To change placement, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => createPolarChartData().map((item, index) => ({ ...item, fill: ["cyan", "green", "orange", "red", "blue", "gray"][index], })), [], ) return ``` ### Add Label To display labels, set `label` or `radialProps.label` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => RadialChart.mergeData(createPolarChartData(), "blue"), [], ) return ( ) ``` ### Add Label List To display label list, set `labelList` or `radialProps.labelList` to `true`. The default is `false`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ( ) ``` ### Add Center Label ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => RadialChart.mergeData([ { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }) }, { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }) }, { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }) }, ]), [], ) const total = useMemo( () => data.reduce((acc, { visits }) => acc + visits, 0), [data], ) return ( Visitors { if (!viewBox) return null if (!("cx" in viewBox) || !("cy" in viewBox)) return null return ( {total.toLocaleString()} Visitors ) }} /> ) ``` ### Change Start Angle To change the start angle, set `startAngle` to a number. The default is `90`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ### Change End Angle To change the end angle, set `endAngle` to a number. The default is `-270`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ### Change Inner Radius To change the inner radius, set `innerRadius` to a number or string. The default is `"20%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ### Change Outer Radius To change the outer radius, set `outerRadius` to a number or string. The default is `"90%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ### Change Corner Radius To round sector corners, set `cornerRadius` to a number. ```tsx const series = useMemo[]>( () => [{ cornerRadius: 9999, dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ### Change Gap To change the gap between bars, set `barCategoryGap` to a number or string. The default is `"10%"`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ( ) ``` ### Stacked ```tsx const series = useMemo( () => [ { color: "blue.500", dataKey: "desktop", nameKey: "browser" }, { color: "blue.300", dataKey: "mobile", nameKey: "browser" }, ], [], ) const data = useMemo( () => [ { browser: "chrome", desktop: faker.number.int({ max: 3000, min: 2000 }), mobile: faker.number.int({ max: 5000, min: 4000 }), }, ], [], ) const total = useMemo( () => data.reduce((acc, { desktop, mobile }) => acc + desktop + mobile, 0), [data], ) return ( [ Number(value).toLocaleString(), toTitleCase(isString(data.dataKey) ? data.dataKey : ""), ], }} > { if (!viewBox) return null if (!("cx" in viewBox) || !("cy" in viewBox)) return null return ( {total.toLocaleString()} Visitors ) }} /> ) ``` ### Sync To sync charts, set `syncId` to a string. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ( ) ``` ### Format To format the chart, use `formatter`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo( () => RadialChart.mergeData(createPolarChartData(), "blue"), [], ) return ( Number(value).toLocaleString(), }, labelList: { formatter: (value) => (isString(value) ? toTitleCase(value) : value), }, }} series={series} tooltipProps={{ formatter: (value, name = "") => [ Number(value).toLocaleString(), toTitleCase(name), ], }} /> ) ``` ### Hide Tooltip To hide the tooltip, set `withTooltip` to `false`. The default is `true`. ```tsx const series = useMemo[]>( () => [{ dataKey: "visits", nameKey: "browser" }], [], ) const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), []) return ``` ## Accessibility ### Keyboard Navigation | Key | Description | State | | ------------ | ---------------------------------------------------------- | -------------------- | | `ArrowRight` | Moves to the next data point and displays the tooltip. | `withTooltip={true}` | | `ArrowLeft` | Moves to the previous data point and displays the tooltip. | `withTooltip={true}` | | `Enter` | Toggles the tooltip display for the active data point. | `withTooltip={true}` | ### ARIA Roles and Attributes | Component | Role and Attribute | Usage | | --------- | -------------------- | -------------------------------------- | | `svg` | `role="application"` | Indicates that this is an application. | ## Props # ClientOnly --- title: ClientOnly description: "`ClientOnly` is a component that renders its children only on the client side." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/client-only - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-clientonly--basic --- # ClientOnly `ClientOnly` is a component that renders its children only on the client side. ```tsx } /> ``` ## Usage ```tsx import { ClientOnly } from "@yamada-ui/react" ``` ```tsx import { ClientOnly } from "@/components/ui" ``` ```tsx import { ClientOnly } from "@workspaces/ui" ``` ```tsx ``` ### Fallback To render a loading state while child elements are being prepared, use the `fallback` prop. ```tsx }> } /> ``` ### Render Prop When your component accesses browser-only APIs like `window`, `document`, `localStorage`, use the render prop pattern. This pattern ensures that components accessing browser APIs are evaluated only on the client side, preventing hydration mismatches and server-side errors.\ It can also be used for rendering heavy components that are not needed on the server side. ```tsx }> {() => ( Current URL: {window.location.href} Screen width: {window.innerWidth}px )} ``` :::warning While you can pass components directly, be careful with components that access browser APIs. ::: ```tsx /* This may cause server-side errors */ }> /* This is safe */ }> {() => } ``` ## Props | Prop | Default | Type | Description | | ---------- | ------- | --------------------- | -------------------------------------------------------------------------------------------------------------- | | `children` | - | `ReactNodeOrFunction` | The content to render on the client side. **Note:** Use the function pattern when accessing browser-only APIs. | | `fallback` | - | `ReactNode` | The fallback content to render while the component is mounting on the client side. | ## Similar Components - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. - [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item. - [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child. ## Uses Components & Hooks - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. # FocusLock --- title: FocusLock description: "`FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/focus-lock --- # FocusLock `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range. ```tsx const { open, onToggle } = useDisclosure() return ( Please Click Button ) ``` ## Usage ```tsx import { FocusLock } from "@yamada-ui/react" ``` ```tsx import { FocusLock } from "@/components/ui" ``` ```tsx import { FocusLock } from "@workspaces/ui" ``` ```tsx ``` ## Props | Prop | Default | Type | Description | | ----------------------- | ------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoFocus` | `false` | `boolean` | If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts. | | `contentRef` | - | `RefObject` | The `ref` of the wrapper for which the focus-lock wraps. | | `disabled` | `false` | `boolean` | If `true`, focus trapping will be disabled. | | `finalFocusRef` | - | `RefObject` | `ref` of the element to return focus to when `FocusLock` unmounts. | | `initialFocusRef` | - | `RefObject` | `ref` of the element to receive focus initially. | | `lockFocusAcrossFrames` | `false` | `boolean` | Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe. | | `persistentFocus` | `false` | `boolean` | If `true`, disables text selections inside, and outside focus lock. | | `restoreFocus` | `false` | `boolean` | If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts. | ## Similar Components - [VisuallyHidden](https://yamada-ui.com/docs/components/visually-hidden.md): `VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers. ## Used By Components & Hooks - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. # For --- title: For description: "`For` is a component used to loop over an array and render a component for each item." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/for - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-for--basic --- # For `For` is a component used to loop over an array and render a component for each item. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ## Usage ```tsx import { For } from "@yamada-ui/react" ``` ```tsx import { For } from "@/components/ui" ``` ```tsx import { For } from "@workspaces/ui" ``` ```tsx ``` ### Fallback Use the `fallback` prop to render a fallback component when the array is empty or undefined. ```tsx } /> } > {(item, index) => {item}} ``` ### Filter Use the `filter` prop to filter the array items. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( breathing.length == 1}> {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ### Sort Use the `sort` prop to sort the array items. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( a.breathing.length - b.breathing.length}> {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ### Change Offset To start from a specific element in the array, set the starting position in `offset`. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ### Limit Display Count To limit the number of items displayed, set the `limit`. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ### Reverse Order To reverse the order, set `reverse` to `true`. ```tsx const items = useMemo( () => [ { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] }, { name: "我妻善逸", breathing: ["雷の呼吸"] }, { name: "嘴平伊之助", breathing: ["獣の呼吸"] }, ], [], ) return ( {({ name, breathing }, index) => ( {name} {breathing.join(", ")} )} ) ``` ## Props | Prop | Default | Type | Description | | ---------- | ------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | - | `(value: Y, index: number, array: Y[]) => ReactNode` | The render function to render each item in the array. | | `each` | - | `readonly Y[] \| undefined \| Y[]` | The array to iterate over. | | `fallback` | - | `ReactNode` | The fallback content to render when the array is empty. | | `filter` | - | `(value: Y, index: number, array: Y[]) => boolean` | A function that returns a boolean indicating whether the item should be included in the render result. | | `limit` | - | `number` | The maximum number of items to include in the render result. | | `offset` | `0` | `number` | The number of items to skip before including them in the render result. | | `reverse` | `false` | `boolean` | The boolean value to determine the order of the items in the array. If `true`, the items will be reversed. If `sortBy` is provided, inversion is applied to the sorted array. | | `sort` | - | `(a: Y, b: Y) => number` | The function to sort the items in the array. If function is provided, the items will be sorted based on the return value. If `reverse` is `true`, the inversion is applied to the sorted array. | ## Similar Components - [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child. - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. # Format --- title: Format description: "`Format` is used to format dates, numbers, and bytes according to a specific locale." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/format - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-format --- # Format `Format` is used to format dates, numbers, and bytes according to a specific locale. ```tsx ``` ## Usage ```tsx import { Format } from "@yamada-ui/react" ``` ```tsx import { Format } from "@/components/ui" ``` ```tsx import { Format } from "@workspaces/ui" ``` ```tsx ``` ### Dates :::note `Format.DateTime` internally uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). ::: #### Changing the Locale To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales). ```tsx en-US ja-JP de-DE fr-FR zh-CN ``` #### Converting to Year To convert to year, set a value for [year](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#year). ```tsx ``` #### Converting to Month To convert to month, set a value for [month](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#month). ```tsx ``` #### Converting to Day To convert to day, set a value for [day](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#day). ```tsx ``` #### Converting to Weekday To convert to weekday, set a value for [weekday](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday). ```tsx ``` ### Numbers :::note `Format.Number` internally uses [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). ::: #### Changing the Locale To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales). ```tsx en-US ja-JP de-DE fr-FR zh-CN ``` #### Converting to Currency To convert to currency, set `"currency"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style). ```tsx USD EUR JPY ``` #### Converting to Units To convert to units, set `"unit"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style). ```tsx ``` #### Converting to Percent To convert to percent, set `"percent"` for [style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style). ```tsx ``` #### Converting Notation To convert notation, set a value for [notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation). ```tsx ``` #### Controlling Decimal Places To control the number of decimal places, use [minimumFractionDigits](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) and [maximumFractionDigits](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits). ```tsx ``` #### Disabling Grouping To disable grouping, set `false` for [useGrouping](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#usegrouping). ```tsx ``` #### Changing the Sign Display To change the sign display, set a value for [signDisplay](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay). ```tsx ``` ### Bytes :::note `Format.Byte` internally uses [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). ::: #### Automatic Unit Selection `Format.Byte` automatically selects the most appropriate unit (`byte`, `kB`, `MB`, `GB`, `TB`) based on the byte value size. ```tsx ``` #### Changing the Locale To change the locale, set a value for [locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales). ```tsx en-US ja-JP de-DE fr-FR zh-CN ``` #### Unit Format To convert units, set `unit` to either `"byte"` or `"bit"`. The default is `"byte"`. ```tsx Bytes Bits ``` #### Changing the Unit Display To change the unit display, set a value for [unitDisplay](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay). ```tsx Short Narrow Long ``` ### Set the Locale for the Entire Application If you want to set the locale for the entire application, set the `locale` for the `UIProvider`. ```tsx import { UIProvider } from "@yamada-ui/react" const App = () => { return ( ) } ``` ## Props ### Format.Byte | 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. | | `value` | - | `number` | The byte size to format | | `locale` | `"en-US"` | `AnyString \| Locale` | The locale string to use for formatting. | | `unit` | - | `"bit" \| "byte"` | The unit granularity to display | | `unitDisplay` | - | `"long" \| "narrow" \| "short"` | The unit display | ### Format.DateTime | 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. | | `value` | - | `Date` | The date time to format | | `locale` | `"en-US"` | `AnyString \| Locale` | The locale string to use for formatting. | ### Format.Number | 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. | | `value` | - | `number` | The numeric value to be formatted. | | `locale` | `"en-US"` | `AnyString \| Locale` | The locale string to use for formatting. | ## Similar Components - [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child. - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. ## Used By Components & Hooks - [Calendar](https://yamada-ui.com/docs/components/calendar.md): `Calendar` is a component for displaying or selecting dates in a calendar. - [DatePicker](https://yamada-ui.com/docs/components/date-picker.md): `DatePicker` is a component used for users to select a date. # Portal --- title: Portal description: "`Portal` is a component that renders elements outside of the current `DOM` hierarchy." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/portal --- # Portal `Portal` is a component that renders elements outside of the current `DOM` hierarchy. ```tsx <> 元の世界 ナツキ・スバル ``` ## Usage ```tsx import { Portal } from "@yamada-ui/react" ``` ```tsx import { Portal } from "@/components/ui" ``` ```tsx import { Portal } from "@workspaces/ui" ``` ```tsx ``` ### Change the destination To change the destination, set the `ref` of the destination to `containerRef`. By default, it transfers to the end of `document.body`. ```tsx const containerRef = useRef(null) return ( 元の世界 ナツキ・スバル エミリアたん ) ``` ### Disable portaling To disable forwarding, set `disabled` to `true`. ```tsx <> 元の世界 ナツキ・スバル ``` ## Props | Prop | Default | Type | Description | | -------------- | ------- | -------------------------------- | ---------------------------------------------------------------- | | `containerRef` | - | `RefObject` | The `ref` to the component where the portal will be attached to. | | `disabled` | - | `boolean` | If `true`, the forwarding will be disabled. | ## Similar Components - [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item. - [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale. - [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child. - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. ## Used By Components & Hooks - [ActionBar](https://yamada-ui.com/docs/components/action-bar.md): `ActionBar` is a component that is used to display a bottom action bar with a set of actions. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Dropzone](https://yamada-ui.com/docs/components/dropzone.md): `Dropzone` is a component used for uploading files via drag and drop. - [FileButton](https://yamada-ui.com/docs/components/file-button.md): `FileButton` is a button component used for users to select files. - [FileInput](https://yamada-ui.com/docs/components/file-input.md): `FileInput` is a component used for users to select files. - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded. - [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information. - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. - [Toggle](https://yamada-ui.com/docs/components/toggle.md): `Toggle` is a component that has two states: on or off. - [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element. # Show --- title: Show description: "`Show` is a component that shows or hides its children based on a condition." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/show - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-show--basic --- # Show `Show` is a component that shows or hides its children based on a condition. ```tsx インビジブルガール 葉隠透 ``` ## Usage ```tsx import { Show } from "@yamada-ui/react" ``` ```tsx import { Show } from "@/components/ui" ``` ```tsx import { Show } from "@workspaces/ui" ``` ```tsx ``` ### Render Conditionally To conditionally render content, set the `when` prop to a boolean value. ```tsx const [isVisible, setIsVisible] = useState(true) return ( setIsVisible((prev) => !prev)}> {isVisible ? "Hide" : "Show"} Content インビジブルガール 葉隠透 ) ``` ### With Fallback To render fallback content when the condition is false, use the `fallback` prop. ```tsx const [isVisible, setIsVisible] = useState(false) return ( setIsVisible(!isVisible)}>Toggle Content 衣服}> インビジブルガール 葉隠透 ) ``` ## Props | Prop | Default | Type | Description | | ---------- | ------- | ------------------------ | --------------------------------------------------- | | `children` | - | `ReactNodeOrFunction` | The children to render if `when` is `true` | | `fallback` | - | `ReactNode` | The fallback content to render if `when` is `false` | | `when` | - | `null \| Y` | If `true`, it'll render the `children` prop | ## Similar Components - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. - [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item. - [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child. ## Used By Components & Hooks - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. # Slot --- title: Slot description: "`Slot` is a component that merges its props onto its immediate child." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slot - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slot--basic --- # Slot `Slot` is a component that merges its props onto its immediate child. ```tsx const Button = ({ asChild, ...props }) => { const Component = asChild ? Slot : "button" return } return ( { if (!ev.defaultPrevented) { console.log("Not logged because default is prevented.") } }} > ev.preventDefault()}> Slot ) ``` ## Usage ```tsx import { Slot, Slottable } from "@yamada-ui/react" ``` ```tsx import { Slot, Slottable } from "@/components/ui" ``` ```tsx import { Slot, Slottable } from "@workspaces/ui" ``` ```tsx ``` ### Multiple Children `Slot` only accepts a single child element. If you want to accept multiple children, use `Slottable`. ```tsx const Button = ({ asChild, children, endIcon, startIcon, ...props }) => { const Component = asChild ? Slot : "button" return ( {startIcon} {children} {endIcon} ) } return ( Slot ) ``` ## Similar Components - [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item. - [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side. - [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition. # VisuallyHidden --- title: VisuallyHidden description: "`VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/visually-hidden/visually-hidden.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/visually-hidden - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-visuallyhidden--basic --- # VisuallyHidden `VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers. ```tsx Checkmark ``` ## Usage ```tsx import { VisuallyHidden } from "@yamada-ui/react" ``` ```tsx import { VisuallyHidden } from "@/components/ui" ``` ```tsx import { VisuallyHidden } from "@workspaces/ui" ``` ```tsx Hidden content ``` It is used to visually hide elements, but it is accessible in screen readers. By default, it renders a `span` element. ## Props | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ## Similar Components - [FocusLock](https://yamada-ui.com/docs/components/focus-lock.md): `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range. # Customization --- title: Customization description: "Learn how to customize the configuration of Yamada UI." --- # Customization Learn how to customize the configuration of Yamada UI. To change the prefix of CSS variables, set the value to `css.varPrefix`. ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Config Change the `config.ts` in the generated theme. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "custom" }, // [!code highlight] breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` # Overview --- title: Overview description: "The configuration of Yamada UI is a global setting used in various parts of the system." --- # Overview The configuration of Yamada UI is a global setting used in various parts of the system. The configuration defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/config.ts). ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "ui" }, breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "light", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ## Properties | Property | Default | Description | | --------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `css.layers` | - | [Cascade layers](https://yamada-ui.com/docs/theming/cascade-layers.md) settings. | | `css.varPrefix` | `"ui"` | CSS variable prefix. | | `breakpoint.base` | `"9999px"` | Breakpoint base value. | | `breakpoint.containerRef` | - | [Container query](https://yamada-ui.com/docs/theming/breakpoints.md#container-query) reference when using the container query. | | `breakpoint.direction` | `"down"` | [Responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) adopted [media query](https://yamada-ui.com/docs/theming/breakpoints.md#media-query). | | `breakpoint.identifier` | `"@media screen"` | Media query to use for breakpoints. | | `defaultColorMode` | `"light"` | Default [color mode](https://yamada-ui.com/docs/theming/color-mode.md). | | `defaultThemeScheme` | `"base"` | Default [theme scheme](https://yamada-ui.com/docs/theming/switching-themes.md). | | `theme.responsive` | `false` | Apply [responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) to theme tokens. | | `disableTransitionOnChange` | `false` | Disable `transition` when changing the color mode or theme. | | `loading.screen.blockScrollOnMount` | `true` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.screen.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.screen.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.screen.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.screen.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.blockScrollOnMount` | `true` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.page.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.page.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.blockScrollOnMount` | `false` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.background.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.background.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `notice.closable` | `true` | Enable to close [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.closeStrategy` | `["click", "drag"]` | Close strategy for the [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.duration` | `5000` | Duration of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.expand` | `false` | Expand [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.limit` | `3` | Maximum number of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.placement` | `"start"` | Placement of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `snacks.closable` | `true` | Enable close button on [snacks](https://yamada-ui.com/docs/components/snacks.md). | | `snacks.duration` | `5000` | Duration of [snacks](https://yamada-ui.com/docs/components/snacks.md). | | `snacks.limit` | - | Maximum number of [snacks](https://yamada-ui.com/docs/components/snacks.md). | | `snacks.placement` | `"start"` | Placement of [snacks](https://yamada-ui.com/docs/components/snacks.md). | | `snacks.startIndex` | `0` | Start `z-index` of [snacks](https://yamada-ui.com/docs/components/snacks.md). | # Accordion --- title: Accordion description: "`Accordion` is a component for a list that displays information in an expandable or collapsible manner." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/accordion/accordion.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/accordion - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-accordion--basic --- # Accordion `Accordion` is a component for a list that displays information in an expandable or collapsible manner. ```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 ``` :::tip If you need to expand or collapse a single item and it is clear that multiple items will not be displayed in the future, use [Collapse](https://yamada-ui.com/docs/components/collapse.md). ::: ### 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` | - | `AccordionItem[]` | 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` | 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 | Element | Roles and Attributes | Usage | | ----------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `button.ui-accordion__button` | `id` | Used to associate with `div.ui-accordion__panel`. | | | `aria-controls` | Sets the `id` of the associated `div.ui-accordion__panel`. | | | `aria-disabled` | Sets to `"true"` if `Accordion.Item` is `disabled`, or if the panel of the item is expanded and the item cannot be collapsed (`Accordion.Root` does not have `multiple={true}` or `toggle={true}`). | | | `aria-expanded` | Sets to `"true"` when the panel of the item is expanded, and `"false"` when it is collapsed. | | `div.ui-accordion__panel` | `role="region"` | Indicates that it is a landmark region. | | | `id` | Used to associate with `button.ui-accordion__button`. | | | `aria-labelledby` | Sets the `id` of the associated `button.ui-accordion__button`. | ## Similar Components - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element. - [NativeAccordion](https://yamada-ui.com/docs/components/native-accordion.md): `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the HTML `details` element. - [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position. - [Carousel](https://yamada-ui.com/docs/components/carousel.md): `Carousel` is a component that displays multiple elements like a slideshow. - [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format. ## Uses Components & Hooks - [NativeAccordion](https://yamada-ui.com/docs/components/native-accordion.md): `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the HTML `details` element. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display. - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects. - [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md): `useDescendants` is a custom hook that manages descendants. # ActionBar --- title: ActionBar description: "`ActionBar` is a component that is used to display a bottom action bar with a set of actions." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/action-bar/action-bar.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/action-bar - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-action-bar--basic --- # ActionBar `ActionBar` is a component that is used to display a bottom action bar with a set of actions. ```tsx Open ActionBar 2 Selected }>Delete }>Share ``` ## Usage ```tsx import { ActionBar } from "@yamada-ui/react" ``` ```tsx import { ActionBar } from "@/components/ui" ``` ```tsx import { ActionBar } from "@workspaces/ui" ``` ```tsx ``` ### Use props ```tsx 2 Selected }>Delete }>Share } trigger={Open ActionBar} /> ``` ### Change Duration To change the duration, set `duration` to a numerical value (seconds). ```tsx Open ActionBar 2 Selected }>Delete }>Share ``` ### Change Placement To change the display position, set `placement` to `"start-center"`, `"end-start"`, etc. By default, `"end-center"` is set. ```tsx Open ActionBar 2 Selected }>Delete }>Share ``` ### Change Animation To change the show or hide animation, set `animationScheme` to `"block-start"`, `"inline-end"`, etc. By default, the animation is determined based on the `placement`. ```tsx Open ActionBar 2 Selected }>Delete }>Share ``` ### Custom Control ```tsx const { open, onClose, onOpen } = useDisclosure() return ( <> Open ActionBar 2 Selected }>Delete }>Share } open={open} onClose={onClose} /> ) ``` ## Props ### ActionBar.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. | | `animationScheme` | `"scale"` | `"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` | The animation of the element. | | `closeOnEsc` | `true` | `boolean` | If `true`, the action bar will close when the `Esc` key is pressed. | | `content` | - | `ReactNode` | The action bar content to use. | | `defaultOpen` | - | `boolean` | If `true`, the element will be initially opened. | | `duration` | `0.1` | `MotionLifecycleProps \| number` | The animation duration. | | `onClose` | - | `() => void \| Promise` | Callback invoked to close the element. | | `onCloseComplete` | - | `() => void` | Callback function to run side effects after the action bar has closed. | | `onOpen` | - | `() => void \| Promise` | Callback invoked to open the element. | | `open` | - | `boolean` | If `true`, the element will be opened. | | `portalProps` | - | `Omit` | Props to be forwarded to the portal component. | | `trigger` | - | `ReactNode` | The action bar trigger to use. | ### ActionBar.CloseTrigger | 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. | ### ActionBar.Content | 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. | ### ActionBar.OpenTrigger | 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. | ### ActionBar.Separator | 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 The `ActionBar` follows the [WAI-ARIA - Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) for accessibility. ### Keyboard Navigation | Key | Description | State | | -------- | ---------------------- | ----------------------------------- | | `Escape` | Closes the action bar. | `open={true}` + `closeOnEsc={true}` | ### ARIA Roles and Attributes | Element | Roles and Attributes | Usage | | -------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- | | `section.ui-action-bar__content` | `role="dialog"` | Indicates that this is a dialog. | | | `id` | Used to associate with `button.ui-action-bar__trigger--open`. | | `button.ui-action-bar__trigger--open` | `aria-haspopup="dialog"` | Indicates that a dialog exists. | | | `aria-expanded` | Sets to `"true"` if the action bar is open, and `"false"` if it is closed. | | | `aria-controls` | If the action bar is open, sets to the `id` of `section.ui-action-bar__content`. | | | `aria-label` | Sets to `"Open action bar"`. | | `button.ui-action-bar__trigger--close` | `aria-label` | Sets to `"Close action bar"`. | ## Similar Components - [NativePopover](https://yamada-ui.com/docs/components/native-popover.md): `NativePopover` is a component that floats around an element to display information using the HTML Popover API. - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. - [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element. - [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen. - [Menu](https://yamada-ui.com/docs/components/menu.md): `Menu` is a component that displays a common dropdown menu. - [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information. ## Uses Components & Hooks - [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`. - [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information. - [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy. - [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`. - [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md): `useDisclosure` is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as `Modal`, `Dialog`, `Drawer`, etc. # Alert --- title: Alert description: "`Alert` is a component that conveys information to the user." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alert/alert.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alert - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-alert--basic --- # Alert `Alert` is a component that conveys information to the user. ```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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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 | Element | Roles and Attributes | Usage | | -------------------- | -------------------- | ------------------------------ | | `div.ui-alert__root` | `role="alert"` | Indicates that it is an alert. | ## Similar Components - [Snacks](https://yamada-ui.com/docs/components/snacks.md): `Snacks` is a component for controlling notifications used in forms and other similar situations. - [Tip](https://yamada-ui.com/docs/components/tip.md): `Tip` is a component that displays supplementary information with a built-in icon trigger. - [EmptyState](https://yamada-ui.com/docs/components/empty-state.md): `EmptyState` is a component used to display when a resource is empty or unavailable. - [CircleProgress](https://yamada-ui.com/docs/components/circle-progress.md): `CircleProgress` is a component that displays progress in a circular progress bar. - [Progress](https://yamada-ui.com/docs/components/progress.md): `Progress` is a component for visually indicating progress. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded. - [Status](https://yamada-ui.com/docs/components/status.md): `Status` is component that indicate the status of a process or state. ## Uses Components & Hooks - [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects. - [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded. - [Status](https://yamada-ui.com/docs/components/status.md): `Status` is component that indicate the status of a process or state. ## Used By Components & Hooks - [Snacks](https://yamada-ui.com/docs/components/snacks.md): `Snacks` is a component for controlling notifications used in forms and other similar situations. # AlphaSlider --- title: AlphaSlider description: "`AlphaSlider` is a component used to allow the user to select color transparency." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alpha-slider - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-alphaslider--basic --- # AlphaSlider `AlphaSlider` is a component used to allow the user to select color transparency. ```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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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. | | `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. | | `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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | 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 The `AlphaSlider` follows the [WAI-ARIA - Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) for accessibility. ### Keyboard Navigation | Key | Description | State | | ------------ | -------------------------------------------------------- | ----- | | `ArrowRight` | Increases the value based on the `step` value. | - | | `ArrowLeft` | Decreases the value based on the `step` value. | - | | `ArrowUp` | Increases the value based on the `step` value. | - | | `ArrowDown` | Decreases the value based on the `step` value. | - | | `Home` | Sets the value to `min`. | - | | `End` | Sets the value to `max`. | - | | `PageUp` | Increases the value based on the `min` and `max` values. | - | | `PageDown` | Decreases the value based on the `min` and `max` values. | - | ### ARIA Roles and Attributes | Element | Roles and Attributes | Usage | | ----------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `div.ui-alpha-slider__thumb` | `role="slider"` | Indicates that this is a slider. | | | `aria-label` | Sets `"Slider thumb"`. | | | `aria-orientation` | Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`. | | | `aria-valuemin` | Sets the `min` value. Default is `0`. | | | `aria-valuemax` | Sets the `max` value. Default is `1`. | | | `aria-valuenow` | Sets the current value. | | | `aria-valuetext` | Sets the current value, such as `"18%"`. | | | `aria-describedby` | If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. | | | `aria-readonly` | Set to `"true"` if `readOnly` is set. | | | `aria-disabled` | Set to `"true"` if `disabled` is set. | | | `aria-invalid` | Set to `"true"` if `invalid` is set. | | | `aria-required` | Set to `"true"` if `required` is set. | | `div.ui-alpha-slider__root > input` | `aria-hidden` | Excludes the element from the accessibility tree. | | | `aria-describedby` | If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. | | | `aria-readonly` | Set to `"true"` if `readOnly` is set. | | | `aria-disabled` | Set to `"true"` if `disabled` is set. | | | `aria-invalid` | Set to `"true"` if `invalid` is set. | | | `aria-required` | Set to `"true"` if `required` is set. | ## Similar Components - [HueSlider](https://yamada-ui.com/docs/components/hue-slider.md): `HueSlider` is a component used to allow the user to select a color hue. - [SaturationSlider](https://yamada-ui.com/docs/components/saturation-slider.md): `SaturationSlider` is a component used to allow the user to select a color saturation. - [ColorSelector](https://yamada-ui.com/docs/components/color-selector.md): `ColorSelector` is a component used by the user to select a color. - [Slider](https://yamada-ui.com/docs/components/slider.md): `Slider` is a component used for allowing users to select a value from a range. - [ColorPicker](https://yamada-ui.com/docs/components/color-picker.md): `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value. ## Uses Components & Hooks - [ColorSwatch](https://yamada-ui.com/docs/components/color-swatch.md): `ColorSwatch` is a component that displays color samples. - [HueSlider](https://yamada-ui.com/docs/components/hue-slider.md): `HueSlider` is a component used to allow the user to select a color hue. - [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`. ## Used By Components & Hooks - [ColorSelector](https://yamada-ui.com/docs/components/color-selector.md): `ColorSelector` is a component used by the user to select a color. # AspectRatio --- title: AspectRatio description: "`AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio." links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/aspect-ratio/aspect-ratio.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/aspect-ratio - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-aspectratio--basic --- # AspectRatio `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio. ```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