Step 1 - Install & Setup Panda CSS

Panda CSS is the foundation to v1 and you will need to follow the setup instructions that compliment your team’s project:

PostCSS Plugin:
Next.JS:
Vite:
Svelte:

Let’s do a sanity check to make sure that Panda CSS works.

A good way to check is to use the css function from Panda CSS in your project.

import { css } from '../styled-system/css' // This path may differ depending on your project setup and where your `styled-system` directory generates

function TestPanda() {
  return (
    <div className={css({ backgroundColor: 'Chartreuse' })}>I am a test!</div>
  )
}