chakra-ui-migrate

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chakra UI Migration: v2 → v3

Chakra UI 迁移指南：v2 → v3

You are guiding a developer through migrating their project from Chakra UI v2 to v3. Work through the steps below in order. Inspect the project first — never guess the package versions or framework.

Node requirement: Chakra UI v3 requires Node >= 20.x. Confirm before proceeding if the environment is uncertain.

你将引导开发者完成项目从Chakra UI v2到v3的迁移，请按以下步骤依次操作。首先检查项目情况——切勿猜测包版本或框架。

Node版本要求： Chakra UI v3要求Node >= 20.x。若环境不确定，请先确认版本。

Step 1 — Inspect the project

步骤1 — 检查项目状态

Read these files to understand the current state:

package.json

Look for:

Current
```
@chakra-ui/react
```
version (v2.x vs v3.x)

Related packages:

@chakra-ui/icons

@chakra-ui/hooks

@chakra-ui/next-js

@emotion/styled

framer-motion

Framework: Next.js (App Router or Pages Router), Vite, plain React

Package manager (from lockfiles:

pnpm-lock.yaml

yarn.lock

bun.lock

package-lock.json

)

Also spot-check key files when helpful:

Provider / theme setup (
```
_app.tsx
```
,
```
layout.tsx
```
,
```
theme.ts
```
)

Color mode usage (

ColorModeScript

useColorMode

useColorModeValue

)

Any component files showing heavy v2 patterns

读取以下文件以了解当前项目情况：

package.json

重点查看：

当前
```
@chakra-ui/react
```
版本（v2.x 或 v3.x）

Step 2 — Update packages

步骤2 — 更新依赖包

Remove v2-only dependencies

移除仅v2版本依赖

bash

undefined

bash

undefined

npm

npm uninstall @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion

pnpm

pnpm remove @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion

yarn

yarn remove @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion


`@emotion/styled` and `framer-motion` are no longer required in v3.

yarn remove @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion


`@emotion/styled`和`framer-motion`在v3中不再是必需依赖。

Install v3 core packages

安装v3核心包

bash

undefined

bash

undefined

npm

npm install @chakra-ui/react @emotion/react

pnpm

pnpm add @chakra-ui/react @emotion/react

yarn

yarn add @chakra-ui/react @emotion/react

undefined

yarn add @chakra-ui/react @emotion/react

undefined

Replacements for removed packages

已移除包的替代方案

Removed	Replacement
`@chakra-ui/icons`	`lucide-react` or `react-icons`
`@chakra-ui/hooks`	`react-use` or `usehooks-ts`
`@chakra-ui/next-js`	`asChild` prop pattern (see Next.js section)

已移除包	替代方案
`@chakra-ui/icons`	`lucide-react` 或 `react-icons`
`@chakra-ui/hooks`	`react-use` 或 `usehooks-ts`
`@chakra-ui/next-js`	`asChild` 属性模式（详见Next.js章节）

Step 3 — Run the codemod

步骤3 — 运行codemod

The official codemod handles most mechanical changes: component renames, prop updates, import rewrites, and compound component restructuring. It does not replace manual review — plan to audit the output.

Dry run first (no files changed):

bash

npx @chakra-ui/codemod upgrade --dry

Review what it proposes. When satisfied:

bash

npx @chakra-ui/codemod upgrade

After the codemod, commit the changes before making manual edits so you have a clean diff to work from.

官方codemod可处理大部分机械性变更：组件重命名、属性更新、导入路径改写、复合组件结构调整。但仍需手动审核输出结果，不可完全依赖。

先执行试运行（不修改文件）：

bash

npx @chakra-ui/codemod upgrade --dry

查看变更建议，确认无误后执行正式迁移：

bash

npx @chakra-ui/codemod upgrade

运行codemod后，先提交变更，再进行手动编辑，以便清晰查看差异。

Step 4 — Update the Provider

