# joe-bell/cva **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/joe-bell-cva).** 6,849 stars · 134 forks · TypeScript · Apache-2.0 ## Links - GitHub: https://github.com/joe-bell/cva - Homepage: https://cva.style - awesome-repositories: https://awesome-repositories.com/repository/joe-bell-cva.md ## Topics `class-variance-authority` `classname` `classnames` `css` `cva` `variants` ## Description cva is a TypeScript utility for defining and resolving visual variants for UI components with full type safety. It generates CSS class strings from typed variant definitions, enabling compile-time validation of component usage by deriving the union of all variant prop types from a configuration object. The library distinguishes itself through compound variant matching, which activates styles only when multiple independent variant conditions are simultaneously satisfied, merging their class names. It also provides default value propagation to ensure consistent rendering when no explicit variant is chosen, and supports polymorphic element binding so the same variant logic can be applied to any HTML element type. For projects using Tailwind CSS, cva includes a conflict resolution mechanism that merges conflicting utility classes using a last-wins precedence rule. The tool allows composing variant definitions, extracting variant prop types for reuse, and extending styled components while preserving each variant's styling. It handles class name concatenation gracefully, managing conditional and duplicate entries without runtime overhead. ## Tags ### Networking & Communication - [Variant Defaults](https://awesome-repositories.com/f/networking-communication/terminal-capability-queries/fallback-defaults/variant-defaults.md) — Provides default value propagation so components render consistently when no explicit variant is chosen. ### Programming Languages & Runtimes - [Variant Prop Type Extractors](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-safety/explicit-variable-typing/any-type-restrictions/prop-type-strictness/component-prop-types/variant-prop-type-extractors.md) — Infers the union of all variant prop values from a component definition for reuse in parent components. ([source](https://cva.style/docs/getting-started/typescript)) - [Variant Prop Type Inferences](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-safety/explicit-variable-typing/any-type-restrictions/prop-type-strictness/component-prop-types/variant-prop-type-inferences.md) — Derives the union of all variant prop types from a configuration object for compile-time validation. - [Typed Variant Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/user-defined-types/typed-variant-definitions.md) — Defines component variants as typed objects so the compiler catches invalid combinations before runtime. ([source](https://cva.style/docs/getting-started/typescript)) ### Software Engineering & Architecture - [Variant Default Values](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/variant-default-values.md) — Assigns fallback variant values at definition time so components render consistently when no explicit prop is provided. - [Inferred Prop Types](https://awesome-repositories.com/f/software-engineering-architecture/schema-metadata-utilities/metadata-validations/component-prop-validations/inferred-prop-types.md) — Derives the union of all variant prop types from a configuration object, enabling compile-time validation of component usage. ### User Interface & Experience - [Polymorphic Component Rendering](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/polymorphic-component-rendering.md) — Supports polymorphic element binding, allowing the same variant logic to be applied to any HTML element type. - [Variant-Based Class Generators](https://awesome-repositories.com/f/user-interface-experience/class-string-joiners/variant-based-class-generators.md) — Generates CSS class strings from typed variant definitions with zero runtime overhead. - [Variant Prop Type Inferences](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/interface-configuration-definitions/type-safe-component-apis/variant-prop-type-inferences.md) — Derives the union of all variant prop types from a configuration object for compile-time validation. - [Component Variant Presets](https://awesome-repositories.com/f/user-interface-experience/component-variant-presets.md) — Defines visual or behavioral variations for a component and generates the correct class name string based on the chosen variant. ([source](https://cva.style/docs/getting-started/variants)) - [Variant Default Value Assignments](https://awesome-repositories.com/f/user-interface-experience/component-variant-sets/variant-default-value-assignments.md) — Assigns fallback values for variant props so a component renders a consistent style when no explicit variant is chosen. ([source](https://cva.style/docs/api-reference)) - [Polymorphic Components](https://awesome-repositories.com/f/user-interface-experience/polymorphic-components.md) — Provides polymorphic element binding so variant logic applies to any HTML element. ([source](https://cva.style/docs/faqs)) - [Reusable Variant Definitions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/italic-variant-selectors/arbitrary-selector-variants/reusable-variant-definitions.md) — Combines multiple variant definitions into a single, type-safe class name resolver for complex component styling. ([source](https://cva.style/docs/examples/svelte)) - [Static Variant Resolvers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/static-variant-resolvers.md) — Resolves component styles by mapping variant prop combinations to class strings through a statically defined configuration object. - [Variant-Based Style Resolvers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/variant-based-style-resolvers.md) — Defines visual variants for a component and produces a function that resolves the correct class names based on selected variant props. ([source](https://cdn.jsdelivr.net/gh/joe-bell/cva@main/README.md)) - [Compound Variant Activators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/variant-composition/compound-variant-activators.md) — Ships a compound variant matching engine that activates styles only when multiple independent conditions are met. - [Conditional Compound Variants](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/variant-composition/conditional-compound-variants.md) — Activates style variants only when multiple independent variant conditions are simultaneously satisfied. ([source](https://cva.style/docs/getting-started/variants)) - [Variant Prop Type Inferences](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/variant-composition/variant-prop-type-inferences.md) — Derives the union of all variant prop types from a configuration object for compile-time validation. - [Compound Variant Activators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/variant-class-grouping/compound-variant-activators.md) — Provides compound variant matching that activates styles only when multiple independent conditions are simultaneously satisfied. - [Multi-Condition Variant Activators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/variant-class-grouping/multi-condition-variant-activators.md) — Activates compound variants when several independent variant conditions are met simultaneously, merging their class names. ([source](https://cva.style/docs/api-reference)) - [Type-Safe Variant Combiners](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/variant-class-grouping/type-safe-variant-combiners.md) — Combines multiple variant selections into a single, type-safe class name string for a component. ([source](https://cva.style/docs/examples/react/tailwind-css)) - [Variant-Based Class Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/variant-class-grouping/variant-based-class-generators.md) — Generates CSS class strings from typed variant definitions with full TypeScript type safety and zero runtime overhead. ([source](https://cva.style/docs/faqs)) - [Variant Definition Composers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/variant-class-grouping/variant-definition-composers.md) — Combines multiple variant definitions into a single, type-safe class name resolver for complex component styling. ([source](https://cdn.jsdelivr.net/gh/joe-bell/cva@main/README.md)) - [Class String Joiners](https://awesome-repositories.com/f/user-interface-experience/class-string-joiners.md) — Handles class name concatenation gracefully, managing conditional and duplicate entries without runtime overhead. ([source](https://cva.style/docs/api-reference)) - [Conflict Resolvers](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/conflict-resolvers.md) — Includes a conflict resolution mechanism that merges conflicting Tailwind utility classes using last-wins precedence. - [Variant-Based Component Extenders](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/variant-based-component-extenders.md) — Combines multiple variant-based class name strings into a single component, preserving each variant's styling. ([source](https://cva.style/docs/getting-started/composing-components)) - [Conflict Resolution Utilities](https://awesome-repositories.com/f/user-interface-experience/tailwind-class-organizers/conflict-resolution-utilities.md) — Includes a conflict resolution mechanism that merges conflicting Tailwind utility classes using a last-wins precedence rule. ### Web Development - [Variant Prop Type Inferences](https://awesome-repositories.com/f/web-development/type-safe-styling-utilities/variant-prop-type-inferences.md) — Derives the union of all variant prop types from a configuration object for compile-time validation. ### Development Tools & Productivity - [Tailwind CSS Conflict Resolvers](https://awesome-repositories.com/f/development-tools-productivity/merge-conflict-resolution/tailwind-css-conflict-resolvers.md) — Includes a conflict resolution mechanism that merges conflicting Tailwind utility classes using last-wins precedence. - [Tailwind Class](https://awesome-repositories.com/f/development-tools-productivity/prettier-plugins/conflict-resolvers/tailwind-class.md) — Merges conflicting Tailwind CSS utility classes by wrapping variant definitions with a conflict-resolution utility. ([source](https://cva.style/docs/getting-started/installation))