# Get started with Panda

The universal design system solution for the web

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](/docs/installation/cli): The simplest way to use Panda is with the Panda CLI tool.

- [Using PostCSS](/docs/installation/postcss): (**Recommended**) 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.

<FrameworkCards />

## Next Steps

Get familiar with the core features and concepts in Panda.

<Cards>
  <Card
    arrow
    title="Tokens"
    description="Learn how setup and customize design tokens to customize your colors, typography, and more"
    href="/docs/theming/tokens"
  />
  <Card
    arrow
    title="Recipes"
    description="Create composable style variants that are typed and generates the atomic or layer recipe"
    href="/docs/concepts/recipes"
  />
  <Card
    arrow
    title="Patterns"
    description="Use the built-in layout patterns like stack, flex, grid to speed up your development"
    href="/docs/concepts/patterns"
  />
  <Card
    arrow
    title="Utilities"
    description="Learn how to create your own custom css properties and speed up your development"
    href="/docs/customization/utilities"
  />
</Cards>

## Playground

You can use the [online playground](https://play.panda-css.com) 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](https://chakra-ui.com/) - where it all started
- [Vanilla Extract](https://vanilla-extract.style/) - for inspiring the utilities API
- [Stitches](https://stitches.dev/) - for inspiring the recipes and variants API
- [Tailwind CSS](https://tailwindcss.com/) - for inspiring the JIT compiler and strategy
- [Class Variance Authority](https://cva.style/) - for inspiring the `cva` name
- [Styled System](https://styled-system.com/) - for the initial idea of Styled Props
- [Linaria](https://linaria.dev/) - for inspiring the initial atomic css strategy
- [Uno CSS](https://unocss.dev) - for inspiring the studio and astro integration

---

_This content is automatically generated from the official Panda CSS documentation._