diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 90c2873d8b2078..64b55af6df712e 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -3,6 +3,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time. - [Getting started](#getting-started) + - [Why this project exists?](#why-choose-pigment-css) - [Next.js](#nextjs) - [Vite](#vite) - [Basic usage](#basic-usage) @@ -23,6 +24,15 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own Pigment CSS supports Next.js and Vite with support for more bundlers in future. You must install the corresponding plugin, as shown below. +### Why choose Pigment CSS + +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. + +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. + +Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. + ### Next.js ```bash