Comment installer Flowbite dans un projet web

Par hpierre, 13 février, 2025

Comme promis dans ma dernière publication, aujourd’hui nous allons aborder l’installation de Flowbite dans un projet web.

Flowbite est une bibliothèque de composants UI basée sur Tailwind CSS, largement utilisée dans le développement web pour sa simplicité et sa flexibilité. Mais au-delà du web, grâce à la modularité et à l’élégance de ses composants, Flowbite peut également être exploité dans d'autres contextes, comme le développement d’applications de bureau avec Electron, ou encore d’applications mobiles via des frameworks comme Ionic ou React Native.

De plus, étant conçu avec Tailwind CSS, Flowbite garantit un design réactif et s’adapte naturellement à tous types d’écrans, ce qui en fait un excellent choix pour les applications web responsives.

Avant d’entrer dans le vif du sujet et de voir comment installer Flowbite, faisons un rapide rappel de ce qu'est cette bibliothèque et pourquoi elle est si populaire parmi les développeurs.

Flowbite est une bibliothèque de composants UI basée sur Tailwind CSS, conçue pour accélérer le développement d'interfaces utilisateur modernes. Il existe plusieurs façons de l'intégrer dans un projet web, en fonction des besoins et des préférences du développeur.

1. Installation via NPM

Si vous utilisez un environnement de développement avec un gestionnaire de paquets, la méthode recommandée est l'installation via NPM.

Étapes d'installation

Assurez-vous que Node.js et NPM sont installés sur votre machine. Si ce n'est pas le cas, téléchargez-les depuis Node.js.
Dans votre projet, exécutez la commande suivante :
```
npm install flowbite
```

Ajutez Flowbite dans votre fichier tailwind.config.js pour activer ses composants :


module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
};

Importez Flowbite dans votre fichier JavaScript principal :
```
import 'flowbite';
```
Redémarrez votre serveur de développement pour appliquer les changements.

2. Utilisation via CDN

Si vous souhaitez utiliser Flowbite sans passer par NPM, il est possible d'intégrer la bibliothèque directement via CDN, ce qui est plus rapide pour des prototypes ou des petits projets.

Ajout du CDN dans votre projet

Ajoutez simplement les liens suivants dans le <head> de votre fichier HTML :

<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.5/dist/tailwind.min.css" rel="stylesheet">

<!-- Flowbite JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>

Vous pouvez alors utiliser directement les composants de Flowbite dans votre HTML sans configuration supplémentaire.

Exemple :

<button class="btn-primary">Cliquez ici</button>

3. Installation via un lien direct (ES Modules)

Si vous utilisez un projet moderne avec ES Modules, vous pouvez importer Flowbite directement depuis un CDN comme unpkg ou jsDelivr.

Exemple d'importation en ES Module

Dans votre fichier JavaScript principal :

import 'https://cdn.jsdelivr.net/npm/flowbite@2.2.1/dist/flowbite.min.js';

Cette méthode est utile si vous souhaitez éviter les installations locales tout en profitant d'une gestion plus souple des modules.

4. Utilisation avec un framework comme React ou Vue.js

Flowbite est compatible avec des frameworks modernes comme React et Vue.js.

Avec React

Dans un projet React basé sur Vite ou Create-React-App :

Installez Flowbite :
```
npm install flowbite
```
Ajoutez Flowbite dans votre tailwind.config.js comme expliqué précédemment.
Importez-le dans votre composant :
```
import 'flowbite';
```

Avec Vue.js

Dans un projet Vue 3 :

Installez Flowbite :
```
npm install flowbite
```
Importez-le dans main.js :
```
import 'flowbite';
```
Vous pouvez maintenant utiliser les composants dans vos templates Vue.

Quelle méthode choisir ?

NPM → Recommandé pour les projets structurés et évolutifs.
CDN → Idéal pour les tests rapides et les petits projets statiques.
ES Modules → Bon compromis pour éviter l'installation locale.
Avec un framework (React/Vue) → Intégration naturelle dans un projet JavaScript moderne.

Je tiens à vous remercier de prendre le temps de lire cet article. Vos retours et votre engagement me motivent à partager encore plus de contenu utile et accessible. Si vous avez des questions ou des suggestions, n’hésitez pas à les laisser en commentaire.

Source-Flowbite

Commentaires1

Merci pour cet article clair…

Merci pour cet article clair. Tu as bien expliqué les différentes méthodes d'installation de Flowbite avec Tailwind CSS : via NPM, CDN, ES Modules et son intégration avec React et Vue.js.

Petite question: Est-ce que t'as testé les performances entre l’intégration via CDN et l’installation locale avec NPM?