chakra-ui-migrate

Remove v2-only packages like @chakra-ui/icons and framer-motion, install @chakra-ui/react v3 with @emotion/react, then run npx @chakra-ui/codemod upgrade. Afterward manually update the provider, color mode, prop names, and compound components, and validate with tsc, lint, and build.

colorScheme was renamed to colorPalette and isDisabled to disabled in v3. Other boolean props follow the same pattern: isOpen becomes open, isInvalid becomes invalid, and isChecked becomes checked.

Yes. Place the generated Provider in app/layout.tsx as a Server Component, since the provider file itself includes the use client directive. Add suppressHydrationWarning to the html tag to prevent color mode flicker.

useColorModeValue, useColorMode, and ColorModeScript were removed in v3. Color mode is now handled by next-themes through the generated Provider, and you should use semantic tokens like fg.default and bg.subtle that adapt automatically.

Modal becomes the Dialog compound component with Dialog.Root, Dialog.Content, Dialog.Header, and related parts. FormControl becomes Field.Root with Field.Label, Field.ErrorText, and Field.HelpText replacing FormLabel, FormErrorMessage, and FormHelperText.

The codemod handles mechanical changes like component renames, prop updates, and import rewrites, but it does not replace manual review. Complex compound component usage, custom themes, and color mode logic still require manual migration and a validation pass.