Ecosystem plugins

A plugin is a named bundle of hooks you distribute as its own package, instead of pasting the same hooks into every project's config. It's the hooks counterpart to a preset: a preset shares theme and tokens, a plugin shares behavior.

Framework support is built in

You don't add a plugin to make Panda read Vue, Svelte, or Astro files. The compiler extracts styles from .vue, .svelte, and .astro single-file components directly, so the Vue, Svelte, and Astro install pages have no plugin to add. If you're upgrading from v1, the separate @pandacss/plugin-vue and @pandacss/plugin-svelte packages are gone — that work moved into the compiler.

When to write your own

Most one-off customization belongs in an inline plugin in your config, not a separate package — see Hooks for examples like transforming source before extraction or reacting to generated output. Reach for a published plugin when you want to share that behavior across projects or teams, the same reason you'd reach for a preset instead of copy-pasting tokens.

A plugin is a name and a hooks object. definePlugin gives you the types:

import { definePlugin } from '@pandacss/dev'
 
export function myPlugin() {
  return definePlugin({
    name: 'my-plugin',
    hooks: {
      'parser:before': ({ filePath, content }) => {
        // transform a file's source before Panda extracts from it
        return content
      },
    },
  })
}

Users add the factory to their plugins array:

import { defineConfig } from '@pandacss/dev'
import { myPlugin } from './my-plugin'
 
export default defineConfig({
  plugins: [myPlugin()],
})

See also

• Hooks for every hook and how to author and share a plugin.
• Presets for sharing theme and tokens the same way.