Installation

Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

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

Assurez-vous d'avoir un projet Tailwind CSS fonctionnel installé, ainsi que Node et NPM sur votre ordinateur. Frutjam fonctionne avec Tailwind version 4.

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

npm i -D frutjam

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

1
2

@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.

1
2
3
4
5
6

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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.

1
2

<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 pour voir Frutjam en action, ou explorez la bibliothèque de composants complète.

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 →