Frameworks

Using Qwik

Easily use Panda with Qwik with our dedicated integration.

Learn how to set up Panda CSS in a Qwik project using the @pandacss/vite plugin.

Prefer PostCSS? Run panda init --postcss instead of the plugin step below and follow Using PostCSS. Everything else on this page stays the same.

Start a new project

Create Qwik project

To get started, we will need to create a new Qwik project using typescript template.

npm create qwik@latest

pnpm create qwik@latest

yarn create qwik

bun create qwik@latest

Install Panda

Install panda, the Vite plugin, and create your panda.config.ts file.

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

pnpm install -D @pandacss/dev @pandacss/vite
pnpm panda init

yarn add -D @pandacss/dev @pandacss/vite
yarn panda init

bun add -D @pandacss/dev @pandacss/vite
bun panda init

Add the Vite plugin

Add pandacss() to your Vite plugins. It generates the styled-system folder, injects the CSS, and keeps both up to date on save. No separate watcher needed.

vite.config.ts

import { defineConfig } from 'vite'
import pandacss from '@pandacss/vite'
import { qwikVite } from '@builder.io/qwik/optimizer'
import { qwikCity } from '@builder.io/qwik-city/vite'
import tsconfigPaths from 'vite-tsconfig-paths'
 
export default defineConfig({
  plugins: [pandacss(), qwikCity(), qwikVite(), tsconfigPaths()]
})

Update package.json scripts

Open your package.json file and update the scripts section as follows:

package.json

{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "vite --mode ssr",
    "build": "qwik build",
    "preview": "qwik build preview && vite preview --open"
  }
}

The plugin only runs with Vite. The "prepare" script covers type checking and your editor, which read styled-system before Vite starts, and lets the folder stay gitignored.

Configure the content

Set jsxFramework: 'qwik' and make sure your component paths are in include:

panda.config.ts

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  jsxFramework: 'qwik',
  outdir: 'styled-system'
})

Configure CSS layers

Declare the layer order at the top of src/global.css, which Qwik already imports in src/root.tsx:

src/global.css

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

This file only sets the layer order. The plugin injects the generated CSS for you.

Start your build process

Run the following command to start your development server.

npm run dev

pnpm dev

yarn dev

bun dev

Start using Panda

Now you can start using Panda CSS in your project.

src/routes/layout.tsx

import { component$, Slot } from '@builder.io/qwik'
import { routeLoader$ } from '@builder.io/qwik-city'
import { css } from 'styled-system/css'
 
export const useServerTimeLoader = routeLoader$(() => {
  return {
    date: new Date().toISOString()
  }
})
 
export default component$(() => {
  return (
    <div class={css({ p: '10', bg: 'gray.900', h: 'dvh' })}>
      <Slot />
    </div>
  )
})

Optional: drop the styling runtime

By default css() resolves class strings in the browser with a small runtime. Turn on source transforms and the plugin rewrites static calls to plain class strings at build time, so the runtime never ships:

vite.config.ts

plugins: [pandacss({ transform: true }), qwikCity(), qwikVite(), tsconfigPaths()]

Dynamic values keep their runtime form. See Source transforms.

Troubleshooting

If you're not getting import autocomplete in your IDE, you may need to include the styled-system directory in your tsconfig.json file:

tsconfig.json

{
  // ...
  "include": ["src", "styled-system"]
}

Edit this page on GitHub View as markdown

Last updated on September 3, 2026