Skip to content
Pando Docs

Migrate from Pando v0.7.1, 0.4.1, and earlier

What has changed?

You will still install and import @pluralsight/react for use in v1, but other dependencies such as @pluralsight/headless-styles will be removed.

Additionally, some of the components that were available in v0 are not yet available in v1. This will be a short term state, and the unavailable components will be released in upcoming minor releases.

  • To see the current list of components available in v1, check the list of components that are .

  • To see the components that are not yet available in v1, but will be released in upcoming minor releases, check the list of components that are .

  • If there is a specific component you need that is not available in either of the above, please reach out to the Pando team on the #ask-pando slack channel

Migration steps

Configure your project

1. Confirm your fonts

Check that you have this in your <head /> tag in your index.html file (this should already be there from your usage of v0):

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

2. Include theme and mode attributes

Modify your <html /> tag to include the data-theme and data-color-mode attributes:

<html lang="en" data-theme="inkyBlue" data-color-mode="dark" />

Installs and imports

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;

Patterns to modify

1. Change theme attributes

You will need to update theme attributes to use the new @pluralsight/react package. The attribute sentiment will now be palette.

<Button sentiment="danger" onClick={handleCancel}>Cancel</Button>
<Button palette="danger" onClick={handleCancel}>Cancel</Button>

2. Replace Icons

While the package @pluralsight/icons still exists, it is now also exported through v1 of @pluralsight/react. You can import icons directly from @pluralsight/react/icons:

import { PlaceholderIcon } from '@pluralsight/icons'
import { PlaceholderIcon } from '@pluralsight/react/icons'

Uninstall old dependencies

1. Uninstall @pluralsight/headless-styles

Terminal window
 pnpm uninstall @pluralsight/headless-styles

2. Uninstall @pluralsight/icons

Terminal window
 pnpm uninstall @pluralsight/icons

Use Pando!

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