Overview

Get started with Panda

Panda is a styling engine that generates styling primitives to author atomic CSS and recipes in a type-safe and readable manner.

Panda combines the developer experience of CSS-in-JS and the performance of atomic CSS. It leverages static analysis to scan your JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand (aka Just-in-Time)

💡

TLDR; Panda is a CSS-in-JS engine that generates atomic CSS at build time (via CLI or PostCSS)

Installation

General Guides

  • Panda CLI: The simplest and fastest way to use Panda is with the Panda CLI tool.

  • Using PostCSS: Installing Panda as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

Framework Guides

Starting using Panda CSS in your framework JavaScript framework using our framework-specific guides that cover our recommended approach.

Next Steps

Get familiar with the core features and concepts in Panda.

Tokens→
Learn how setup and customize design tokens to customize your colors, typography, and more
Recipes→
Create composable style variants that are typed and generates the atomic or layer recipe
Patterns→
Use the built-in layout patterns like stack, flex, grid to speed up your development
Utilities→
Learn how to create your own custom css properties and speed up your development

Playground

You can use the online playground (opens in a new tab) to get a taste of what Panda can do.

  • See the live results of your JSX code
  • Inspect what panda can extract using static analysis from your code
  • Preview the statically generated .css files

Acknowledgement

The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

Why Panda?