Step 2 - Install Pando

Install Pando Deps (@next version)

 pnpm add @pluralsight/{panda-preset,react}@next

 yarn add @pluralsight/{panda-preset,react}@next

 npm install @pluralsight/{panda-preset,react}@next

 bun install @pluralsight/{panda-preset,react}@next

Add the PS Font

In order to use the PS Commons font, you will need to preload it in your index.html file:

<link
  rel="preload"
  href="https://fonts.pluralsight.com/ps-tt-commons/v1/ps-tt-commons-variable-roman.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Extend the Panda config

Now, it’s time to add Pando by extending the config. Update your panda.config.ts file to look like this:

import { defineConfig } from '@pandacss/dev'
import pandaPreset from '@pandacss/preset-panda'
import pandoPreset, { pandoConfig } from '@pluralsight/panda-preset'

export default defineConfig({
  ...pandoConfig,

  include: ['./app/**/*.{ts,tsx,js,jsx}'], // <-- Make sure this matches your project structure
  exclude: [],

  presets: [pandaPreset, pandoPreset],
})

Update PostCSS

If you are using a build that doesn’t come with PostCSS built in - update your config to use the following plugins:

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

If you do not have the plugins - install them to your devDeps:

 pnpm add -D autoprefixer postcss-{preset-env,flexbugs-fixes}

 yarn add -D autoprefixer postcss-{preset-env,flexbugs-fixes}

 npm install autoprefixer postcss-{preset-env,flexbugs-fixes} --save-dev

 bun install -D autoprefixer postcss-{preset-env,flexbugs-fixes}

Generate the styles

Now that we have Pando extending Panda - we need to update the styles:

 pnpm prepare

 yarn prepare

 npm prepare

 bun prepare

Or, you could add a script to your package.json for a better interface:

"generate:styles": "panda codegen --config ./panda.config.ts"

While you’re adding scripts to your package.json you can also add a script for future Pando updates to your style library.

"pando:up": "pnpm up @pluralsight/{panda-preset,react}@next"

Let’s try out Pando’s React button and button recipe to make sure everything is working!

import { Button } from '@pluralsight/react'
import { button } from '../styled-system/recipes'

function TestButton() {
  return (
    <>
      <Button size="md" usage="text" palette="danger">
        I am Pando's React Button component!
      </Button>

      <button className={button({size:"md", usage:"text" palette:"danger"})}>
        I am Pando's button recipe!
      </button>
    </>
  )
}