Class Variance Authority
cva builds type-safe, variant-driven class names for any styling approach, with first-class Tailwind CSS support.
CSS-in-TS libraries such as Stitches and Vanilla Extract handle type-safe UI variants without you managing class names or stylesheet composition by hand.
CSS-in-TS isn’t for everyone, though. You may need full control over your stylesheet output, use a framework such as Tailwind CSS, or 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 takes away those pain points, so you can focus on building your UI.
Sponsors
Section titled “Sponsors”Acknowledgments
Section titled “Acknowledgments”- Stitches (WorkOS)
Huge thanks to the WorkOS team for pioneering thevariantsAPI movement: your open-source contributions are immensely appreciated - cx
Some of the ideas behindcvafirst appeared incx, a type-safe class concatenation utility with reusable shortcuts, in October 2020. - clb (Bill Criswell)
cvabegan with the intention of merging into the wonderfulclblibrary, but after some discussion with Bill, we felt a separate project made more sense.
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. Thank you Bill! - clsx (Luke Edwards)
Previously, this project surfaced a customcxutility for flattening classes, but it lacked the ability to handle variadic arguments or objects. clsx provided those extra features with quite literally zero increase to the bundle size: a no-brainer to switch! - Vanilla Extract (Seek)