Guide · Open source

How to use Linaria: install, write styles and build

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Linaria is a library for writing CSS inside JavaScript files. Its build step pulls those styles out into ordinary CSS files, so the browser does not need extra JavaScript to apply them. This guide shows you how to install it, write styles with the css tag and the React styled helper, and check the limits before you commit.

Linariacallstack/linaria · ★ 12.4k · MIT Install options & downloads

Quick start

1Confirm Node.js version. Make sure your environment runs Node.js 22.12.0 or newer, which Linaria 8 requires.
2Install the packages. Run npm install @linaria/core @linaria/react @wyw-in-js/babel-preset, or the yarn add equivalent.
3Configure your bundler. Follow the wyw-in-js guide for webpack, Vite, Rollup, esbuild or Svelte to add the build-time plugin.
4Write a css tag style. Import css from @linaria/core, write rules in a tagged template, and apply the returned class name with className.
5Use styled for dynamic styles. For React components with prop-based values, use styled from @linaria/react.
6Check side effects and lint. Keep shared style helpers free of side effects and lint your styles with stylelint if you want.

Check the prerequisites before you install

Linaria 8 requires Node.js 22.12.0 or newer. You also need a supported bundler such as webpack, Vite, Rollup, or esbuild, since Linaria is built on the wyw-in-js build tooling and extracts CSS at build time.

Node.js 22.12.0 or newer
A bundler: webpack, Vite, Rollup, or esbuild
A project where you can add a build-time plugin

Install Linaria with npm or yarn

Install the core packages along with the Babel preset from wyw-in-js. Use whichever package manager your project already uses.

npm install @linaria/core @linaria/react @wyw-in-js/babel-preset

yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset

Configure your bundler

Linaria extracts CSS through a bundler plugin. The project's Setup section links to a guide for each supported bundler on wyw-in-js.dev: webpack, esbuild, Rollup, Vite, and Svelte. Follow the guide for your bundler. To customise how files are processed, see the Configuration page on wyw-in-js.dev.

webpack: wyw-in-js.dev/bundlers/webpack
Vite: wyw-in-js.dev/bundlers/vite
Rollup: wyw-in-js.dev/bundlers/rollup
esbuild: wyw-in-js.dev/bundlers/esbuild

Write styles with the css tag

Import css from @linaria/core and write your rules inside a tagged template. The result is a class name you pass to className. You can use imported variables and functions for logic inside the CSS, and they are evaluated at build time. Nesting works in the Sass-like style.

Nesting uses familiar CSS syntax
Imported values are evaluated at build time
Dynamic styles are not supported in the css tag

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

<h1 className={header}>Hello world</h1>;

Build React components with the styled helper

If you use React, the styled helper from @linaria/react lets you write components with a styled-components style syntax. Dynamic values, such as a prop passed to the component, are applied using CSS custom properties, so they do not need a runtime. Styled components can also reference each other as selectors.

Dynamic prop-based styles work with the React bindings
Dynamic styles use CSS variables behind the scenes
Styled components can be used as selectors inside other styles

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

<Container color="#333">
  <Title>Hello world</Title>
</Container>;

Avoid the known trade-offs

Linaria has constraints you should plan for. Dynamic styles are not supported in the css tag, so use styled for values that change at runtime. Dynamic styled components rely on CSS custom properties, so they do not work with IE11. Modules used inside CSS rules must not have side effects, and the README recommends moving shared helpers and configuration into side-effect-free files.

No dynamic styles in the css tag; use styled instead
No IE11 support for dynamic styled components
Modules used in CSS rules must have no side effects
If builds are slow or run unexpected code, review the stability guidance and migration notes

What people use it for

Styling a React component library with CSS written next to the component code
Using JavaScript variables and helper functions such as polished inside stylesheets
Building a Vite or webpack app that serves plain CSS files without a styling runtime
Writing styled React components that change with a prop, using CSS variables

Frequently asked questions

Is Linaria free to use?

Yes. Linaria is licensed under the MIT License. The project's README says it is an open source project and will always remain free to use.

What do I need to install Linaria?

You need Node.js 22.12.0 or newer, since Linaria 8 requires it, and a supported bundler such as webpack, Vite, Rollup, or esbuild. Install the packages with npm install @linaria/core @linaria/react @wyw-in-js/babel-preset.

How do I set up Linaria with Vite or webpack?

Linaria uses the wyw-in-js build tooling, and the README links to a setup guide for each bundler on wyw-in-js.dev. Follow the guide for webpack, Vite, Rollup, esbuild, or Svelte. The Configuration page covers customising how files are processed.

Does Linaria support dynamic styles?

Yes, with limits. The styled helper in @linaria/react supports prop-based dynamic styles through CSS custom properties. The css tag does not support dynamic styles, according to the README.

Does Linaria work with Internet Explorer 11?

Not for dynamic styled components. The README says these rely on CSS custom properties, which IE11 does not support, so projects that must support IE11 should look elsewhere.

How does Linaria compare to styled-components or Emotion?

The main difference is that Linaria is zero-runtime: styles are extracted to CSS files during the build, while styled-components and Emotion are typically run in the browser. Other comparable projects listed for this item include vanilla-extract and Panda CSS.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Linaria suits React or JavaScript teams that want CSS-in-JS without a runtime styling cost, and that already use a supported bundler and Node.js 22.12.0 or newer. Pick something else if you need dynamic styles inside the css tag, IE11 support, or if your shared style modules have side effects.

Install options & downloads