Skip to content
Pando Docs

Migrate from Pando v0.7.1@next[...]

What has changed?

The differences between v0.7.1@next[...] and v1 are the dependencies that each requires. v0.7.1@next[...] requires users to adopt their own implementation of and make use of the package @pluralsight/panda-preset. v1 provides a static css resource to help new projects adopt Pando. v1 still uses Panda CSS and the @pluralsight/panda-preset package internally, but does not require Pando users to install and use it.

This means if your team is accustomed to and enjoys working with Panda CSS and @pluralsight/panda-preset, you won’t need to make any changes. v1 is backward compatible with v0.7.1@next[...].

However, if your team is looking to remove Panda CSS from your project, v1 no longer requires it.

Dynamic Components

Panda CSS generates css on build. This means that in the past, Pando components have not been able to accept dynamic values, so the following would not work:

import { useState } from 'react'
import { Button, ButtonPalette } from '@pluralsight/react'


const [palette, changePalette] = useState<ButtonPalette>('action')


return (
  <Button palette={palette} onClick={() => changePalette('danger')}>
    click me to change
  </Button>
)

This is now possible because Pando v1 styles are statically available and imported.

Migration steps (keeping Panda CSS)

1. Install v1

Terminal window
 pnpm install @pluralsight/react@latest

2. Import the Pando CSS

Import the static Pando CSS at the top of your index.css file

@import url('@pluralsight/react/styles.css');

3. Define layers in your root css file

Define css layers below the import of the Pando CSS in your index.css file. 

@layer reset, base, tokens, recipes, utilities;

4. Use Pando!

You’re all set! You are migrated to Pando v1.

Migration steps (removing Panda CSS)

This process will be more involved and may require your team to decide on an alternative presentation strategy, whether that is a css-in-jsx solution, scss, or vanilla css.

1. Install v1

Terminal window
 pnpm install @pluralsight/react@latest

2. Import the Pando CSS

Import the static Pando CSS at the top of your index.css file

@import url('@pluralsight/react/styles.css');

3. Define layers in your root css file

Define css layers below the import of the Pando CSS in your index.css file. 

@layer reset, base, tokens, recipes, utilities;

4. Uninstall @pluralsight/panda-preset

Terminal window
 pnpm uninstall @pluralsight/panda-preset

5. Remove styled-system

  • Do a global search of your application and remove any imports from @/styled-system/..., as this is generated by Panda CSS

  • Remove your styled-system directory from your project root

  • Review any build scripts that reference styled-system upon project deployment

6. Uninstall Panda CSS

Terminal window
 pnpm uninstall @pandacss/dev

You can also remove the panda.config.ts file and any Panda CSS scripts in your package.json, like

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

7. Use Pando!

The Pando components already in your project should still render as expected. Make sure to thoroughly review your application UI to ensure any custom styling from your previous Panda CSS implementation is appropriately migrated.