Panda is a universal styling solution for the modern web — build time, type safe, and scalable CSS-in-JS
@layer
, css variables and moreVisit 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>
)
}
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 |
Feel like contributing? That's awesome! We have a contributing guide to help guide you.
Our docsite lives in the monorepo.
If you're interested in contributing to the documentation, check out the contributing guide.
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.
cva
nameMIT License © 2023-Present Segun Adebayo
Source: https://github.com
#css #pandacss