Aller au contenu principal
logo de buni
Buni
Commencer

Installation

Plusieurs méthodes pour intégrer AVS dans votre projet. La méthode CLI est recommandée pour démarrer rapidement.

Pourquoi ce sujet est important

AVS s'installe facilement dans n'importe quel framework JavaScript moderne avec Tailwind CSS v4. Choisissez votre framework pour voir les instructions d'installation spécifiques.

Explication

Méthode CLI (recommandé)

La méthode la plus simple pour installer AVS dans votre projet.

Terminal
npx @buni/cli init

Cette commande détecte automatiquement votre framework (Next.js, Vue, Angular) et configure :

  • Tailwind CSS v4 avec les couleurs AVS
  • Motifs CSS (kente, ndop, adinkra, etc.)
  • Structure de dossier optimisée

Ajouter des composants

Ajoutez uniquement les composants dont vous avez besoin :

Terminal
npx @buni/cli add button
npx @buni/cli add card
npx @buni/cli add dialog

# Lister tous les composants disponibles
npx @buni/cli list

Package Manager

Sélectionnez votre package manager pour les commandes d'installation :

Méthode manuelle par framework

Sélectionnez votre framework pour voir les instructions d'installation manuelle spécifiques.

Installation Next.js avec Tailwind CSS v4

Installez AVS dans votre projet Next.js 14+ avec App Router.

Étape 1 : Installer les dépendances

Terminal
npm install tailwindcss @radix-ui/react-slot
npm install framer-motion clsx tailwind-merge
npm install class-variance-authority lucide-react

Étape 2 : Configurer Tailwind CSS v4

src/app/globals.css
@import "tailwindcss";

@theme {
  --color-avs-primary: #C0573E;
  --color-avs-secondary: #F5EBE0;
  --color-avs-accent: #1D1D1B;
  --color-avs-kente: #D4A017;
  --color-avs-ndop: #4A6741;
  --color-avs-indigo: #2A4A6B;

  --font-display: Georgia, serif;
  --font-mono: monospace;
}

Étape 3 : Ajouter les motifs AVS

Téléchargez les motifs CSS depuis la galerie et placez-les dans votre projet :

Terminal
# Créer le dossier des motifs
mkdir -p src/styles/patterns

# Télécharger les motifs depuis la galerie AVS
# ou utiliser le CDN directement dans votre CSS
src/styles/patterns.css
/* Importez les motifs AVS ou ajoutez-les ici */
.avs-pattern-kente-royal {
  background-image: url('data:image/svg+xml;base64,...');
  /* ou utilisez le CDN */
  background-image: url('https://cdn.buni-standard.com/patterns/kente-royal.svg');
}

/* Importez ce fichier dans globals.css */
/* @import '../styles/patterns.css'; */

Étape 4 : Utiliser AVS dans votre projet

src/app/page.tsx
export default function HomePage() {
  return (
    <div className="min-h-screen bg-avs-secondary">
      <section className="avs-pattern-kente-royal relative py-20">
        <div className="absolute inset-0 bg-avs-primary/80" />
        <div className="relative container mx-auto px-4">
          <h1 className="font-display text-4xl text-avs-secondary">
            Bienvenue
          </h1>
        </div>
      </section>
    </div>
  );
}

Prochaines étapes

IntroductionStructure du projet