Hey,

thank you for your help.
Even with the provided recipe code I am not able to create the variant myCustomButtonVariant.
Maybe you can tell me what I am missing with this updated code:

// theme.ts

import {
  createSystem,
  defaultBaseConfig,
  defineConfig,
  defineRecipe,
} from "@chakra-ui/react";

const buttonRecipe = defineRecipe({
  variants: {
    variant: {
      myCustomButtonVariant: {
        fontSize: "lg",
        px: 6,
        py: 3,
        color: "red.500",
      },
    },
  },
});

const config = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
  },
});

export default createSystem(defaultBaseConfig, config);

// CustomChakraProvider.tsx

import chakraTheme from "$lib/theme";
import { ChakraProvider } from "@chakra-ui/react";
import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode";

export function CustomChakraProvider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={chakraTheme}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  );
}

// main.tsx
import { CustomChakraProvider } from "$components/chakra/CustomChakraProvider";
import { Button } from "@chakra-ui/react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CustomChakraProvider>
        <Button variant="myCustomButtonVariant">Click Me</Button>
    </CustomChakraProvider>
  </StrictMode>,
);

The result looks like this:

Just to add something that I ran into today, for anyone else finding their way to this discussion through searching, which I don't think the docs do a very good job of calling it out. If you're writing custom variant recipes for a slotted component like Card for instance (that has .Root, .Body, etc. and you want one top level recipe that restyles some or all of the slots) you of course need to use defineSlotRecipe, this is easy enough to pickup on from the docs.

But what you might glaze over at the bottom of the page on Slot Recipes is that you also need to pass these recipes separately into the theme

const config = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
    slotRecipes: {
      card: cardRecipe
    }
  },
});

If you include a slot recipe in the regular recipes key, you won't get any kind of error or warning from TS or from the CLI tool which will happily generate types for you, but you'll end up with a duplicate type for e.g. CardVariant, one created from your custom recipe and one from the Chakra default, instead of having a single definition generated from the merge of both recipes.

When you actually go to use Card.Root variant="<whatever>" in a component, only your custom variant values will be treated as 'correct' as TS treats the separate CardVariant as completely overwriting the one generated from slotRecipes and the default pre-existing variants will generate a TS error.