# Welcome to 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)

## Why Panda

- **Static analysis:** Panda parses your styles at build time and generates plain CSS files that work in any
  JavaScript framework.
- **Type safety:** Panda combines `csstype` with auto-generated typings, so CSS properties and design tokens are
  type-checked as you write them.
- **Performance:** styles compile down to atomic CSS ahead of time, so there's no runtime style engine shipped to the
  browser.
- **Developer experience:** recipes, patterns, design tokens, and JSX style props give you a consistent way to author
  styles without hand-rolling your own system.
- **Modern CSS:** generated styles use cascade layers, CSS variables, and modern selectors like `:where` and `:is`.

Here's what using Panda looks like in practice:

```jsx
import { css } from '../styled-system/css'
import { circle, stack } from '../styled-system/patterns'

function App() {
  return (
    <div
      className={stack({
        direction: 'row',
        p: '4',
        rounded: 'md',
        shadow: 'lg',
        bg: 'white'
      })}
    >
      <div className={circle({ size: '5rem', overflow: 'hidden' })}>
        <img src="https://via.placeholder.com/150" alt="avatar" />
      </div>
      <div className={css({ mt: '4', fontSize: 'xl', fontWeight: 'semibold' })}>John Doe</div>
      <div className={css({ mt: '2', fontSize: 'sm', color: 'gray.600' })}>john@doe.com</div>
    </div>
  )
}
```


## Installation

Panda can be installed as a CLI tool, a PostCSS plugin, through a framework-specific guide, or inside Storybook.

<Card arrow title="Installation" description="Pick the setup that matches your project" href="/docs/styling/installation" />

## 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/styling/recipes"
  />
  <Card
    arrow
    title="Patterns"
    description="Use the built-in layout patterns like stack, flex, grid to speed up your development"
    href="/docs/styling/patterns"
  />
  <Card
    arrow
    title="Utilities"
    description="Learn how to create your own custom css properties and speed up your development"
    href="/docs/design-systems/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._