Panda CSS

App.tsx

import { Flex, styled } from '../styled-system/jsx'

const App = () => {
  const name = 'Panda CSS'

  return (
    <Flex direction="column" gap="8px" width="300px">
    <Flex direction="column" gap="8px" width="300px" css={{
      backgroundColor: 'brown',
      '&:hover': {
        backgroundColor: 'red',
      },
      _disabled: {
        bg: 'gray'
      },
      _notDisabled: {
        border: '1px solid red'
      }
    }}>
      <Button _active={{ backgroundColor: 'green' }}>Hello {name} 🐼</Button>
      <Button>Goodbye {name} 🐼</Button>
      <styled.span color="scary" _hover={{ color: 'uiGreen'}}>Scary</styled.span>
      <styled.span color="good" borderZ="2px">Good</styled.span>
    </Flex>

    <styled.div width="100px" height="100px" backgroundColor="red" tablet={{ backgroundColor: 'orange' }} mobile={{ backgroundColor: 'green' }}></styled.div>
    <styled.div width="100px" height="100px" backgroundColor="red" tabletOnly={{ backgroundColor: 'orange' }} mobileOnly={{ backgroundColor: 'green' }}></styled.div>
    <styled.div width="100px" height="100px" backgroundColor="red" desktopDown={{ backgroundColor: 'orange' }} tabletDown={{ backgroundColor: 'green' }}></styled.div>
    </Flex>
  )
}

export default App

const Button = styled('button', {
  base: {
    desktop: {fontWeight: 'bold'},
    tablet: {fontWeight: 'normal'},
    fontWeight: 'lighter',
    paddingBlock: '8px',
    paddingInline: '16px',
    rounded: '16px',
    backgroundColor: 'blue',
    color: 'red.400',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: 'lightblue',
    },
  },
})

index.css

@layer flat_ui_reset, flat_ui_base, flat_ui_tokens, flat_ui_recipes, flat_ui_utilities;

package.json

{
  "name": "test-panda",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && npm run format:prettier",
    "preview": "vite preview",
    "lint": "eslint .",
    "format:prettier": "prettier \"dist/**/*.{json,css,scss,js,ts,jsx,tsx,[cm][jt]s}\" --write",
    "codegen": "panda codegen --clean",
    "prepare": "panda codegen"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.36.0",
    "@pandacss/dev": "^1.4.1",
    "@types/node": "^24.6.0",
    "@types/react": "^19.1.16",
    "@types/react-dom": "^19.1.9",
    "@vitejs/plugin-react": "^5.0.4",
    "eslint": "^9.36.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
    "prettier": "^3.6.2",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.45.0",
    "vite": "^7.1.7"
  }
}

panda.config.ts

import { defineConfig } from '@pandacss/dev'
import postcss from 'postcss'
import pandaBasePreset from '@pandacss/preset-base'

const { conditions, utilities, patterns } = pandaBasePreset

export default defineConfig({
  /* Output options */
  // presets: ['@pandacss/preset-base'], // @default ['@pandacss/preset-base', '@pandacss/preset-panda'] - deleting the '@pandacss/preset-panda' also remove size tokens, but later we add own tokens
  eject: true, // fully delete default presets
  preflight: false, // @default false
  emitTokensOnly: false, // @default false
  prefix: 'flat-ui', // @default '',
  layers: {
    utilities: 'flat_ui_utilities',
    base: 'flat_ui_base',
    tokens: 'flat_ui_tokens',
    recipes: 'flat_ui_recipes',
    reset: 'flat_ui_reset',
  },
  /* Filesystem options */
  clean: false, // @default false
  outdir: 'styled-system', // The output directory for your css system
  include: ['./src/**/*.{js,jsx,ts,tsx}'], // Where to look for your css declarations
  exclude: [],
  outExtension: 'js', // The extension for the emitted JavaScript files
  syntax: 'object-literal',
  /* Design token options */
  cssVarRoot: ':root',
  conditions: {
    ...conditions,
    disabled: '&:disabled',
    notDisabled: '&:not(:disabled)',
  },
  globalCss: {
    'html, body': { margin: 0, padding: 0 },
  },
  theme: {
    tokens: {
      colors: {
        uiRed: { value: '#EE0F0F' },
        uiGreen: { value: '#0FEE0F' },
      },
    },
    semanticTokens: {
      colors: {
        scary: { value: '{colors.uiRed}' },
        good: { value: '{colors.uiGreen}' },
      },
    },
    breakpoints: {
      mobile: '0px',
      tablet: '768px',
      desktop: '1280px',
    },
  },
  utilities: {
    ...utilities,
    borderZ: {
      values: ['1px', '2px', '4px'],
      shorthand: 'bz', // `bz` or `borderZ` can be used
      transform(value, { token }) {
        return {
          borderInlineWidth: value,
          borderBlockWidth: value,
          borderStyle: 'solid',
          borderColor: token('colors.good'), // read the css variable for red.200
          borderBottomColor: 'darkgreen',
        }
      },
    },
  },
  patterns: {
    ...patterns,
  },
  /* JSX options */
  jsxFramework: 'react',
  /* Other options */
  hooks: {
    'cssgen:done': ({ artifact, content }) => {
      if (artifact === 'styles.css') return removeUtilitiesLayer(content)
      return content
    },
  },
})

// https://github.com/chakra-ui/panda/discussions/1728#discussioncomment-12487974
const removeUtilitiesLayer = (css: string) => {
  const root = postcss.parse(css)

  root.walkAtRules('layer', atRule => {
    if (atRule.params === 'flat_ui_utilities') {
      const parent = atRule.parent

      const nodes = atRule.nodes
      if (nodes && parent) {
        for (const node of nodes) {
          parent.insertBefore(atRule, node.clone())
        }
      }

      atRule.remove()
    }
  })

  return root.toString()
}

postcss.config.cjs

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
  },
}

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src", "styled-system"]
}

vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    minify: false,
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js', // For entry point files
        chunkFileNames: 'assets/[name].js', // For code-split chunks
        assetFileNames: 'assets/[name].[ext]', // For other assets like images, fonts, etc.
      },
    },
  }
})