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.
A huge thank you to our sponsors for their ongoing support!
Want to support this project?
cva is a privately-maintained free open-source project.
Become a sponsor (opens in a new tab) to contribute towards development efforts financially.
- Stitches (opens in a new tab) (WorkOS (opens in a new tab))
Huge thanks to the WorkOS team for pioneering the
variantsAPI 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
cxutility 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))