Vanilla Extract
Zero-runtime Stylesheets in TypeScript
Zero-runtime stylesheets in TypeScript. Write your styles in TypeScript with full type safety and extract them to static CSS at build time.
10K
GitHub Stars
native
TypeScript
medium
Learning Curve
4.5
DX Score
Pricing
Model
free
Free Tier
MIT licensed, fully open source
Features
- ✓ Zero runtime CSS
- ✓ TypeScript-first
- ✓ Scoped class names
- ✓ Theming with type safety
- ✓ Sprinkles (utility classes)
- ✓ Recipes (variants)
- ✓ CSS variables
- ✓ Build-time extraction
Pros
- + No runtime overhead
- + Full TypeScript integration
- + Type-safe theming
- + Static CSS output
- + Great for design systems
Cons
- - Build tool configuration required
- - Separate .css.ts files
- - Less dynamic than runtime solutions
- - Smaller ecosystem
Best For
enterprise startup
Alternatives
css-in-js typescript zero-runtime static-css