步骤4 — 更新Provider配置

Old v2 pattern

v2旧模式

tsx

// v2
import { ChakraProvider } from "@chakra-ui/react"
import theme from "./theme"

;<ChakraProvider theme={theme}>{children}</ChakraProvider>

tsx

// v2
import { ChakraProvider } from "@chakra-ui/react"
import theme from "./theme"

;<ChakraProvider theme={theme}>{children}</ChakraProvider>

New v3 pattern (using Chakra CLI snippets)

v3新模式（使用Chakra CLI代码片段）

Generate the provider and component snippets:

bash

npx @chakra-ui/cli snippet add

This creates

components/ui/provider.tsx

(plus

toaster

and

tooltip

snippets) and automatically installs required npm dependencies — including

next-themes

. Import and use it:

tsx

// v3 — app/layout.tsx (Next.js App Router)
import { Provider } from "@/components/ui/provider"

;<html lang="en" suppressHydrationWarning>
  <body>
    <Provider>{children}</Provider>
  </body>
</html>

The

Provider

file includes

"use client"

— do not add it to

layout.tsx

. See the Next.js section for Pages Router placement.

生成Provider和组件代码片段：

bash

npx @chakra-ui/cli snippet add

此命令会创建

components/ui/provider.tsx

（同时生成toaster和tooltip代码片段），并自动安装所需npm依赖——包括

next-themes

。导入并使用该Provider：

tsx

// v3 — app/layout.tsx（Next.js App Router）
import { Provider } from "@/components/ui/provider"

;<html lang="en" suppressHydrationWarning>
  <body>
    <Provider>{children}</Provider>
  </body>
</html>

Provider

文件已包含

"use client"

——请勿在

layout.tsx

中添加。Pages Router的配置位置详见Next.js章节。

Custom theme in v3

v3自定义主题

Replace

extendTheme

with

createSystem

// v2
import { extendTheme } from "@chakra-ui/react"
// v3
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

export const theme = extendTheme({ colors: { brand: { 500: "#2196f3" } } })

const config = defineConfig({
  theme: { tokens: { colors: { brand: { 500: { value: "#2196f3" } } } } },
})
export const system = createSystem(defaultConfig, config)

Pass

system

ChakraProvider

via

value={system}

将

extendTheme

替换为

createSystem

：

// v2
import { extendTheme } from "@chakra-ui/react"
// v3
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

export const theme = extendTheme({ colors: { brand: { 500: "#2196f3" } } })

const config = defineConfig({
  theme: { tokens: { colors: { brand: { 500: { value: "#2196f3" } } } } },
})
export const system = createSystem(defaultConfig, config)

通过

value={system}

将

system

传递给

ChakraProvider

。

Step 5 — Color mode migration

步骤5 — 颜色模式迁移

Remove all v2 color mode patterns

移除所有v2颜色模式相关代码

tsx

// REMOVE these v2 imports and usages:
import { ColorModeScript } from "@chakra-ui/react"
// ❌
import { useColorMode } from "@chakra-ui/react"
// ❌ (use next-themes)
import { useColorModeValue } from "@chakra-ui/react"
// ❌ (use CSS tokens)
import { DarkMode, LightMode } from "@chakra-ui/react"

// ❌

// Also remove from _document.tsx:
;<ColorModeScript initialColorMode={theme.config.initialColorMode} /> // ❌

tsx

// 移除以下v2导入及用法：
import { ColorModeScript } from "@chakra-ui/react"
// ❌
import { useColorMode } from "@chakra-ui/react"
// ❌（使用next-themes替代）
import { useColorModeValue } from "@chakra-ui/react"
// ❌（使用CSS tokens替代）
import { DarkMode, LightMode } from "@chakra-ui/react"

// ❌

// 同时移除_document.tsx中的以下代码：
;<ColorModeScript initialColorMode={theme.config.initialColorMode} /> // ❌

v3 color mode approach

