CVA Logo

Class Variance Authority

CSS-in-TS libraries such as Stitches (opens in a new tab) and Vanilla Extract (opens in a new tab) are fantastic options for building type-safe UI components; taking away all the worries of class names and StyleSheet composition.

…but CSS-in-TS (or CSS-in-JS) isn't for everyone.

You may need full control over your StyleSheet output. Your job might require you to use a framework such as Tailwind CSS. You might just prefer writing your own CSS.

Creating variants with the "traditional" CSS approach can become an arduous task; manually matching classes to props and manually adding types.

cva aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.

Acknowledgements

Stitches (opens in a new tab) (WorkOS (opens in a new tab))
Huge thanks to the WorkOS team for pioneering the variants API movement – your open-source contributions are immensely appreciated
clb (opens in a new tab) (Bill Criswell (opens in a new tab))
This project originally started out with the intention of merging into the wonderful clb (opens in a new tab) library, but after some discussion with Bill, we felt it was best to go down the route of a separate project.
I'm so grateful to Bill for sharing his work publicly and for getting me excited about building a type-safe variants API for classes. If you have a moment, please go and star the project on GitHub (opens in a new tab). Thank you Bill!
clsx (opens in a new tab) (Luke Edwards (opens in a new tab))
Previously, this project surfaced a custom cx utility for flattening classes, but it lacked the ability to handle variadic arguments or objects. clsx (opens in a new tab) provided those extra features with quite literally zero increase to the bundle size – a no-brainer to switch!
Vanilla Extract (Seek (opens in a new tab))

Downloads

Wallpaper

License

Installation