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", size: "lg" })}>

Full type safety on variants. No runtime CSS generation.

2. Patterns — Layout Primitives

import { stack, hstack, grid, center, wrap } from "styled-system/patterns";

<div className={stack({ gap: "4", direction: "column" })}>
  <div className={hstack({ justify: "space-between" })}>
    <h1>Title</h1>
    <button>Action</button>
  </div>
  <div className={grid({ columns: 3, gap: "4" })}>
    {items.map(item => <Card key={item.id} />)}
  </div>
</div>

3. Token System — Design Tokens as Code

// panda.config.ts
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: {
            50: { value: "#eff6ff" },
            500: { value: "#3b82f6" },
            900: { value: "#1e3a5f" },
          },
        },
        fonts: {
          heading: { value: "Cal Sans, sans-serif" },
        },
      },
      semanticTokens: {
        colors: {
          bg: {
            DEFAULT: { value: { base: "white", _dark: "gray.900" } },
            muted: { value: { base: "gray.50", _dark: "gray.800" } },
          },
        },
      },
    },
  },
});

4. Text Styles — Typography System

textStyles: {
  "heading.hero": {
    value: {
      fontSize: { base: "3xl", md: "5xl" },
      fontWeight: "bold",
      lineHeight: "tight",
      letterSpacing: "-0.02em",
    },
  },
}

// Usage: <h1 className={css({ textStyle: "heading.hero" })}>

5. Slot Recipes — Multi-Part Component Styles

import { sva } from "styled-system/css";

const card = sva({
  slots: ["root", "header", "body", "footer"],
  base: {
    root: { borderRadius: "xl", overflow: "hidden", shadow: "md" },
    header: { px: "6", py: "4", borderBottom: "1px solid", borderColor: "gray.200" },
    body: { px: "6", py: "4" },
    footer: { px: "6", py: "4", bg: "gray.50" },
  },
  variants: {
    variant: {
      elevated: { root: { shadow: "xl" } },
      outline: { root: { border: "1px solid", borderColor: "gray.200", shadow: "none" } },
    },
  },
});

const styles = card({ variant: "elevated" });
// <div className={styles.root}> <div className={styles.header}> ...

Getting Started

npm install -D @pandacss/dev
npx panda init

---

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: [e-mail]

Check out my awesome-web-scraping list for the best scraping tools and resources.