Frameworks

PikaCSS is framework-agnostic: the configured base pika() call is replaced with class-name data at build time. The default output is a string; an entry can opt into a string array with transformedFormat: 'array'. The snippets below use the default string form and are simplified, self-contained examples based on the Playground setup.

Two rules apply everywhere:

• pika is a global provided by the build plugin — do not import it.
• Import the owning entry's logical cssModule where its styles are needed; import 'pika.css' is the single-entry default used by the examples below.

TIP

Generic framework projects keep the generated declaration in PikaCSS generated state (.pikacss/pika.gen.ts by default). Run pikacss prepare before standalone TypeScript/ESLint/IDE tooling needs it, and include/reference that declaration from your TypeScript project, for example by adding .pikacss/pika.gen.ts to tsconfig.json include.

Vue

Register the PikaCSS plugin before the Vue plugin (the plugin also declares enforce: 'pre', so PikaCSS transforms run before the Vue compiler either way):

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		pikacss(),
		vue(),
	],
})

Bind the result to :class. Calls work directly inside <template> — when Vue is installed, the generated pika.gen.ts also augments Vue's ComponentCustomProperties, so pika is typed in templates too:

<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
	<button
		type="button"
		:class="pika({
			'padding': '0.625rem 1.25rem',
			'borderRadius': '0.75rem',
			'cursor': 'pointer',
			'$:hover': { filter: 'brightness(1.1)' },
		})"
		@click="count++"
	>
		count is {{ count }}
	</button>
</template>

Entry file:

// main.ts
import { createApp } from 'vue'
import 'pika.css'
import App from './App.vue'

createApp(App).mount('#app')

React

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		pikacss(),
		react(),
	],
})

React uses className:

// App.tsx
function App() {
	return (
		<button
			type="button"
			className={pika({
				'padding': '0.625rem 1.25rem',
				'borderRadius': '0.75rem',
				'cursor': 'pointer',
				'$:hover': { filter: 'brightness(1.1)' },
			})}
		>
			Click me
		</button>
	)
}

export default App

Entry file:

// main.tsx
import { createRoot } from 'react-dom/client'
import 'pika.css'
import App from './App.tsx'

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

Solid

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
	plugins: [
		pikacss(),
		solid(),
	],
})

Solid uses class just as React uses className:

// App.tsx
function App() {
	return (
		<button
			type="button"
			class={pika({
				'padding': '0.625rem 1.25rem',
				'borderRadius': '0.75rem',
				'cursor': 'pointer',
				'$:hover': { filter: 'brightness(1.1)' },
			})}
		>
			Click me
		</button>
	)
}

export default App

Entry file:

// index.tsx
import { render } from 'solid-js/web'
import 'pika.css'
import App from './App.tsx'

render(() => <App />, document.getElementById('root')!)

Nuxt

Use the dedicated module instead of wiring the Vite adapter yourself. It registers the Vite adapter and prepares/references generated types through Nuxt’s type lifecycle. Single-entry authoring auto-imports its sole cssModule; explicit multi-entry authoring does not auto-import CSS. See Nuxt.

Supported File Types

The transform supports JavaScript-family sources (.js, .mjs, .cjs, .jsx, .ts, .mts, .cts, .tsx) and Vue single-file components (.vue). Other markup formats (Svelte, Astro, plain HTML) are not processed. Scan scope is configured per entry in the canonical PikaCSS project config; the adapter itself has no scan option.

Next

• Setup — install and generated-files walkthrough.
• SSR & Production — server rendering and build behavior.
• Unplugin — supported bundler adapters and bootstrap selectors.