v3颜色模式实现方式

Color mode is handled by

next-themes

via the generated

Provider

. Use semantic tokens that automatically respond to the active color mode:

tsx

// Use Chakra semantic tokens — they flip automatically in dark mode
<Box color="fg.default" bg="bg.subtle">
  ...
</Box>

For a color mode toggle, use the generated

components/ui/color-mode.tsx

snippet or

useColorMode

from

next-themes

directly.

颜色模式由

next-themes

通过生成的

Provider

处理。使用语义化tokens，可自动适配当前颜色模式：

tsx

// 使用Chakra语义化tokens——会在暗黑模式下自动切换
<Box color="fg.default" bg="bg.subtle">
  ...
</Box>

如需颜色模式切换按钮，可使用生成的

components/ui/color-mode.tsx

代码片段，或直接使用

next-themes

的

useColorMode

。

Step 6 — Prop renames

步骤6 — 属性重命名

These boolean and style props were renamed in v3 for consistency with HTML and modern React conventions. The codemod catches most of these, but verify manually afterward.

为了与HTML和现代React规范保持一致，v3中部分布尔值和样式属性已重命名。codemod会处理大部分此类变更，但仍需手动验证。

Boolean props

布尔属性

v2	v3
`isOpen`	`open`
`defaultIsOpen`	`defaultOpen`
`isDisabled`	`disabled`
`isInvalid`	`invalid`
`isRequired`	`required`
`isReadOnly`	`readOnly`
`isChecked`	`checked`
`isLoaded`	`loaded`
`isIndeterminate`	`indeterminate`

v2	v3
`isOpen`	`open`
`defaultIsOpen`	`defaultOpen`
`isDisabled`	`disabled`
`isInvalid`	`invalid`
`isRequired`	`required`
`isReadOnly`	`readOnly`
`isChecked`	`checked`
`isLoaded`	`loaded`
`isIndeterminate`	`indeterminate`

Style and layout props

样式与布局属性

v2	v3
`colorScheme`	`colorPalette`
`noOfLines`	`lineClamp`
`truncated`	`truncate`
`spacing` (Stack)	`gap`
`apply`	`textStyle` or `layerStyle`

v2	v3
`colorScheme`	`colorPalette`
`noOfLines`	`lineClamp`
`truncated`	`truncate`
`spacing` (Stack)	`gap`
`apply`	`textStyle` 或 `layerStyle`

Nested style props

嵌套样式属性

tsx

// v2 — sx with nested pseudo-selectors
<Box sx={{ "&:hover": { color: "blue.500" } }} />

// v3 — css prop with "&" selectors
<Box css={{ "&:hover": { color: "blue.500" } }} />

tsx

// v2 — 使用sx和嵌套伪选择器
<Box sx={{ "&:hover": { color: "blue.500" } }} />

// v3 — 使用css和"&"选择器
<Box css={{ "&:hover": { color: "blue.500" } }} />

Step 7 — Component migrations

步骤7 — 组件迁移

Renamed components

重命名组件

v2	v3
`Modal`	`Dialog`
`FormControl`	`Field`
`Select`	`NativeSelect`
`AlertDialog`	`AlertDialog` (compound, see below)

Modal

is the most common rename — every

<Modal>

<ModalOverlay>

<ModalContent>

<ModalHeader>

<ModalBody>

<ModalFooter>

, and

<ModalCloseButton>

becomes a

Dialog.*

compound part:

tsx

// v2
<Modal isOpen={open} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Title</ModalHeader>
    <ModalBody>Body</ModalBody>
    <ModalFooter><Button onClick={onClose}>Close</Button></ModalFooter>
  </ModalContent>
</Modal>

// v3
<Dialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Header><Dialog.Title>Title</Dialog.Title></Dialog.Header>
      <Dialog.Body>Body</Dialog.Body>
      <Dialog.Footer><Button onClick={() => setOpen(false)}>Close</Button></Dialog.Footer>
      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

