Migrating Custom Chakra UI Theme to Chakra UI v3

Question

I'm updating a Chakra UI theme to work with Chakra UI v3 and need guidance on migrating custom components. My current theme extends @chakra-ui/react and defines various component styles like Alert, Button, Tabs, etc.

import { extendTheme } from "@chakra-ui/react";
import Alert from "./components/Alert";
import Button from "./components/Button";
import Tabs from "./components/Tabs";

const theme = extendTheme({
    components: {
        Alert,
        Button,
        Tabs,
    },
});

export default theme;

How should I update these components to align with Chakra UI v3? Are there major API changes affecting custom components, and is there a recommended approach for migrating them? Documentation is not explaining everything. They have showed how the styles used though.

Answer 1

Chakra mainly removes design-related logic from the React lifecycle to improve the reconciliation algorithm in Chakra 3. Now, you need to use Recipes instead of direct components.

Button Recipe

import { defineRecipe } from "@chakra-ui/react";

const buttonRecipe = defineRecipe({
  base: {
    fontWeight: "bold",
  },
  variants: {
    solid: {
      bg: "red.500",
    },
    outline: {
      border: "2px solid",
      borderColor: "black.500",
    },
  },
  defaultVariant: "solid",
});

export default buttonRecipe;

System Object Creation

import { createSystem, defaultConfig } from "@chakra-ui/react";
import buttonRecipe from "./components/Button";

const themeConfig = {
  theme: {
    recipes: {
      Button: buttonRecipe,
    },
  },
};

export const system = createSystem(defaultConfig, themeConfig);

With this setup, you now use the Button via the system object instead of directly using Chakra UI components.