Overview
Getting Started
Getting Started
Guide to get started with Shadow Panda
Installation
ℹ️
Before installing this package, make sure you have installed Panda CSS in your project.
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!