PikaCSSAtomic CSS-in-JS Engine

Write styles in JS objects. Ship zero-runtime atomic CSS.

⚡

Zero Runtime

All CSS is generated at build time. No runtime overhead in production.

✍️

Write styles using familiar CSS property names. No utility class names to memorize.

🧬

Each CSS declaration becomes an atomic class, maximizing reuse and minimizing bundle size.

🔧

Selectors, shortcuts, variables, keyframes, and a powerful plugin system.

🌐

Works with Vite, Webpack, Rspack, esbuild, Rollup, Rolldown, and Nuxt.

🤖

Full autocomplete and type checking for every CSS property and custom config.

Write styles with plain CSS property names, get atomic CSS at build time:

InputOutput

const className = pika({
	color: 'red',
	fontSize: '16px',
})

css

@layer utilities {
  .pk-a {
    color: red;
  }
  .pk-b {
    font-size: 16px;
  }
}

Ready to try it? Get started or open the playground — no install needed.

Coming from another tool? See how PikaCSS compares to UnoCSS, Tailwind CSS, Panda CSS, and vanilla-extract.