Frameworks

Using Remix

How to use Panda with Remix with our dedicated integration.

This guide will show you how to set up Panda CSS in a Remix 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 Remix project

To get started, we will need to create a new Remix project using the official Create Remix (opens in a new tab) CLI. In this guide, we will use TypeScript.

If you don't enter any parameter, the CLI will guide you through the process of creating a new Remix app.

pnpm dlx create-remix@latest

npx create-remix@latest

yarn dlx create-remix@latest

bunx create-remix@latest

You will be asked a few questions, answer these as follows:

? Where should we create your new project? test-app
? Install dependencies? No

💡

Note: You should decline the dependency installation step as we will install dependencies together with Panda CSS.

Install Panda

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

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

npm install -D @pandacss/dev @pandacss/vite
npx 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 { vitePlugin as remix } from '@remix-run/dev'
import tsconfigPaths from 'vite-tsconfig-paths'
 
export default defineConfig({
  plugins: [pandacss(), remix(), tsconfigPaths()]
})

Update package.json scripts

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

package.json

{
  "scripts": {
+    "prepare": "panda codegen",
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  }
}

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

Make sure that all of the paths of your Remix components are included in the include section of the panda.config.ts file.

panda.config.ts

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // Whether to use css reset
  preflight: true,
 
  // Where to look for your css declarations
  include: ['./app/routes/**/*.{ts,tsx,js,jsx}', './app/components/**/*.{ts,tsx,js,jsx}'],
 
  // Files to exclude
  exclude: [],
 
  // The output directory for your css system
  outdir: 'styled-system'
})

Configure CSS layers

Create a new file app/index.css and add the following content:

app/index.css

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

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

Import the index.css file in your app/root.tsx file and add the styles variable to the links function.

Please note the ?url query parameter in the import statement. This is required by Vite to generate the correct path to the CSS file.

app/root.tsx

import type { LinksFunction } from '@remix-run/node'
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 
import styles from './index.css?url'
 
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
 
export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

Start your build process

Run the following command to start your development server.

pnpm dev

npm run dev

yarn dev

bun dev

Start using Panda

Now you can start using Panda CSS in your project. Here is the snippet of code that you can use in your app/routes/_index.tsx file.

app/routes/_index.tsx

import type { MetaFunction } from '@remix-run/node'
import { css } from 'styled-system/css'
 
export const meta: MetaFunction = () => {
  return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }]
}
 
export default function Index() {
  return <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🐼!</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 }), remix(), 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"]
}

If your app doesn't reload when making changes to the panda.config.ts file, consider adding watchPaths in your remix config file.

remix.config.js

export default {
  // ...
  watchPaths: ['panda.config.ts']
}

Edit this page on GitHub View as markdown

Last updated on September 3, 2026