Motifs

Utiliser les patterns dans votre code

Méthode simple pour intégrer les patterns africains AVS avec le package @buni/patterns. Importez directement les classes CSS et utilisez-les comme n'importe quelle classe Tailwind.

Explication

Intégrer les patterns AVS dans votre projet est simple avec le package @buni/patterns. Utilisez les classes de patterns directement comme des classes Tailwind.

Installation

npm install @buni/patterns
# ou
yarn add @buni/patterns
# ou
pnpm add @buni/patterns

Import CSS requis

Ajoutez cette ligne dans votre fichier CSS global (globals.css) :

CSS

@import '@buni/patterns/css';

Utilisation directe avec Tailwind (Recommandé)

Utilisez directement les classes de patterns comme des classes Tailwind :

TSX

// Utilisation directe - très simple !
<div className="ndop h-20 w-full" />
<div className="kente h-32 w-32 rounded-full" />
<div className="bogolan h-16 w-full opacity-20" />

// Combiné avec d'autres classes Tailwind
<section className="ndop min-h-screen relative">
  <div className="absolute inset-0 bg-black/50" />
  <div className="relative z-10 p-8">
    <h1 className="text-white">Votre contenu</h1>
  </div>
</section>

Utilisation avec import (Optionnel)

Vous pouvez aussi importer les classes si vous préférez :

TSX

import { kente, ndop, bogolan } from '@buni/patterns';

// Utilisation avec import
<div className={kente} className="h-48" />
<section className={ndop}>
  <h1>Contenu avec pattern Ndop</h1>
</section>
<div className={bogolan} className="opacity-30 rounded-xl">
  <p>Contenu par-dessus le pattern</p>
</div>

Classes disponibles

kente - Pattern Kente (Ghana)
bogolan - Pattern Bogolan (Mali)
adinkra - Symboles Adinkra (Ghana)
ndebele - Pattern Ndebele (Zimbabwe)
ndop - Pattern Ndop (Cameroun)
wax - Pattern Wax (Pan-africain)
kuba - Pattern Kuba (RDC)
berber - Pattern Berbère (Afrique du Nord)

Exemples de personnalisation Tailwind

TSX

// Pattern subtil en fond
<div className="bogolan opacity-10" />

// Pattern coloré avec blend mode
<div className="kente opacity-20 mix-blend-multiply" />

// Pattern animé
<div className="ndop opacity-15 animate-pulse" />

// Pattern avec filtres
<div className="wax opacity-25 grayscale hover:grayscale-0 transition-all" />

// Pattern en cercle
<div className="kente h-12 w-12 rounded-full" />

// Pattern avec bordure
<div className="ndop h-8 w-full rounded-lg" />

Exemples interactifs

Exemple complet avec @buni/patterns

TSX

export function HeroSection() {
  return (
    <section className="ndop relative min-h-screen">
      {/* Overlay sombre pour améliorer le contraste */}
      <div className="absolute inset-0 bg-avs-accent/10" />
      
      {/* Contenu */}
      <div className="relative z-10 px-6 py-24">
        <h1 className="font-display text-5xl font-bold text-avs-accent">
          Titre de votre section
        </h1>
        <p className="mt-4 text-xl text-avs-accent/70">
          Votre contenu ici
        </p>
        <button className="mt-8 bg-avs-primary text-avs-secondary px-6 py-3 rounded-lg">
          Bouton d'action
        </button>
      </div>
    </section>
  );
}

Bonnes pratiques

Performance : Utilisez une opacité de 0.1 à 0.3 pour un effet subtil sans impacter les performances
Accessibilité : Ajoutez toujours un fond de couleur solide en fallback derrière le pattern
Mobile : Sur mobile, réduisez l'opacité ou désactivez les patterns pour améliorer la lisibilité
Contraste : Vérifiez toujours que le texte reste lisible par-dessus le pattern
CSS uniquement : Ces patterns sont basés sur CSS uniquement, pas besoin de chargement d'images

Introduction Ndop Bamoum