CVA (Class Variance Authority)
This module exposes Twig's `html_cva` function to Drupal templates, allowing developers to manage component variants using the Class Variance Authority (CVA) pattern. This is particularly helpful for building reusable components, especially when working with utility-first CSS frameworks like Tailwind CSS.
⚠️ Note: CVA support was added to Drupal core 11.4! If you're on 11.4 or later, you do not need this module; if you're a theme developer, you can use core's CVA support exactly as described below. This module will not be released for Drupal 12, and is no longer being worked on.
Exposes Twig's built-in html_cva function to Drupal templates, enabling Class Variance Authority (CVA) for managing component variants. Useful for building reusable components with Tailwind CSS and other utility-first frameworks. This helps manage component variants (size, color, style, etc.) in Twig templates using a CVA pattern, similar to shadcn/ui and other component libraries.
Usage Example
{% set button = html_cva(
base: 'button',
variants: {
variant: { primary: 'bg-blue', secondary: 'bg-gray' },
size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' }
}
) %}
<button class="{{ button.apply({variant: 'primary', size: 'md'}) }}">
Click me
</button>