panda Documentation

Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️

6,051 stars TypeScript TypeScript 1 file · ~4,374 tokens #atomic-css#compiler#css#css-in-js#design-system#design-tokens#engine#framework-agnostic
RAW Doc

File: README.md

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)

Documentation

Visit our official documentation.

Install

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

bash
npm i -D @pandacss/dev

To scaffold the panda config and postcss

bash
npx panda init -p

Setup and import the entry CSS file

css
@layer reset, base, tokens, recipes, utilities;
jsx
import 'path/to/entry.css'

Start the dev server of your project

bash
npm run dev

Start using panda

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

function Example() {
  return (
    
      Box 1
      Box 2
    
  )
}

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

Contributing

Feel like contributing? That's awesome! We have a
contributing guide to help guide you.

Want to help improve the docs?

Our docsite lives in the monorepo.

If you're interested in contributing to the documentation, check out the
contributing guide.

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.

License

MIT License © 2023-Present Segun Adebayo

File: packages/node/README.md

Folder structure

  • .panda
    • tokens (index.js, index.d.ts, index.css)
    • styled-system (index.js, index.d.ts)
    • package.json
js
const tokens = {
  'colors.red.400': { value: '...', variable: '...' },
}

const tokenMap = {
  colors: [{ group: 'red', key: 'red.400', value: '...' }],
  fonts: [],
}

function getToken(path) {
  const { value } = tokens[path] || {}
  return value
}

function getTokenVar(path) {
  const { variable } = tokens[path] || {}
  return variable
}
js
import { generateCssVar, generateDts, generateJs } from '@pandacss/generator'
import { createTokenMap } from '@pandacss/token-dictionary'

const conf = new Conf()

const dict = createTokenMap(config)

const cssVars = generateCssVar(dict, { root: ':root' })
const dts = generateDts(dict)
const files = generateJs(dict, { formats: ['esm', 'cjs'] })
json
{
  "name": "dot-panda",
  "description": "...",
  "exports": {
    "./tokens": {
      "import": "./generated/tokens/index.mjs"
    },
    "./css": {
      "import": "./generated/css/index.mjs"
    }
  },
  "typeVersions": {
    "*": {
      "tokens": ["./generated/tokens"],
      "css": ["./generated/css"]
    }
  }
}
js
import { definePackage, writePackage } from '@pandacss/generators'

const pkg = setupPackage({
  name: 'dot-panda',
  dir: 'generated',
  exports: ['tokens', 'css'],
})

writePackage(pkg)

updateTsConfig({
  compilerOptions: {
    paths: {
      'design-system': ['./.panda'],
    },
  },
})

updateGitIgnore({ comment: '# Panda', path: '.@pandacss/dev' })
ts
type ConditionType =
  | 'color-scheme'
  | 'resolution'
  | 'writing-mode'
  | 'pseudo'
  | 'selector'
  | 'viewport'
  | 'interaction-media'
  | 'reduced-motion'
  | 'reduced-data'
  | 'reduced-transparent'
  | 'contrast'

const conditions = {
  dark: {
    type: 'color-scheme',
    value: '[data-theme=dark]',
    colorScheme: 'dark',
  },
  darkDimmed: {
    type: 'color-scheme',
    value: '[data-theme=dark_dimmed]',
    colorScheme: 'dark',
  },
  ltr: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  rtl: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  hover: {
    type: 'pseudo',
    value: '&:hover',
  },
  focus: {
    type: 'pseudo',
    value: '&:focus',
  },
  sm: {
    type: 'viewport',
    value: '@media (min-width: 480px)',
  },
}
ts
const defaults = {
  className: ({ prop, value }) => `${prop}-${esc(value)}`,
}

