Atomic Slot Recipes not working in Next.js

[kopestik]

I tried PandaCSS and just copy-pasted the Atomic Slot Recipe code from the docs into a Next.js project. However, it doesn't seem to be working:

Config:
https://github.com/kopestik/test-panda/blob/master/panda.config.ts

Code:
Recipe: https://github.com/kopestik/test-panda/blob/master/src/recipes/checkbox.ts
Usage: https://github.com/kopestik/test-panda/blob/master/src/app/page.tsx

Result:

Am I missing something or doing something wrong?

[astahmer]

in layout.tsx you import "./globals.css"; but that file only contains the @layers order
since you didnt use the postcss plugin, the CSS is never injected
you can do so like this https://panda-css.com/docs/installation/postcss#add-panda-to-your-postcss-config

or you can use the CLI only (run panda command) and replace the import "./globals.css"; to import "../../styled-system/styles.css";