---
title: "Installation"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Install Frutjam CSS-only Tailwind CSS UI library. Two imports, zero JavaScript, Tailwind v4 compatible. Works with Django, HTMX, Laravel, and React."
url: https://frutjam.com/fr/docs/installation
---

# Installation

## Comment installer la bibliothèque Frutjam UI dans le projet Tailwind CSS ?

Assurez-vous d'avoir un projet [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) fonctionnel installé, ainsi que [Node](https://nodejs.org/en/download) et NPM sur votre ordinateur. Frutjam fonctionne avec Tailwind version 4.

### Installez frutjam en tant que package Node en exécutant la commande suivante :

```bash
npm i -D frutjam
```

Ajoutez Frutjam à votre `input.css` en utilisant la directive `@plugin` :

```css
@import "tailwindcss";
@plugin "frutjam";
```

## JavaScript et amp; React - Facultatif, non obligatoire

Frutjam est **natif d'abord et CSS-first**. La grande majorité des composants (boutons, badges, cartes, formulaires, alertes, etc.) fonctionnent avec du HTMX et du CSS purs, aucun JavaScript n'est nécessaire. Les éléments HTMX natifs tels que `<dialog>`, `<details>` et `<input type="checkbox">` gèrent l'interactivité là où les navigateurs la prennent déjà en charge. Tous les composants sont WCAG AA accessibles immédiatement et fonctionnent avec Django, HTMX, Laravel, React, Next.js et n'importe quelle pile.

Un petit nombre de composants n'ont pas d'équivalent HTML natif (notifications toast, filtrage combobox, contrôles carrousel). Pour ces cas uniquement, Frutjam fournit des aides facultatives légères.

### Vanille JS — `frutjam/js`

Assistants de module ES indépendants du framework pour les composants qui en ont besoin. Attachez-le à n’importe quel élément DOM – aucun framework requis.

```js
import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()
```

### React aux crochets — `frutjam/react`

Thin React enveloppe les mêmes appels DOM natifs. Chaque hook renvoie un `ref` que vous attachez à l'élément et aux méthodes pour le contrôler — aucune dépendance supplémentaire au-delà de React lui-même.

```js
import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}
```

Disponible pour : `useModal`, `useDrawer`, `useCollapsible`, `useTooltip`, `useTabs`, `useToast`, `useCarousel`, `useCombobox`.

### Utiliser un CDN

Utilisez la version CDN de la bibliothèque frutjam UI pour une intégration rapide et facile sans configuration locale. Utilisez cette version CDN de frutjam uniquement à des fins de développement, pas en production.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
```

## Prochaines étapes

Une fois installé, essayez le [composant bouton](/fr/components/button) pour voir Frutjam en action, ou explorez la [bibliothèque de composants](/fr/components) complète.

Intégration de l'éditeur IA

### Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP apporte la bibliothèque complète de composants de Frutjam directement dans le contexte de votre éditeur d'IA : noms de classe précis, documents en direct, pas de copier-coller.

[En savoir plus sur Cherry MCP →](/fr/products/cherry)

Vous voulez comprendre la réflexion derrière l’approche CSS-first de Frutjam ? [Découvrez pourquoi nous l'avons construit de cette façon →](/blog/why-i-built-frutjam-css-first-tailwind-ui-library)