Migrating Alert Recipe

This lesson focuses on migrating a slots alert recipe to a config recipe. migration lessons.

Create Alert Recipe File

Create a new file named alert.recipe.ts and move the existing alert recipe into this file.

Update Imports

Use the defineSlotRecipe function for slot recipes

import { defineSlotRecipe } from '@pandacss/dev'

Fix TypeScript Error

Add a className to the recipe to resolve the TypeScript error

className: 'alert'

Update Panda Config

Import the alert recipe into your panda.config file

import { alertRecipe } from './alert.recipe'

Also, add a recipes property to the config and include the alert recipe

recipes: {
  alert: alertRecipe
}

Run Codegen and Restart Dev Server

Run panda codegen and restart the development server

Update Imports in Codebase

Import the alert recipe from styled-system/recipes

import { alert } from 'styled-system/recipes'

Replace existing alert recipe references with the new import.

Inspect the DOM for Changes

Check the DOM to compare the previous atomic alert recipe and the new config recipe.