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.
TLDR; Panda is a CSS-in-JS engine that generates atomic CSS at build time (via CLI or PostCSS)
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.
Get familiar with the core features and concepts in Panda.
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
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
- 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