Home Original page

Panda CSS - Build modern websites using build time and type-safe CSS-in-JS

CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience

Write type-safe styles with ease using

$npm i -D @pandacss/dev

Yums the panda drinking a bubble tea

Styling library you’ll enjoy using 🐼

import { css } from "./styled-system/css";
import { circle, stack } from "./styled-system/patterns";
function App() {
  return (
    <div className={stack({ direction: "row", p: "4" })}>
      <div className={circle({ size: "5rem", overflow: "hidden" })}>
        <img src="https://via.placeholder.com/150" alt="avatar" />
      </div>
      <div className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
        John Doe
      </div>
      <div className={css({ mt: "2", fontSize: "sm", color: "gray.600" })}>
        john@doe.com
      </div>
    </div>
  );
}

CSS-in-JS with build time generated styles, RSC compatible, multi-variant support.

Generates static CSS at build-time

TypeScript support out of the box

Low learning curve, great developer experience

The official Panda CSS course

Panda Mastery - Created by the Panda team

  • Save time by learning with a practical approach

  • Build consistent design systems with confidence

  • Learn the technical details behind Panda CSS

Watch Now

Generates Modern CSS code at build time

Panda uses modern features like cascade layers, :where selectors and css variables to give you best-in-class css output.

Learn more
@layer reset, base, tokens, recipes, utilities;
@layer utilities {
  .d_flex {
    display: flex;
  }
  .flex_row {
    flex-direction: row;
  }
  .mt_2 {
    margin-top: var(--space-2);
  }
  .fs_sm {
    font-size: var(--fontSizes-sm);
  }
  .color_gray.600 {
    color: var(--color-gray-600);
  }
}

Design token support

Specify base and semantic tokens with ease using the W3C working token spec.

Learn more

Core Tokens

const theme = {
  tokens: {
    colors: {
      primary: { value: '#0FEE0F' },
      secondary: { value: '#EE0F0F' }
    },
    fonts: {
      body: { value: 'system-ui, sans-serif' }
    },
    sizes: {
      small: { value: '12px' },
      medium: { value: '16px' },
      large: { value: '24px' }
    }
  }
}

Semantic Tokens

const theme = {
  semanticTokens: {
    colors: {
      danger: {
        value: { base: '{colors.red.500}', _dark: '{colors.red.200}' }
      },
      success: {
        value: { base: '{colors.green.500}', _dark: '{colors.green.300}' }
      },
      muted:{
        value: { base: '{colors.gray.500}', _dark: '{colors.gray.300}' }
      },
      canvas: { value : '{colors.white}' }
    }
  }
}

Recipes and variants just like Stitches

Panda gives you a robust functions to define recipes and even “cva” to help you design composable component styles.

Learn more

export const badge = cva({
  base: {
    fontWeight: 'medium',
    px: '3',
    rounded: 'md',
  },
  variants: {
    status: {
      default: {
        color: 'white',
        bg: 'gray.500',
      },
      success: {
        color: 'white',
        bg: 'green.500',
      },
      warning: {
        color: 'white',
        bg: 'yellow.500',
      },
    },
  },
  defaultVariants: {
    status: 'default',
  },
})

Tons of others love building and shipping sites with Panda.

Alex S.

Alex S.@astahmer_dev

Working with Panda CSS has been a delightful experience. The seamless styling it offers is impressive, providing a native CSS-like experience but with added benefits like typesafety, JIT styles, and recipe variants. Plus, you can use it anywhere!

Abraham A.

Abraham A.@anubra266

🐼 Excited to share my love for @panda_css! It's revolutionized my styling process by seamlessly integrating CSS in JS without any runtime overhead. Say goodbye to complexity and hello to efficiency! 🎨 Highly recommend trying it out!

Ivica B.

Ivica B.@_isBatak

Panda CSS has completely transformed the way I approach styling in my projects. By harnessing the remarkable performance benefits of Utility Classes and the ease of use that CSS-in-JS provides, I experience a significant enhancement in readability and DX. It’s like having the best of both worlds in a single styling engine.

Love what you see?
Try Panda in 3 quick steps

Yums the panda waving

1Install Panda in your project

$npm i -D @pandacss/dev

2Run the initialize command

$npx panda init --postcss

3Start using Panda in your project

$npm run dev

Works Everywhere.
Including Server Components.

Panda works out of box with your favorite JS framework. Use it with Vite, Remix, Next.js (including app dir)

Yums the panda riding a rocket

Start building with
Panda today

Join our community

Get support, get involved and join our community of developers - Hop into our Discord

Join our Discord