Panda CSS Has a Free API You Should Know About

Panda CSS is a zero-runtime CSS-in-JS library with build-time extraction. Write type-safe styles in TypeScript that compile to atomic CSS — no runtime overhead. Why Panda CSS Wins A team using Emotion was spending 15ms per render on CSS-in-JS overhead. They switched to Panda CSS — same developer experience, but styles compile at build time. Runtime CSS cost: zero. Key Features: Zero Runtime — Styles extracted at build time Type-Safe — Full TypeScript autocomplete for properties and values Design Tokens — Built-in token system for consistent design Recipes — Multi-variant component styles Atomic CSS — Optimal output, no duplicate styles Quick Start npm install -D @pandacss/dev npx panda init import { css } from " ../styled-system/css " function Button () { return ( < button className = { css ({ bg : " blue.500 " , color : " white " , px : " 4 " , py : " 2 " , rounded : " md " , _hover : { bg : " blue.600 " } }) } > Click me </ button > ) } Recipes (Component Variants) import { cva } fro