vanilla-extract-css/vanilla-extract

Health v2 · maintenance only

Adoption not part of the score

10413 stars · 356 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

vanilla-extract is a zero-runtime CSS-in-TypeScript library that lets you write locally scoped styles, CSS variables, and themes in .css.ts files, generating static CSS at build time. It is framework-agnostic with integrations for Vite, webpack, esbuild, Next.js, and other bundlers, and offers optional packages like Sprinkles (atomic CSS) and Recipes (multi-variant styles).

Use cases

• write type-safe CSS in TypeScript with zero runtime overhead
• generate static CSS files at build time instead of CSS-in-JS
• create scoped CSS variables and type-safe theme contracts
• build a custom atomic CSS utility system like Tailwind
• create multi-variant component styles with recipes
• avoid runtime style generation costs in a React or framework-agnostic app

When to choose

• you want CSS Modules-like scoping plus type safety and scoped CSS variables
• you need zero-runtime styles for performance-sensitive frontends
• you want a type-safe theming/token system with multiple simultaneous themes
• you use Vite, webpack, esbuild, Next.js, or another supported bundler

When to avoid

• you want fully dynamic runtime styling based on arbitrary user input
• your project has no bundler or TypeScript build step
• you prefer plain CSS or a preprocessor like Sass without tooling setup
• you need a single-file drop-in solution without build configuration

Facets

library · maturity stable

css-framework frontend-framework build-tool ui-components theme frontend web-development web-design developer-tools cross-platform browser css-in-typescript zero-runtime css-modules atomic-css theming type-safe-css static-css-generation design-tokens nodejs web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="vanilla-extract-css/vanilla-extract")