Panda CSS Has a Free API You're Not Using

Panda CSS is a zero-runtime CSS-in-JS engine that generates atomic CSS at build time. It gives you the DX of styled-components with the performance of Tailwind. The Free APIs You're Missing 1. Recipes — Type-Safe Component Variants import { cva } from " styled-system/css " ; const button = cva ({ base : { display : " inline-flex " , alignItems : " center " , borderRadius : " lg " , fontWeight : " semibold " , transition : " all 0.2s " , }, variants : { visual : { solid : { bg : " blue.500 " , color : " white " , _hover : { bg : " blue.600 " } }, outline : { border : " 2px solid " , borderColor : " blue.500 " , color : " blue.500 " }, ghost : { color : " blue.500 " , _hover : { bg : " blue.50 " } }, }, size : { sm : { h : " 8 " , px : " 3 " , fontSize : " sm " }, md : { h : " 10 " , px : " 4 " , fontSize : " md " }, lg : { h : " 12 " , px : " 6 " , fontSize : " lg " }, }, }, defaultVariants : { visual : " solid " , size : " md " }, }); // <button className={button({ visual: "outline", s