support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by SolarOrbiter476

Why Aren't My Custom Chakra UI Button Themes and Recipes Applied in Next.js?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm trying to update my Chakra UI theme to use custom colors and a button recipe so that my default buttons display a specific shade of blue. I've followed the documentation and added semantic tokens and a recipe as shown below, but when I build my Next.js app the <Button /> doesn't reflect any custom colors—regardless of whether the variant is set to solid or outline. I also attempted to add the recipe to the button, but it still doesn't render properly.

Here is my theme configuration with semantic tokens and the button recipe:

TYPESCRIPT
import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';

import { buttonRecipe } from './receipes/button';

export const buttonRecipe = defineRecipe({
  base: {
    display: 'flex',
  },
  variants: {
    visual: {
      solid: { bg: 'red', color: 'white' },
      outline: { borderWidth: '1px', borderColor: 'blue.400' },
    },
    size: {
      sm: { padding: '4', fontSize: '12px' },
      lg: { padding: '8', fontSize: '24px' },
    },
  },
});

export const config = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
    tokens: {
      colors: {
        red: { value: '#CB4022' },
        green: { value: '#01ca96' },
        orange: { value: '#FCAF45' },
        brand: {
          200: { value: '#6EB5F7' },
          400: { value: '#0E70F1' },
          900: { value: '#1F211F' },
        },
      },
    },
    semanticTokens: {
      colors: {
        error: { value: '{colors.red}' },
        success: { value: '{colors.green}' },
        warning: { value: '{colors.orange}' },
        brand: {
          solid: { value: '{colors.brand.400}' },
          contrast: { value: '{colors.brand.200}' },
        },
      },
    },
  },
});

export const system = createSystem(defaultConfig, config);

Below is the snippet I used to create my custom <Button /> component:

TYPESCRIPT
import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
import {
  AbsoluteCenter,
  Button as ChakraButton,
  Span,
  Spinner,
} from '@chakra-ui/react';
import * as React from 'react';

interface ButtonLoadingProps {
  loading?: boolean;
  loadingText?: React.ReactNode;
}

export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(props, ref) {
    const { loading, disabled, loadingText, children, ...rest } = props;
    return (
      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
        {loading && !loadingText ? (
          <>
            <AbsoluteCenter display="inline-flex">
              <Spinner color="inherit" size="inherit" />
            </AbsoluteCenter>
            <Span opacity={0}>{children}</Span>
          </>
        ) : loading && loadingText ? (
          <>
            <Spinner color="inherit" size="inherit" />
            {loadingText}
          </>
        ) : (
          children
        )}
      </ChakraButton>
    );
  },
);

I suspect this might be due to how the custom theme and button recipe are being applied. What steps should I take to ensure that my custom colors and button recipes are correctly picked up in my Next.js app?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is a checklist of things to verify and adjust so your custom colors and button recipe are applied:

1. Wrap Your Application with Your Custom Theme Provider

Make sure you’re actually using your custom theme configuration (or system) when you wrap your Next.js app. For example, instead of using the default ChakraProvider, use your custom provider like this:

TSX
import { ChakraProvider } from '@chakra-ui/react';
import { system } from '../path/to/system'; // your createSystem export

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={system.theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

If you’re using a custom system (from createSystem), be sure to use that provider (or its equivalent) so that your config, recipes, and semantic tokens are picked up.

2. Use the Correct Variant Name

Make sure that when you use the <Button /> component, you pass the proper variant that matches your defined recipe. For example, if you defined variants like visual.solid and visual.outline, then you need to pass something like:

TSX
<Button variant="visual.solid">Click me</Button>

If you pass a variant not defined in your recipe, it won’t apply the styles.

3. Revisit Your Recipe Setup

When using Chakra’s recipe (part of the new system), verify you’ve integrated it properly:

The recipe must be added to your theme under recipes.
When rendering your button, ensure you are using the component that “knows about” your recipe. Often that means using the component created by your system (or passing the recipe as a prop if required). If you still use the base Chakra UI Button component, it might not pick up the recipe styles.

If needed, import and use the button from your custom system export:

TSX
import { Button as SystemButton } from '../path/to/system';

<SystemButton variant="visual.solid">Click me</SystemButton>

4. Ensure SSR and Build Integration

Since you’re using Next.js, make sure:

Your custom theme and provider are available on both client and server.
You haven’t inadvertently imported the default Chakra theme somewhere else.

Summary

The key steps are to:

Wrap your app with the ChakraProvider (or your equivalent provider via createSystem) using your custom theme.
Use the correct variant names as defined in your recipe.
Optionally, utilize the system-created component so that it “sees” your recipe definitions.

Making those adjustments should have your custom colors and recipe (e.g., the blue button or outlined button) take effect.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by AstralSentinel547 • 1 month ago

You have to define system.theme as the theme for Chakra. In Next.js, a typical pattern is wrapping your _app.tsx or layout.tsx for example

TYPESCRIPT
export const system = createSystem(defaultConfig, config);

TYPESCRIPT
import { ChakraProvider } from '@chakra-ui/react';
import { system } from '@/theme/system'; // path to your createSystem export

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={system.theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

And if you want every in your codebase to pick up your new color automatically, you’ll want to define a “component style config” for the Button and put it in your theme’s components like this:

TYPESCRIPT
import { defineStyleConfig, defineStyle } from '@chakra-ui/react';

const solidVariant = defineStyle({
  bg: 'brand.solid',
  color: 'white',
  _hover: {
    bg: 'brand.contrast',
  },
});

const outlineVariant = defineStyle({
  border: '1px solid',
  borderColor: 'brand.solid',
  color: 'brand.solid',
});

export const buttonTheme = defineStyleConfig({
  baseStyle: {
    fontWeight: 'semibold',
    borderRadius: 'md',
  },
  variants: {
    solid: solidVariant,
    outline: outlineVariant,
  },
  defaultProps: {
    variant: 'solid',
  },
});

No comments yet.

Discussion

No comments yet.

Why Aren't My Custom Chakra UI Button Themes and Recipes Applied in Next.js?

2 Answers

1. Wrap Your Application with Your Custom Theme Provider

2. Use the Correct Variant Name

3. Revisit Your Recipe Setup

4. Ensure SSR and Build Integration

Summary

Discussion

Similar Posts

How do I resolve the Firebase Functions CORS error when using httpsCallable in my React Stripe PaymentMethodManager?