v2	v3
`Modal`	`Dialog`
`FormControl`	`Field`
`Select`	`NativeSelect`
`AlertDialog`	`AlertDialog` （复合组件，详见下文）

Modal

是最常见的重命名组件——所有

<Modal>

、

<ModalOverlay>

、

<ModalContent>

、

<ModalHeader>

、

<ModalBody>

、

<ModalFooter>

和

<ModalCloseButton>

都需替换为

Dialog.*

复合组件：

tsx

// v2
<Modal isOpen={open} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Title</ModalHeader>
    <ModalBody>Body</ModalBody>
    <ModalFooter><Button onClick={onClose}>Close</Button></ModalFooter>
  </ModalContent>
</Modal>

// v3
<Dialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Header><Dialog.Title>Title</Dialog.Title></Dialog.Header>
      <Dialog.Body>Body</Dialog.Body>
      <Dialog.Footer><Button onClick={() => setOpen(false)}>Close</Button></Dialog.Footer>
      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Compound component rewrites

复合组件重构

v3 adopts a consistent compound component API. The codemod handles many of these, but complex custom usage needs manual review.

Checkbox

tsx

// v2
<Checkbox isChecked={val} onChange={fn}>Label</Checkbox>

// v3
<Checkbox.Root checked={val} onCheckedChange={fn}>
  <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control>
  <Checkbox.Label>Label</Checkbox.Label>
</Checkbox.Root>

Progress

tsx

// v2
<Progress value={60} colorScheme="blue" />

// v3
<Progress.Root value={60} colorPalette="blue">
  <Progress.Track><Progress.Range /></Progress.Track>
</Progress.Root>

Accordion

tsx

// v2
<Accordion><AccordionItem><AccordionButton /><AccordionPanel /></AccordionItem></Accordion>

// v3
<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.ItemTrigger />
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>

FormControl → Field

tsx

// v2
<FormControl isInvalid={!!error} isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormErrorMessage>{error}</FormErrorMessage>
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

// v3
<Field.Root invalid={!!error} required>
  <Field.Label>Email</Field.Label>
  <Input type="email" />
  <Field.ErrorText>{error}</Field.ErrorText>
  <Field.HelpText>We'll never share your email.</Field.HelpText>
</Field.Root>

All

FormControl

sub-parts map to

Field.*

```
FormLabel
```
→
```
Field.Label
```
```
FormErrorMessage
```
→
```
Field.ErrorText
```
```
FormHelperText
```
→
```
Field.HelpText
```

FormControl

props

isInvalid

isRequired

isDisabled

→

invalid

required

disabled

Dialog / Drawer / Menu / Tabs follow the same compound pattern: use

ComponentName.Root

.Trigger

.Content

.Item

, etc. Check the Chakra UI v3 docs for the specific compound API for each.

v3采用统一的复合组件API。codemod会处理大部分此类变更，但复杂的自定义用法需手动审核。

Checkbox

tsx

// v2
<Checkbox isChecked={val} onChange={fn}>Label</Checkbox>

// v3
<Checkbox.Root checked={val} onCheckedChange={fn}>
  <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control>
  <Checkbox.Label>Label</Checkbox.Label>
</Checkbox.Root>

Progress

tsx

// v2
<Progress value={60} colorScheme="blue" />

// v3
<Progress.Root value={60} colorPalette="blue">
  <Progress.Track><Progress.Range /></Progress.Track>
</Progress.Root>

Accordion

tsx

// v2
<Accordion><AccordionItem><AccordionButton /><AccordionPanel /></AccordionItem></Accordion>

// v3
<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.ItemTrigger />
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>

FormControl → Field

tsx

// v2
<FormControl isInvalid={!!error} isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormErrorMessage>{error}</FormErrorMessage>
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

