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" })}>
        [email protected]
      </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">
        [email protected]
      </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

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

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 🐼

The official Panda CSS course

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.