---
title: マイグレーション
description: "v1.xからv2.xの新しい機能と改善点。"
---

## 新しい機能

### セットアップ

[CLI](https://yamada-ui.com/docs/get-started/cli.md)を使用すると、プロジェクトでYamada UIのセットアップを簡単に行うことができるようになりました。

```bash
pnpm yamada-cli init
```

```bash
npm yamada-cli init
```

```bash
yarn yamada-cli init
```

```bash
bun yamada-cli init
```

`init`コマンドを実行すると、次のプロンプトが表示されます。

```txt
Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes
```

### ダウンロード

v2.x以降からは、2つの方法でコンポーネントとフックを提供しています。1つは、[CLI](https://yamada-ui.com/docs/components/cli.md)からコンポーネントとフックをローカルにダウンロードする新しい方法。もう1つは、モジュールからコンポーネントとフックをインポートする従来通りの方法です。

ソースコードをダウンロードすることにより、コンポーネントやフックの初期値やロジックをカスタマイズすることができ、ロジックなどで不具合があった場合は、直接修正することができます。

```bash
pnpm yamada-cli add button
```

```bash
npm yamada-cli add button
```

```bash
yarn yamada-cli add button
```

```bash
bun yamada-cli add button
```

:::note
ソースコードをダウンロードしてカスタマイズしても、[CLI](https://yamada-ui.com/docs/components/cli.md)の[差分を確認する](https://yamada-ui.com/docs/components/cli.md#差分を確認する)や[コンポーネントを更新する](https://yamada-ui.com/docs/components/cli.md#コンポーネントを更新する)を行うことで、ソースコードを簡単に更新することができます。もし、あなたの修正と競合しても[Git](https://git-scm.com)の[競合の提示方法](https://git-scm.com/docs/git-merge#_how_conflicts_are_presented)と同じように表示され、簡単に解決することができます。
:::

### 名前空間インポート

名前空間を使用してコンポーネントをインポートすることができるようになりました。

```tsx
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Button />
    <Accordion.Panel />
  </Accordion.Item>
</Accordion.Root>
```

:::note
従来のコンポーネントを個別にインポートすることは、引き続き可能です。但し、名前空間の兼ね合いで名前が変更されたコンポーネントがあります。例えば、`Accordion`の場合は、`AccordionRoot`に変更されています。
:::

### createComponent

[createComponent](https://yamada-ui.com/docs/components/create-component.md)を使用すると、バリアントなど条件付きスタイルをサポートするコンポーネントを作成することができます。

```tsx
const componentStyle = defineComponentStyle({
  base: {
    /* base style */
  },
  variants: {
    /* variant style */
  },
  sizes: {
    /* size style */
  },
  props: {
    /* props style */
  },
  compounds: {
    /* compound style */
  },
  defaultProps: {
    /* default props */
  },
})

type ComponentStyle = typeof componentStyle

export interface ComponentProps
  extends HTMLStyledProps<"div">,
    ThemeProps<ComponentStyle> {}

const {
  component,
  ComponentContext,
  PropsContext: ComponentPropsContext,
  useComponentContext,
  usePropsContext: useComponentPropsContext,
  withContext,
  useComponentProps,
} = createComponent<ComponentProps, ComponentStyle>("component", componentStyle)

export { ComponentPropsContext, useComponentPropsContext }
```

```tsx
export const Component = withContext("div")()
```

### mergeProps

`mergeProps`を使用すると、propsの消失を防ぎながらマージを簡単に行うことができます。従来は、提供されるpropsを配慮しながらコンポーネントを作成する必要がありました。`mergeProps`を使用すると、提供されるpropsを配慮することなく、コンポーネントの作成に集中することができます。

**以前**

```tsx
export const Component: FC<ComponentProps> = ({
  ref: forwardedRef,
  className,
  onClick: onClickProp,
  ...rest
}) => {
  const ref = useRef<HTMLDivElement>(null)

  const onClick = useCallback(() => {}, [])

  return (
    <Component
      ref={mergeRefs(forwardedRef, ref)}
      onClick={handlerAll(onClickProp, onClick)}
      className={[className, "component"].join(" ")}
      {...rest}
    />
  )
}
```

**以後**

```tsx
export const Component: FC<ComponentProps> = (props) => {
  const ref = useRef<HTMLDivElement>(null)

  const onClick = useCallback(() => {}, [])

  return <Component {...mergeProps(props, { ref, onClick })()} />
}
```

### PropsContext

各コンポーネントが提供している`PropsContext`を使用すると、子要素にあるコンポーネントのpropsを一括で設定することができます。

```tsx
const value = useMemo<BadgeProps>(() => ({ variant: "outline" }), [])

return (
  <BadgePropsContext value={value}>
    <Badge />
    <Badge />
    <Badge />
  </BadgePropsContext>
)
```

上記の例では、`BadgePropsContext`の子要素にある`Badge`は、すべて`variant`が`"outline"`になります。

### ポリモーフィズム

従来の`as`に加えて、`asChild`を追加しました。`as`は、コンポーネント自体の要素を変更するに対して、`asChild`は、コンポーネントの機能やスタイルを子要素に組み込むために使用します。

**as**

```tsx
<Box as="button" />
```

**asChild**

```tsx
<Button asChild>
  <CustomComponent />
</Button>
```

### カスケードレイヤー

CSSの[カスケードレイヤー](https://developer.mozilla.org/ja/docs/Web/CSS/@layer)を使用して、[テーマ](https://yamada-ui.com/docs/theming.md)と[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に優先順位が設定されるようになりました。詳しくは、[カスケードレイヤー](https://yamada-ui.com/docs/styling/cascade-layers.md)をご覧ください。

### フォーカスリング

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に[フォーカスリング](https://yamada-ui.com/docs/styling/focus-ring.md)を追加しました。フォーカスリングは、フォーカスされている要素を識別するために使用されるスタイルです。詳しくは、[フォーカスリング](https://yamada-ui.com/docs/styling/focus-ring.md)をご覧ください。

```tsx
<Box focusRing="outline" />
```

```tsx
<Box focusVisibleRing="outline" />
```

### インターポレーション

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)の値で簡単に[CSSカスタムプロパティ](https://yamada-ui.com/docs/styling/css-custom-properties.md)を参照することができるようになりました。詳しくは、[インターポレーション](https://yamada-ui.com/docs/styling/interpolation.md)をご覧ください。

```tsx
<Box {...{ "--custom-bg-color": "#1ba14c" }} bg="{custom-bg-color}" />
```

### CSSカスタムプロパティ

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)で簡単に[CSSカスタムプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/var)を設定できるようになりました。詳しくは、[CSSカスタムプロパティ](https://yamada-ui.com/docs/styling/css-custom-properties.md)をご覧ください。

```tsx
<Box css={{ "--bg": "#d4d4d4" }} {...{ "--fg": "black" }} />
```

また、[テーマ](https://yamada-ui.com/docs/theming.md)のトークンを参照することができます。

```tsx
<Box
  css={{ "--bg": "colors.bg.contrast" }}
  {...{ "--fg": "colors.fg.contrast" }}
/>
```

### CSS値関数

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)の値で[CSS値関数](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions)を使用する場合に、各関数が対応する[テーマ](https://yamada-ui.com/docs/theming.md)のトークンを参照することができるようになりました。詳しくは、[CSS値関数](https://yamada-ui.com/docs/styling/css-value-functions.md)をご覧ください。

```tsx
<Box w="calc(lg / 2)" />
```

```tsx
<Box bg="color-mix(red.500, blue.500)" />
```

### アットルール

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に[アットルール](https://developer.mozilla.org/ja/docs/Web/CSS/At-rule)が追加されました。詳しくは、[アットルール](https://yamada-ui.com/docs/styling/at-rules.md)をご覧ください。

```tsx
<Box _media={[{ type: "print", css: { color: "success" } }]} />
```

[コンテナクエリ](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries)もサポートしています。

```tsx
<Box containerType="inline-size" resize="horizontal">
  <Box
    _container={[{ minW: "320px", maxW: "560px", css: { color: "success" } }]}
  />
</Box>
```

### 国際化

アクセシビリティを向上させるため、すべてのコンポーネントで組み込まれている文字列から日付・数値のフォーマットまで、30以上の言語をサポートしました。詳しくは、[国際化](https://yamada-ui.com/docs/components/internationalization.md)をご覧ください。

### アイコン

新しいアイコンを追加しました。詳しくは、[アイコン](https://yamada-ui.com/icons.md)をご覧ください。

### Style Props

新しいCSSプロパティを追加しました。詳しくは、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)をご覧ください。

### テーマ

- テーマのトークンに新しく[keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md)・[aspectRatios](https://yamada-ui.com/docs/theming/tokens/aspect-ratios.md)・[easings](https://yamada-ui.com/docs/theming/tokens/easings.md)・[durations](https://yamada-ui.com/docs/theming/tokens/durations.md)を追加しました。
- [カラースキーム](https://yamada-ui.com/docs/theming/tokens/color-schemes.md)に`"mono"`を追加しました。
- [レイヤースタイル](https://yamada-ui.com/docs/theming/styles/layer-styles.md)に新しいトークンを追加しました。
- [テキストスタイル](https://yamada-ui.com/docs/theming/styles/text-styles.md)に新しいトークンを追加しました。
- [カラー](https://yamada-ui.com/docs/theming/tokens/colors.md)に新しいトークンを追加しました。
- コンポーネントのスタイルオブジェクトで`className`を設定できるようになりました。

## 改善点

### styled

[ui](https://v1.yamada-ui.com/ja/styled-system/ui)から[styled](https://yamada-ui.com/docs/components/styled.md)に名前を変更しました。また、これまではコンポーネントのベーススタイルしか設定することができませんでしたが、これからは`variants`や`sizes`など条件に応じたスタイルも設定することができるようになりました。

**以前**

```tsx
const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
})
```

**以後**

```tsx
const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
  variants: {
    outline: {
      layerStyle: "outline",
      _hover: { layerStyle: "outline.hover" },
    },
    solid: {
      layerStyle: "solid",
      _hover: { layerStyle: "solid.hover" },
    },
    subtle: {
      layerStyle: "subtle",
      _hover: { layerStyle: "subtle.hover" },
    },
  },
})
```

### 条件付きスタイル

条件付きスタイルの設定がより簡素化されました。従来の設定は、引き続き使用できます。

**以前**

```tsx
<Box bg="bg.contrast" _hover={{ bg: "success" }} />
```

**以後**

```tsx
<Box bg={{ base: "bg.contrast", _hover: "success" }} />
```

### カラースキーム

以前の[カラースキーム](https://yamada-ui.com/docs/styling/color-scheme.md)は、各コンポーネントのpropsとして設定されていました。`colorScheme`を[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に統合させたことにより、コンポーネント以外でも使用できるようになりました。

```tsx
<Box colorScheme="blue" bg="colorScheme.solid" color="colorScheme.contrast" />
```

また、`colorScheme`は[CSSカスタムプロパティ](https://yamada-ui.com/docs/styling/css-custom-properties.md)を使用してコンテキストを生成するため、配下の要素にも適用されるようになりました。

```tsx
<Box colorScheme="blue">
  <Box bg="colorScheme.solid" color="colorScheme.contrast" />
  <Box colorScheme="green" bg="colorScheme.subtle" color="colorScheme.fg" />
</Box>
```

### アニメーション

以前の[アニメーション](https://yamada-ui.com/docs/styling/animation.md)は、[useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md)フックを使用していました。これからは、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)から直接設定することができるようになりました。

**以前**

```tsx
const animation = useAnimation({
  _keyframes: {
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  },
  duration: "1s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box animation={animation} />
```

**以後**

```tsx
<Box
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
/>
```

### コンポーネント

- 各コンポーネントのスタイルを調整しました。
- 各コンポーネントのスロット名を調整しました。
- 各コンポーネントのクラス名を調整しました。
- 各コンポーネントのpropsですべての真偽型(`isOpen`・`isDisabled`など)のプロパティの命名規則を変更しました。例えば、`isOpen`は`open`に変更されています。

:::note
各コンポーネントの改善点は、各コンポーネントのドキュメントをご覧ください。
:::

### Style Props

- `color-mix`がサポートされていないブラウザの場合、フォールバック値が適用されるようになりました。
- `blur`や`brightness`など、`filter="auto"`を設定しなくても適用されるようになりました。
- `backdropBlur`や`backdropBrightness`など、`backdropFilter="auto"`を設定しなくても適用されるようになりました。
- `translateX`や`skewX`など、`transform="auto"`または`transform="auto-3d"`を設定しなくても適用されるようになりました。

### テーマ

- トークンに[CSS値関数](https://yamada-ui.com/docs/styling/css-value-functions.md)を使用することができるようになりました。
- トークンに[インターポレーション](https://yamada-ui.com/docs/styling/interpolation.md)を使用することができるようになりました。
- テーマを定義する場合は、`defineTheme`を使用してください。
- 各トークンを定義する場合は、`defineTokens`を使用してください。
- 各セマンティックトークンを定義する場合は、`defineSemanticTokens`を使用してください。
- 各スタイルを定義する場合は、`defineStyles`を使用してください。
- コンフィグを定義する場合は、`defineConfig`を使用してください。
- コンポーネントのスロット名を調整・変更しました。
- グローバルスタイルを調整しました。
- リセットスタイルを調整しました。
- 各トークンの値を調整しました。

## 削除された機能

### パッケージ

[ツリーシェイキング](https://developer.mozilla.org/ja/docs/Glossary/Tree_shaking)の兼ね合いで各パッケージに分けるアプローチが不要になったこと、今後のYamada UIのプロジェクトで[React](https://ja.react.dev)以外の選択肢が広がる可能性があることから、これらのパッケージは非推奨になりました。

- [@yamada-ui/input](https://www.npmjs.com/package/@yamada-ui/input)など、各コンポーネントのパッケージは非推奨になりました。代わりに、[@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react)を使用してください。
- [@yamada-ui/use-disclosure](https://www.npmjs.com/package/@yamada-ui/use-disclosure)など、各フックのパッケージは非推奨になりました。代わりに、[@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react)を使用してください。
- [@yamada-ui/providers](https://www.npmjs.com/package/@yamada-ui/providers)は非推奨になりました。代わりに、[@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react)を使用してください。
- [@yamada-ui/theme](https://www.npmjs.com/package/@yamada-ui/theme)は非推奨になりました。代わりに、[@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react)を使用してください。
- [@yamada-ui/theme-tools](https://www.npmjs.com/package/@yamada-ui/theme-tools)は非推奨になりました。代わりに、[@yamada-ui/react](https://www.npmjs.com/package/@yamada-ui/react)を使用してください。
- [@yamada-ui/next](https://www.npmjs.com/package/@yamada-ui/next)は非推奨になりました。

### Style Props

- `fallback`を削除しました。
- `keyframes`を削除しました。代わりに、`_keyframes`を使用してください。
- `isTruncated`を削除しました。代わりに`truncated`を使用してください。

### テーマ

- `transitions`を削除しました。代わりに、[easings](https://yamada-ui.com/docs/theming/tokens/easings.md)と[durations](https://yamada-ui.com/docs/theming/tokens/durations.md)を使用してください。
- `semantics`を削除しました。代わりに`semanticTokens`を使用してください。
- `components`を削除しました。コンポーネントをスタイリングする場合は、[CLI](https://yamada-ui.com/docs/components/cli.md)を使用してください。
- `extendBaseTheme`を削除しました。代わりに、`extendTheme`を使用してください。
- `extendStyle`を削除しました。代わりに、`extendTheme`を使用してください。
- `extendToken`を削除しました。代わりに、`extendTheme`を使用してください。
- `extendComponent`を削除しました。
- `extendComponentSize`を削除しました。
- `extendComponentVariant`を削除しました。
- `extendComponentDefaultProps`を削除しました。
- `withDefaultSize`を削除しました。
- `withDefaultVariant`を削除しました。
- `withDefaultColorScheme`を削除しました。
- `withDefaultProps`を削除しました。
- `generate`を削除しました。

### その他

- `forwardRef`を削除しました。代わりに、[React](https://ja.react.dev)の[forwardRef](https://ja.react.dev/reference/react/forwardRef)を使用してください。
- `memo`を削除しました。代わりに、[React](https://ja.react.dev)の[memo](https://ja.react.dev/reference/react/memo)を使用してください。
- `ui`を削除しました。代わりに、[styled](https://yamada-ui.com/docs/components/styled.md)を使用してください。
- `sx`と`__css`を削除しました。代わりに、`css`を使用してください。

## 追加されたコンポーネント

### Mark

[Mark](https://yamada-ui.com/docs/components/mark.md)を追加しました。

### ClientOnly

[ClientOnly](https://yamada-ui.com/docs/components/client-only.md)を追加しました。

### Format.Datetime

[Format.Datetime](https://yamada-ui.com/docs/components/format.md#日付)を追加しました。

### Show

[Show](https://yamada-ui.com/docs/components/show.md)を追加しました。

### Slot

[Slot](https://yamada-ui.com/docs/components/slot.md)を追加しました。

### Steps

[Steps](https://yamada-ui.com/docs/components/steps.md)を追加しました。

### Group

[Group](https://yamada-ui.com/docs/components/group.md)を追加しました。

### Timeline

[Timeline](https://yamada-ui.com/docs/components/timeline.md)を追加しました。

## 削除されたコンポーネント

### FontAwesomeIcon

[FontAwesomeIcon](https://v1.yamada-ui.com/ja/components/media-and-icons/fontawesome)を削除しました。

### NativeImage

[NativeImage](https://v1.yamada-ui.com/ja/components/media-and-icons/native-image)を削除しました。代わりに、[Image](https://yamada-ui.com/docs/components/image.md)を使用してください。

### Dialog

[Dialog](https://v1.yamada-ui.com/ja/components/overlay/dialog)を削除しました。代わりに、[Modal](https://yamada-ui.com/docs/components/modal.md#propsを使う)を使用してください。

### ContextMenu

[ContextMenu](https://v1.yamada-ui.com/ja/components/navigation/context-menu)を削除しました。代わりに、[Menu.ContextTrigger](https://yamada-ui.com/docs/components/menu.md#コンテキストメニューを使用する)を使用してください。

### FormControl

[FormControl](https://v1.yamada-ui.com/ja/components/forms/form-control)を削除しました。代わりに、[Field](https://yamada-ui.com/docs/components/field.md)を使用してください。

### MultiAutocomplete

[MultiAutocomplete](https://v1.yamada-ui.com/ja/components/forms/multi-autocomplete)を削除しました。代わりに、[Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md#複数選択を有効する)の`multiple`を使用してください。

### MultiDatePicker

[MultiDatePicker](https://v1.yamada-ui.com/ja/components/forms/multi-date-picker)を削除しました。代わりに、[DatePicker](https://yamada-ui.com/docs/components/date-picker.md#複数選択を有効する)の`multiple`を使用してください。

### RangeDatePicker

[RangeDatePicker](https://v1.yamada-ui.com/ja/components/forms/range-date-picker)を削除しました。代わりに、[DatePicker](https://yamada-ui.com/docs/components/date-picker.md#期間選択を有効にする)の`range`を使用してください。

### MultiSelect

[MultiSelect](https://v1.yamada-ui.com/ja/components/forms/multi-select)を削除しました。代わりに、[Select](https://yamada-ui.com/docs/components/select.md#複数選択を有効する)の`multiple`を使用してください。

### YearPicker

[YearPicker](https://v1.yamada-ui.com/ja/components/forms/year-picker)を削除しました。

### MonthPicker

[MonthPicker](https://v1.yamada-ui.com/ja/components/forms/month-picker)を削除しました。

### RangeSlider

[RangeSlider](https://v1.yamada-ui.com/ja/components/forms/range-slider)を削除しました。代わりに、[Slider](https://yamada-ui.com/docs/components/slider.md#範囲選択を有効にする)の`value`または`defaultValue`に配列を設定してください。

### Markdown

[Markdown](https://v1.yamada-ui.com/ja/components/data-display/markdown)を削除しました。

### Stepper

[Stepper](https://v1.yamada-ui.com/ja/components/navigation/stepper)を削除しました。代わりに、[Steps](https://yamada-ui.com/docs/components/steps.md)を使用してください。

### Divider

[Divider](https://v1.yamada-ui.com/ja/components/layouts/divider)を削除しました。代わりに、[Separator](https://yamada-ui.com/docs/components/separator.md)を使用してください。

### PagingTable

[PagingTable](https://v1.yamada-ui.com/ja/components/data-display/paging-table)を削除しました。代わりに、[Table](https://yamada-ui.com/docs/components/table.md#ページネーションを有効にする)の`enablePagination`を使用してください。

## 移行が完了していないコンポーネント

v2.0では、以下のコンポーネントの移行が完了していません。これらの移行は、v2.0.xで行われる予定です。

- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md)
- [BarChart](https://yamada-ui.com/docs/components/bar-chart.md)
- [DonutChart](https://yamada-ui.com/docs/components/donut-chart.md)
- [LineChart](https://yamada-ui.com/docs/components/line-chart.md)
- [PieChart](https://yamada-ui.com/docs/components/pie-chart.md)
- [RadarChart](https://yamada-ui.com/docs/components/radar-chart.md)
- [RadialChart](https://yamada-ui.com/docs/components/radial-chart.md)

## 追加されたフック

### useCounter

[useCounter](https://yamada-ui.com/docs/hooks/use-counter.md)を追加しました。

### useDescendants

[useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md)を追加しました。

### useEyeDropper

[useEyeDropper](https://yamada-ui.com/docs/hooks/use-eye-dropper.md)を追加しました。

### useFocusOnShow

[useFocusOnShow](https://yamada-ui.com/docs/hooks/use-focus-on-show.md)を追加しました。

### useFormatDateTime

[useFormatDateTime](https://yamada-ui.com/docs/hooks/use-format-date-time.md)を追加しました。

### useOnline

[useOnline](https://yamada-ui.com/docs/hooks/use-online.md)を追加しました。

## 削除されたフック

### useToken

[useToken](https://v1.yamada-ui.com/ja/hooks/use-token)を削除しました。