Recipe (Vanilla Extract)

Definition

API de Vanilla Extract pour creer des composants a variantes (comme les CVA). Definit base, variants, compoundVariants et defaultVariants avec du typage complet.

Analogie

Un formulaire de commande : tu coches les options (taille, couleur) et le systeme genere la classe.

Exemple de code

import { recipe } from '@vanilla-extract/recipes'

export const button = recipe({
  base: { borderRadius: '4px' },
  variants: {
    color: { primary: { bg: 'blue' }, danger: { bg: 'red' } },
    size: { sm: { padding: '4px' }, lg: { padding: '16px' } },
  },
  defaultVariants: { color: 'primary', size: 'sm' },
})

Cas d'usage

Creer des composants avec des variantes combinables de facon type-safe au build-time.

Termes lies