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

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

Next.js

Gatsby

Solid

Vite

Preact

Svelte

Astro

Remix

Qwik

Redwood

Vue

Storybook

Ember

Next Steps

Get familiar with the core features and concepts in Panda.

Learn how setup and customize design tokens to customize your colors, typography, and more

Create composable style variants that are typed and generates the atomic or layer recipe

Use the built-in layout patterns like stack, flex, grid to speed up your development

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.

Chakra UI (opens in a new tab) - where it all started
Vanilla Extract (opens in a new tab) - for inspiring the utilities API
Stitches (opens in a new tab) - for inspiring the recipes and variants API
Tailwind CSS (opens in a new tab) - for inspiring the JIT compiler and strategy
Class Variance Authority (opens in a new tab) - for inspiring the cva name
Styled System (opens in a new tab) - for the initial idea of Styled Props
Linaria (opens in a new tab) - for inspiring the initial atomic css strategy
Uno CSS (opens in a new tab) - for inspiring the studio and astro integration