Creating Custom Recipe

Overview

This lesson covers how to create a brand-new recipe from scratch, giving you full control over your design system.

Key Takeaways

You can create your own Chakra recipe from scratch. There are two main methods to do this:

1. Using the chakra() factory for quick inline recipes

import { chakra } from '@chakra-ui/react'

export const Headline = chakra('h2', {
  base: { fontWeight: 'bold', lineHeight: 'short', color: 'fg.default' },
  variants: {
    size: {
      title: { fontSize: '4xl' },
      subtitle: { fontSize: '2xl', color: 'fg.muted' },
      section: { fontSize: 'xl', borderBottom: '1px solid', borderColor: 'border' },
    },
  },
  defaultVariants: { size: 'title' },
})

2. Using the defineRecipe + createRecipeContext pattern for reusable, scalable components

import { defineRecipe, createRecipeContext } from '@chakra-ui/react'

export const headlineRecipe = defineRecipe({
  base: { fontWeight: 'bold', lineHeight: 'short', color: 'fg.default' },
  variants: {
    size: {
      title: { fontSize: '4xl' },
      subtitle: { fontSize: '2xl', color: 'fg.muted' },
      section: { fontSize: 'xl', borderBottom: '1px solid', borderColor: 'border' },
    },
  },
  defaultVariants: { size: 'title' },
})

const { withContext } = createRecipeContext({ recipe: headlineRecipe })
export const Headline = withContext('h2')

This approach is perfect for shared, reusable design systems.