Step 3 - Configure the Pando CSS

The final steps are to import the static css generated by Pando and include it in your project.

Import the Pando CSS

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

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

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;

Import the index.css file in your project

Make sure this css file is imported in your project’s entry point, such as main.tsx or App.tsx

...(root application imports)
 import './index.css';

ReactDOM.createRoot(...)

Next.js

If you are using Next.js, you can add the Pando CSS to your root layout.tsx file.

import type { Metadata } from 'next'
 import './index.css'

export const metadata: Metadata = {
  title: 'My Next App',
  description: 'An App using Next.js',
}

export default function RootLayout(...)

Use the Pando component library!

You should notice that your application’s background and font styles may have changed. Let’s try a simple component to see if Pando is working as expected. Try the following:

import { Button } from '@pluralsight/react'

function TestPando() {
  return <Button>I am a test!</Button>
}

This Button should render with the default styles: