Linaria vs vanilla-extract
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A CSS-in-JS library that extracts styles to plain CSS files at build time, so no styling code runs in the brow
Open source · MIT
Write CSS styles in TypeScript; they compile to static CSS files at build time.
The short answer
Choose Linaria if you need…
- React or other JavaScript teams who want CSS-in-JS without a runtime styling cost
- Projects that already use a supported bundler and can add a build-time plugin
- Developers who like CSS syntax with nesting and want JavaScript variables inside styles
- Teams that want source maps and stylelint support for styles written in JS
Choose vanilla-extract if you need…
- Front-end developers who want type-checked styles in TypeScript
- Teams using React, or any other front-end framework, or no framework at all
- Projects that want build-time CSS output without a runtime styling cost
- Developers who want theme support with CSS variables
Side-by-side
| Linaria | vanilla-extract | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 12.4k | 10.4k |
| Setup difficulty | Intermediate | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | TypeScript |
| Last code update | 4 days ago | 5 days ago |
What each one is
Linaria
Linaria lets you write CSS inside JavaScript files, such as with a css tag or a styled helper for React. During the build step, those styles are pulled out into ordinary CSS files, so the browser does not need extra JavaScript to apply them. It is built on the wyw-in-js build tooling and works with bundlers like webpack, Vite, Rollup, and esbuild.
vanilla-extract
vanilla-extract lets you write styles in TypeScript or JavaScript files named .css.ts. At build time those files are turned into ordinary static CSS, so none of the styling code ends up in the shipped JavaScript. Class names are scoped locally, similar to CSS Modules, and it supports CSS variables and themes.
Best for
Linaria
- React or other JavaScript teams who want CSS-in-JS without a runtime styling cost
- Projects that already use a supported bundler and can add a build-time plugin
- Developers who like CSS syntax with nesting and want JavaScript variables inside styles
- Teams that want source maps and stylelint support for styles written in JS
vanilla-extract
- Front-end developers who want type-checked styles in TypeScript
- Teams using React, or any other front-end framework, or no framework at all
- Projects that want build-time CSS output without a runtime styling cost
- Developers who want theme support with CSS variables
Strengths
Linaria
- Styles are extracted to CSS files at build time, so there is no styling runtime in the browser according to the README
- Supports nesting, sourcemaps, and optional preprocessors such as Sass or PostCSS
- Has a documented setup for common bundlers and an MIT license
vanilla-extract
- Styles are generated at build time, so no styling code is shipped to the browser
- Type-safe styles through CSSType, with class names scoped locally
- MIT license and an active project with about 10k GitHub stars
Not ideal for
Linaria
- Projects that need dynamic styles inside the css tag, since the README says those are not supported there
- Apps that must support IE11, because dynamic styled components rely on CSS custom properties
- Teams whose build setup cannot run Node.js 22.12.0 or newer, which Linaria 8 requires
- Codebases with shared style helper modules that have side effects, since the README says modules used in CSS rules cannot have side effects
vanilla-extract
- Non-developers or people who only write plain CSS, since it requires a build setup and TypeScript knowledge
- Projects that need styles computed at runtime from user input; the README mentions an optional runtime API, but the zero-runtime path does not do this
Trade-offs
Linaria
- Build-time evaluation can cause slow builds or unexpected behavior if modules have side effects, per the Stability and Trade-offs sections
- Some features are limited, such as no IE11 support for dynamic styled components and no dynamic values in the css tag
- Setup is split across the wyw-in-js.dev site, so configuration requires reading external docs
vanilla-extract
- Requires configuring build tooling before it works, so setup is not instant
- The README is brief on specifics; detailed setup and API lives on the documentation site
Getting started
Linaria
Install with npm
npm install @linaria/core @linaria/react @wyw-in-js/babel-presetInstall with yarn
yarn add @linaria/core @linaria/react @wyw-in-js/babel-presetvanilla-extract
Clone the repository
git clone https://github.com/vanilla-extract-css/vanilla-extractFrequently asked questions
What is the difference between Linaria and vanilla-extract?
Linaria: A CSS-in-JS library that extracts styles to plain CSS files at build time, so no styling code runs in the brow. vanilla-extract: Write CSS styles in TypeScript; they compile to static CSS files at build time. Linaria suits react or other javascript teams who want css-in-js without a runtime styling cost, while vanilla-extract suits front-end developers who want type-checked styles in typescript.
Are Linaria and vanilla-extract free?
Linaria: Free and open source. vanilla-extract: Free and open source.
Is Linaria or vanilla-extract more popular?
Linaria has more GitHub stars (12.4k) than vanilla-extract (10.4k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Linaria and vanilla-extract?
Other options people compare them with include styled-components, Emotion, React Native for Web, Tamagui, Sass.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.