Getting Started with Panda CSS

Panda CSS is a zero runtime CSS-in-JS library powered by Chakra.

What "zero runtime" means is that Panda CSS statically analyze codes during preprocessing phase and then generates CSS which is not JavaScript. It's better in terms of performance and bundle size.

For more details, see the official documentation.

Installation

This post won't touch how to install the library since the official doc is the best doc for that.

https://panda-css.com/docs/installation/vite

Usage like other CSS-in-JS libraries

Panda CSS is a CSS-in-JS library, so you can use it like other CSS-in-JS libraries.

import { css } from '../styled-system/css';

export const RedText = ({ children }: { children: React.ReactNode }) => {
  return (
    <div
      className={css({
        fontSize: 'xl',
        color: 'red.500',
      })}
    >
      {children}
    </div>
  );
};

Af first, import css function from generated styled-system directory that should be there after successful installation, though its name might be different as configuration panda.config.ts. As the snippet shows, you can use css function to give styles to your React component like other CSS-in-JS libraries.

Usage like Chakra UI

Panda CSS is providing not only css functionality to define CSS classes for static analysis, but also pre-defined and well-designed components as Chakra UI does.

The below snippets shows how to use pre-defined JSX components.

import { Box, HStack, VStack } from '../styled-system/jsx';

const App = () => {
  return (
    <Box>
      <HStack>
        <VStack>
          <Box>1</Box>
          <Box>2</Box>
        </VStack>
        <VStack>
          <Box>3</Box>
          <Box>4</Box>
        </VStack>
      </HStack>
    </Box>
  );
};

It's basically looking like Chakra UI, though some components Chakra UI provides like Text, Input, etc., are not supported in Panda CSS.

Create Designed Components

To create own designed components, you can use Atomic Recipes.

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

export const StyledButton = styled('button', cva({
  base: {
    paddingX: '24px',
    paddingY: '8px',
    fontSize: '16px',
    color: 'white',
    borderRadius: '8px',
  },
  variants: {
    variant: {
      selectable: {
        bg: {
          base: 'white',
          _hover: 'gray.50',
          _active: 'gray.100',
        },
        cursor: 'pointer',
      },
      notSelectable: {
        bg: {
          base: 'gray.500',
          _hover: 'gray.600',
          _active: 'gray.700',
        },
        cursor: 'default',
      },
      cancelable: {
        bg: {
          base: 'red.500',
          _hover: 'red.600',
          _active: 'red.700',
        },
        cursor: 'pointer',
      },
    },
  },
}));

This snippets defines StyledButton component which accepts variant prop to switch how it looks as below.

<StyledButton variant={'selectable'} />

Wrap Up

Panda CSS can be used like other CSS-in-JS libraries as well as Chakra UI so that it's not difficult to migrate from those existing libraries with having PandaCSS's strong capabilities including static analysis, zero runtime, and so on.

In addition, Ark UI is also under development which is a component library based on Panda CSS. If you're wondering which library to use, please check the below post.

Chakra, Panda and Ark - What's the plan?