Using the Fidely UI Panda Preset Only

A guide to using the Fidely UI Panda preset without React components

Get started quickly

The easiest way to get started is to use our Vite starter.

Note the command below uses Fidely UI v1 would update once v2 stable

npx degit https://github.com/fidely-ui/panda-preset-starter

Manual Installation

If you prefer setting things up yourself, follow the steps below.

1. install Panda CSS

npm install -D @pandacss/dev
npx panda init --postcss

2. Install the preset

npm install @fidely-ui/panda-preset

This preset contains design tokens, recipes, and utilities. No React components are included. You can use your own components or another UI library while still leveraging the preset.

3. Update package.json scripts

Open your package.json file and add the prepare script:

{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

4. Update tsconfig.app.json

Update your compilerOptions to include the following:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,

    "paths": {
      "@/*": ["./src/*"],
      "@styled-system/*": ["./styled-system/*"]
    }
  }
}

4.5 Configure Vite path aliases

Vite does not automatically read tsconfig.json path aliases. You must manually configure them in vite.config.ts so Panda’s styled-system imports resolve correctly.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@styled-system': path.resolve(__dirname, './styled-system'),
    },
  },
})

5. Configure Panda CSS

Update panda.config.ts

import { defineConfig } from '@pandacss/dev'
import { fidelyPreset } from '@fidely-ui/panda-preset'

export default defineConfig({
  presets: [fidelyPreset()],

  // Enable CSS reset
  preflight: true,

  // Files Panda should scan for styles
  include: ['./src/**/*.{js,jsx,ts,tsx}'],

  exclude: [],

  // Theme customization
  theme: {
    extend: {},
  },

  // Generate static CSS for all recipes
  staticCss: {
    recipes: '*',
  },

  // Output directory for generated styles
  outdir: 'styled-system',

  jsxFramework: 'react',

  // Remove Panda default 50 / 950 color steps
  plugins: [
    {
      name: 'panda-headless-colors',
      hooks: {
        'preset:resolved': ({ utils, preset, name }) => {
          if (name === '@pandacss/preset-panda') {
            return utils.omit(preset, [
              'theme.tokens.colors',
              'theme.semanticTokens.colors',
            ])
          }
          return preset
        },
      },
    },
  ],
})

After updating the config, generate the styled system:

npx panda codegen

This will create the styled-system folder with:

Design tokens (colors, spacing, fonts, etc.)
CSS recipes (buttons, inputs, cards, etc.) and more.

6. Configure the entry CSS with layers

Open src/App.css and replace its contents with:

@layer reset, base, tokens, recipes, utilities;

You can safely remove unused CSS files if present and delete index.css.

7. Import global CSS in the app entry

Update src/main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import './App.css'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

Use your own components

You can now consume the preset styles in your own components.

import { styled } from '@styled-system/jsx'

const MyButton = styled('button', {
  base: {
    bg: 'orange.9',
    color: 'white',
    px: '4',
    py: '2',
    borderRadius: 'md',
    _hover: { bg: 'orange.11' },
  },
})

export function Demo() {
  return <MyButton>Click me</MyButton>
}

Using recipes directly

import { button } from '@styled-system/recipes'

export function Demo() {
  return <button className={button({ size: 'lg' })}>Click me</button>
}

Notes

All recipes provided by the preset are available in styled-system after codegen.
You can extend the theme under theme.extend in panda.config.ts.
No Fidely UI components are included and the preset is purely tokens + recipes + utilities.