// v3
<Field.Root invalid={!!error} required>
  <Field.Label>Email</Field.Label>
  <Input type="email" />
  <Field.ErrorText>{error}</Field.ErrorText>
  <Field.HelpText>We'll never share your email.</Field.HelpText>
</Field.Root>

所有

FormControl

子组件均对应

Field.*

：

```
FormLabel
```
→
```
Field.Label
```
```
FormErrorMessage
```
→
```
Field.ErrorText
```
```
FormHelperText
```
→
```
Field.HelpText
```

FormControl

的

isInvalid

、

isRequired

、

isDisabled

属性 →

invalid

、

required

、

disabled

Dialog / Drawer / Menu / Tabs遵循相同的复合组件模式：使用

ComponentName.Root

、

.Trigger

、

.Content

、

.Item

等。具体API可查看Chakra UI v3官方文档。

Next.js Image and Link (replacing @chakra-ui/next-js)

Next.js Image和Link（替代@chakra-ui/next-js）

tsx

// v2 — @chakra-ui/next-js
import { LinkOverlay } from "@chakra-ui/next-js"

// v3 — asChild pattern
import NextLink from "next/link"
<ChakraLink asChild><NextLink href="/about">About</NextLink></ChakraLink>

import NextImage from "next/image"
<ChakraImage asChild><NextImage src="..." alt="..." /></ChakraImage>

tsx

// v2 — 使用@chakra-ui/next-js
import { LinkOverlay } from "@chakra-ui/next-js"

// v3 — 使用asChild模式
import NextLink from "next/link"
<ChakraLink asChild><NextLink href="/about">About</NextLink></ChakraLink>

import NextImage from "next/image"
<ChakraImage asChild><NextImage src="..." alt="..." /></ChakraImage>

Step 8 — Theming migration

步骤8 — 主题迁移

styleConfig and multiStyleConfig → recipes

styleConfig和multiStyleConfig → recipes

// v3 — single component (recipe)
import { defineRecipe } from "@chakra-ui/react"

// v2
const buttonStyle = {
  baseStyle: { fontWeight: "bold" },
  variants: { solid: { bg: "blue.500" } },
  defaultProps: { variant: "solid" },
}

const buttonRecipe = defineRecipe({
  base: { fontWeight: "bold" },
  variants: { variant: { solid: { bg: "blue.500" } } },
  defaultVariants: { variant: "solid" },
})

// v3 — slot recipe
import { defineSlotRecipe } from "@chakra-ui/react"

// v2 — multiStyleConfig (multi-part component)
const cardStyle = multiStyleConfig({
  parts: ["root", "header"],
  baseStyle: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})

const cardSlotRecipe = defineSlotRecipe({
  slots: ["root", "header"],
  base: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})

// v3 — 单组件（recipe）
import { defineRecipe } from "@chakra-ui/react"

// v2
const buttonStyle = {
  baseStyle: { fontWeight: "bold" },
  variants: { solid: { bg: "blue.500" } },
  defaultProps: { variant: "solid" },
}

const buttonRecipe = defineRecipe({
  base: { fontWeight: "bold" },
  variants: { variant: { solid: { bg: "blue.500" } } },
  defaultVariants: { variant: "solid" },
})

// v3 — 插槽recipe
import { defineSlotRecipe } from "@chakra-ui/react"

// v2 — multiStyleConfig（多部分组件）
const cardStyle = multiStyleConfig({
  parts: ["root", "header"],
  baseStyle: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})

const cardSlotRecipe = defineSlotRecipe({
  slots: ["root", "header"],
  base: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})

Typegen for custom tokens

自定义tokens类型生成

After adding custom tokens, semantic tokens, recipes, or slot recipes, run typegen to keep TypeScript types in sync:

bash

npx @chakra-ui/cli typegen ./theme.ts

Complex theme migrations — if you're moving a large v2 theme with many custom tokens, semantic tokens, or multi-part component styles, use the
chakra-ui-theming
skill. It covers the full token/recipe/slot-recipe API in depth and is a better guide than this section alone.

