Panda

Universal, Type-Safe, CSS-in-JS Framework for Product Teams

CSS in JSAtomic CSSReactAstroNext.js
chakra-ui/pandapanda-css.com@pandacss/dev

README

Panda


Panda is a universal styling solution for the modern web —

build time, type safe, and scalable CSS-in-JS

Features


- ⚡️ Write style objects or style props, extract them at build time
- ✨ Modern CSS output — cascade layers @layer, css variables and more
- 🦄 Works with most JavaScript frameworks
- 🚀 Recipes and Variants - Just like Stitches™️ ✨
- 🎨 High-level design tokens support for simultaneous themes
- 💪 Type-safe styles and autocomplete (via codegen)




🐼 Get a taste of Panda. Try it out for yourself in 
StackBlitz





Documentation


Visit our official documentation.

Install


The recommended way to install the latest version of Panda is by running the command below:

  1. ```bash
  2. npm i -D @pandacss/dev
  3. ```

To scaffold the panda config and postcss

  1. ```bash
  2. npx panda init -p
  3. ```

Setup and import the entry CSS file

  1. ```css
  2. @layer reset, base, tokens, recipes, utilities;
  3. ```

  1. ```jsx
  2. import 'path/to/entry.css'
  3. ```

Start the dev server of your project

  1. ```bash
  2. npm run dev
  3. ```

Start using panda

  1. ```jsx
  2. import { css } from '../styled-system/css'
  3. import { stack, vstack, hstack } from '../styled-system/patterns'

  5. function Example() {
  6.   return (
  7.     <div>
  8.       <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
  9.       <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
  10.     </div>
  11.   )
  12. }
  13. ```

Directory Structure


PackageDescription
--------------------------------------------------------------------------------------------------------
[cli](packages/cli)CLI
[core](packages/core)Contains
[config](packages/config)Contains
[extractor](packages/extractor)Contains
[generator](packages/generator)Contains
[parser](packages/parser)Contains
[is-valid-prop](packages/is-valid-prop)Contains
[node](packages/node)Contains
[token-dictionary](packages/token-dictionary)Contains
[shared](packages/shared)Contains

Support


Having trouble? Get help in the official Panda Discord.

Acknowledgement


The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

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

License


MIT License © 2023-Present Segun Adebayo