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 className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
John Doe
<div className={css({ mt: "2", fontSize: "sm", color: "gray.600" })}>
CSS-in-JS with build time generated styles, RSC compatible, multi-variant support.
Zero runtime
Generates static CSS at build-time
Type safe
TypeScript support out of the box
Amazing DX
Low learning curve, great developer experience

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}' }
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.

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