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

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>
  );
}

import { Box, Stack, Circle } from './styled-system/jsx'

function App() {
  return (
    <Stack direction="row" p="4" rounded="md" shadow="lg" bg="white">
      <Circle size="5rem" overflow="hidden">
        <img src="https://via.placeholder.com/150" alt="avatar" />
      </Circle>
      <Box mt="4" fontSize="xl" fontWeight="semibold">
        John Doe
      </Box>
      <Box mt="2" fontSize="sm" color="gray.600">
        john@doe.com
      </Box>
    </Stack>
  )
}

import { styled } from './styled-system/jsx'
import { cva } from './styled-system/css'

export const badge = cva({
  base: {
    fontWeight: 'medium',
    borderRadius: 'md',
  },
  variants: {
    status: {
      default: {
        color: 'white',
        bg: 'gray.500',
      },
      success: {
        color: 'white',
        bg: 'green.500',
      },
    },
  }
})

export const Badge = styled('span', badge)

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

Jess Truss@jess__truss

Of all the libraries I’ve built design systems with: SC, emotion, xstyled, styled-system, theme-ui etc., @panda__css has been the most ergonomic and enjoyable. Took a look at the roadmap and it looks like it’s getting even better.

Dann@dan_best

Been using @panda__css for a week on an actual product and I've never had such a smooth collaboration, shared vocabulary, and mutual understanding with our designer. Setting up tokens and being very systematic and constrained about the UI we build has never been easier.

Nabeel Ben@nabeel_ben

I have been using @panda__css for a few weeks now and I am loving it. It is so easy to use and the documentation is great. I am using it with @reactjs and @typescript and it is a great combo.

Love what you see?
Try Panda in 3 quick steps

1Install Panda in your project

$npm i -D @pandacss/dev

2Run the initialize command

$npm run panda init -p

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)

Start building with
Panda today

Get Started Learn Panda

Join our community

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

Join our Discord

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

panda

Styling library you’ll enjoy using 🐼

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.

Design token support

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

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.

Tons of others love building and shipping sites with Panda.

Love what you see? Try Panda in 3 quick steps

Works Everywhere. Including Server Components.

Join our community

Love what you see?
Try Panda in 3 quick steps

Works Everywhere.
Including Server Components.