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 way to use Panda is with the Panda CLI tool.

  • Using PostCSS: Installing Panda as a PostCSS plugin is the recommended way to integrate it with your project.

Framework Guides

Starting using Panda CSS in your 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?