const tt = defineConfig({
  utilities: [
    {
      properties: {
        display: {
          className: ({ value }) => `d-${value}`,
          transform(value) {
            return { display: value }
          },
          values: {
            fl: 'flex',
            ib: 'inline-block',
          },
        },
        background: {
          className: ({ prop, value }) => `bg-${value}`,
          values: ({ tokens }) => ({
            ...tokens.colors,
            inherit: 'inherit',
          }),
        },
        color: {
          className: ({ prop, value }) => `text-${value}`,
          values: (tokens) => ({ ...tokens.colors }),
        },
        fill: { values: 'colors' },
        lineClamp: {
          className: ({ prop, value }) => `clamp-${value}`,
          values: {
            '1': {
              '--line-clamp': '1',
            },
          },
        },
      },
      shorthands: {
        bg: 'background',
      },
    },

    {
      properties: {
        strokeWidth: {
          values: { '1': '1px', 2: '2px' },
        },
      },
    },

    {
      properties: {
        paddingLeft: { values: 'space', className: 'pl' },
        paddingRight: { values: 'space', className: 'pr' },
        paddingX: {
          className: 'px',
          values({ theme, map }) {
            return map(theme.space, (value) => ({
              paddingLeft: value,
              paddingRight: value,
            }))
          },
        },
      },
      shorthands: {
        pl: 'paddingLeft',
        px: 'paddingX',
      },
    },
  ],
})

File: packages/cli/README.md

Panda CLI

Panda is a CSS-in-JS tool with build time generated styles, RSC compatible, multi-variant
support, and best-in-class developer experience.

This package is the CLI - documentation can be found at https://panda-css.com/docs/installation/cli.

File: sandbox/svelte/README.md

create-svelte

Everything you need to build a Svelte project, powered by
create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a
development server:

bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

bash
npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target
environment.

File: sandbox/solid-ts/README.md

Usage

Those templates dependencies are maintained via pnpm via pnpm up -Lri.

This is the reason you see a pnpm-lock.yaml. That being said, any package manager will work. This file can be safely be removed once you clone a template.

bash
$ npm install # or pnpm install or yarn install

Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)

Available Scripts

In the project directory, you can run:

`npm dev` or `npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

`npm run build`

Builds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Deployment

You can deploy the dist folder to any static host provider (netlify, surge, now, etc.)

File: sandbox/remix/README.md

Welcome to Remix!

Development

From your terminal:

sh
npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

sh
npm run build

Then run the app in production mode:

sh
npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

  • build/
  • public/build/

File: sandbox/qwik-ts/README.md

Qwik City App ⚡️

Project Structure

This project is using Qwik with QwikCity. QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.

Inside your project, you'll see the following directory structure:

text
├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── routes/
        └── ...

  • src/routes: Provides the directory based routing, which can include a hierarchy of layout.tsx layout files, and an index.tsx file as the page. Additionally, index.ts files are endpoints. Please see the routing docs for more info.

  • src/components: Recommended directory for components.

  • public: Any static assets, like images, can be placed in the public directory. Please see the Vite public directory for more info.

Add Integrations and deployment

Use the pnpm qwik add command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the Static Site Generator (SSG).

shell
pnpm qwik add # or `yarn qwik add`

Development

Development mode uses Vite's development server. During development, the dev command will server-side render (SSR) the output.

shell
npm start # or `yarn start`

Note: during dev mode, Vite may request a significant number of .js files. This does not represent a Qwik production build.

Preview

The preview command will create a production build of the client modules, a production build of src/entry.preview.tsx, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.

shell
pnpm preview # or `yarn preview`

Production

The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.

shell
pnpm build # or `yarn build`

File: sandbox/nuxt/README.md

Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

bash
npm run dev

Production

Build the application for production:

bash
npm run build

Locally preview production build:

bash
npm run preview

Check out the deployment documentation for more information.

File: sandbox/next-js-pages/README.md

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

bash
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

File: sandbox/next-js-app/README.md

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

bash
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#atomic-css Browse atomic-css catalog → #compiler Browse compiler catalog → #css Browse css catalog → #css-in-js Browse css-in-js catalog → #design-system Browse design-system catalog → #design-tokens Browse design-tokens catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →