Getting Started

This guide will help you set up Pallas UI in your React project.

Refer to Panda CSS docs for more information on how to install and configure Panda CSS.

Installation

Install Pallas UI preset

Install Pallas UI preset using your package manager of choice:

npm install @pallas-ui/panda

Install Pallas UI styled-system utils

Install Pallas UI styled-system utils using your package manager of choice:

npm install @pallas-ui/styled-system

Configuration

Add preset to panda config

Adding your preset to panda config panda.config.ts:

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // Required: Add the preset to your config.
  presets: ['@pallas-ui/panda'],
 
  // 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: 'styled-system',
 
  // Other configurations and overrides...
})

Copy components from docs

Copy components from docs to your project:

cp -r node_modules/@pallas-ui/docs/src/components ./components

Setup Paths in TSConfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["app/components/*"]
    }
  }
}