@linaria/react

Zero-runtime CSS in JS library.

📖 Please refer to the GitHub for full documentation.

Features

• Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build
• Familiar CSS syntax with Sass like nesting
• Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
• Easily find where the style was defined with CSS sourcemaps
• Lint your CSS in JS with stylelint
• Use JavaScript for logic, no CSS preprocessor needed
• Optionally use any CSS preprocessor such as Sass or PostCSS

Why use Linaria

Installation

npm install @linaria/core @linaria/react @linaria/babel-preset

or

yarn add @linaria/core @linaria/react @linaria/babel-preset

Similar packages

Other packages similar to @linaria/react

styled-components

styled-components is a popular library for styling React components using tagged template literals. Unlike Linaria, styled-components injects styles at runtime, which can lead to a larger bundle size and potential performance issues in large applications.

emotion

Emotion is another library for writing CSS in JS with support for both runtime and zero-runtime styles. It offers a similar API to Linaria but provides more flexibility with its runtime capabilities, which can be beneficial for dynamic styling needs.

jss

JSS is a library for writing CSS with JavaScript. It provides a more programmatic approach to styling compared to Linaria's template literal syntax. JSS is highly customizable and can be used with various frameworks, not just React.