@pandacss/dev on NPM

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

Install

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

npm i -D @pandacss/dev

To scaffold the panda config and postcss

npx panda init -p

Setup and import the entry CSS file

@layer reset, base, tokens, recipes, utilities;

import 'path/to/entry.css'

Start the dev server of your project

npm run dev

Start using panda

import { css } from '../styled-system/css'
import { stack, vstack, hstack } from '../styled-system/patterns'

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}

Directory Structure

Package	Description
cli	CLI package installed by the end user
core	Contains core features of Panda (utility, recipes, etc)
config	Contains functions for reading and merging the panda config
extractor	Contains code for fast AST parsing and scanning
generator	Contains codegen artifacts (js, css, jsx)
parser	Contains code for parsing a source code
is-valid-prop	Contains code for checking if a prop is a valid css prop
node	Contains the Node.js API of Panda's features
token-dictionary	Contains code used to process tokens and semantic tokens
shared	Contains shared TS functions