CVA (Class Variance Authority)

Definition

Librairie qui cree des variantes de composants type-safe avec des classes CSS (Tailwind). Definit base, variants, compoundVariants et defaultVariants.

Analogie

Un configurateur de voiture : tu choisis couleur, taille, options, et il genere la bonne combinaison.

Exemple de code

import { cva } from 'class-variance-authority'

const button = cva('px-4 py-2 rounded font-medium', {
  variants: {
    intent: { primary: 'bg-blue-500', danger: 'bg-red-500' },
    size: { sm: 'text-sm', lg: 'text-lg px-6 py-3' },
  },
  defaultVariants: { intent: 'primary', size: 'sm' },
})
// button({ intent: 'danger', size: 'lg' })

Cas d'usage

Creer des composants Tailwind avec des variantes type-safe sans styled-components.

Termes lies