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

panda

$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.
Zero runtime
Generates static CSS at build-time
Type safe
TypeScript support out of the box
Amazing DX
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.

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.

Remix
Vite
NextJs
PostCSS
Astro
Storybook
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