mingyu-song / panda Goto Github PK

Panda is a universal styling solution for the modern web —
build time, type safe, and scalable CSS-in-JS

• ⚡️ 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

Visit our official documentation.

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>
  )
}

Having trouble? Get help in the official Panda Discord.

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 the cva 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

MIT License © 2023-Present Segun Adebayo