Shadow Panda
Shadow Panda
Overview
Getting Started

Getting Started

Guide to get started with Shadow Panda

Installation

Step 1

Install the preset, and the style context utility package used by most components

npm i -D @shadow-panda/preset
npm i @shadow-panda/style-context

Step 2

Add the preset to your panda.config.ts

panda.config.ts
import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // Required: Add the preset to your config.
  presets: ['@shadow-panda/preset'],
 
  // Optional: Enable CSS reset
  preflight: true,
 
  // Use React
  jsxFramework: 'react',
 
  // Optional: Emit artifacts to `node_modules` as a package.
  // The copy-paste component examples use `@shadow-panda/styled-system` as the import path of the generated files.
  // If you choose not to use this option, you should rewrite your component imports as needed.
  // @see https://panda-css.com/docs/references/config#emitpackage
  emitPackage: true,
  outdir: '@shadow-panda/styled-system',
 
  // Other configurations and overrides...
})

Step 3

Compile Panda CSS, copy components and use it!

IntroductionFigma