添加自定义tokens、语义化tokens、recipes或插槽recipes后，运行typegen以保持TypeScript类型同步：

bash

npx @chakra-ui/cli typegen ./theme.ts

复杂主题迁移 — 若迁移包含大量自定义tokens、语义化tokens或多部分组件样式的大型v2主题，请使用
chakra-ui-theming
技能。该技能深入讲解完整的token/recipe/插槽recipe API，比本节内容更具指导意义。

Step 9 — Next.js specifics

步骤9 — Next.js专属配置

App Router

Place
```
<Provider>
```
in
```
app/layout.tsx
```
(Server Component — no
```
"use client"
```
)
The generated
```
components/ui/provider.tsx
```
already has
```
"use client"
```
Add
```
suppressHydrationWarning
```
to
```
<html>
```
to prevent color mode flicker
Do not wrap the entire app or layout in
```
"use client"
```

将
```
<Provider>
```
放置在
```
app/layout.tsx
```
中（Server Component——无需添加
```
"use client"
```
）
生成的
```
components/ui/provider.tsx
```
已包含
```
"use client"
```
为
```
<html>
```
添加
```
suppressHydrationWarning
```
以避免颜色模式闪烁
请勿将整个应用或布局包裹在
```
"use client"
```
中

Pages Router

tsx

// pages/_app.js
import { Provider } from "@/components/ui/provider"

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

Remove any

ColorModeScript

from

pages/_document.tsx

— it is not used in v3.

tsx

// pages/_app.js
import { Provider } from "@/components/ui/provider"

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

移除

pages/_document.tsx

中的所有

ColorModeScript

——v3不再使用该组件。

Step 10 — Validation checklist

步骤10 — 验证清单

Work through this after the migration is complete:

Reinstall dependencies:
```
npm install
```
/
```
pnpm install
```
TypeScript:
```
npx tsc --noEmit
```
— resolve all type errors
Lint:
```
npm run lint
```
Build:
```
npm run build
```
Visually verify color mode toggle (light ↔ dark)
Test interactive components: Dialog, Drawer, Menu, Tabs, Accordion
Test form components: Checkbox, Select/NativeSelect, Input, Radio
Check for visual regressions across key pages

Search codebase for leftover v2 imports:

bash

grep -r "ColorModeScript\|useColorModeValue\|extendTheme\|styleConfig\|@chakra-ui/icons\|@chakra-ui/next-js" src/

迁移完成后，请逐一检查以下内容：

重新安装依赖：
```
npm install
```
/
```
pnpm install
```
TypeScript检查：
```
npx tsc --noEmit
```
——解决所有类型错误
代码 lint：
```
npm run lint
```
项目构建：
```
npm run build
```
视觉验证颜色模式切换（亮色 ↔ 暗色）
测试交互式组件：Dialog、Drawer、Menu、Tabs、Accordion
测试表单组件：Checkbox、Select/NativeSelect、Input、Radio
检查关键页面是否存在视觉回归

搜索代码库中残留的v2导入：

bash

grep -r "ColorModeScript\|useColorModeValue\|extendTheme\|styleConfig\|@chakra-ui/icons\|@chakra-ui/next-js" src/

Clarifying questions (when context is unclear)

澄清问题（上下文不明确时）

If the user's version, framework, or scope is ambiguous, ask:

"What version of
```
@chakra-ui/react
```
are you on right now?"
"Are you using Next.js App Router, Pages Router, Vite, or plain React?"
"Are you migrating the full codebase or just specific components?"

State assumptions clearly if you proceed without asking.

若用户的版本、框架或迁移范围不明确，请询问：

"你当前使用的
```
@chakra-ui/react
```
版本是多少？"
"你使用的是Next.js App Router、Pages Router、Vite还是原生React？"
"你是迁移整个代码库还是仅特定组件？"

若未询问便继续操作，请明确说明你的假设。