Installation

Installez la bibliothèque d'interface utilisateur Frutjam uniquement CSS avec Tailwind CSS v4, UnoCSS ou aucune étape de construction du tout. Plus de 65 composants accessibles, zéro JavaScript, WCAG AA. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Installer

npm i -D frutjam

Choisissez ensuite la ligne ci-dessous qui correspond à votre configuration. Chacun vous donne les mêmes composants.

Vent arrière CSS v4

Vous avez besoin d'un travail CSS vent arrière projet, plus Nœud et npm. Frutjam nécessite Tailwind 4.

Ajoutez Frutjam à votre input.css avec le @plugin directif:

1
2

@import "tailwindcss";
@plugin "frutjam";

C'est toute la configuration. Les plus de 65 composants sont disponibles immédiatement et Tailwind ne livre que ceux que votre balisage utilise.

UnoCSS

Frutjam fournit un préréglage, donc UnoCSS génère uniquement les composants que vous utilisez, de la même manière que le plugin Tailwind.

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

Chaque classe fonctionne comme sous Tailwind, tout comme les variantes :

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

Ajouter presetAttributify() et le nom du composant devient un attribut, chaque valeur étant traitée comme une variante de celui-ci :

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

La deuxième ligne a besoin transformerVariantGroup() pour la syntaxe des crochets. Notez qu'un attribut comme btn n'est pas du HTML valide, donc si vous validez votre balisage, utilisez le formulaire de classe ou celui d'UnoCSS un- préfixe.

Possibilités

Le composant de lien a besoin d'une ligne de configuration

Traitements UnoCSS link en variante, pour le CSS :link pseudo-classe, et ses séparateurs par défaut incluent -. Donc link-2xl se lit comme "2xl, lorsqu'il n'est pas visité" plutôt que comme nom de classe, et rien n'est généré. Cela affecte uniquement ce composant et uniquement le link-* modificateurs.

Soit dites à UnoCSS de se diviser uniquement sur les deux-points :

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

Ou utilisez un préfixe qui met autre chose que link devant le nom :

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

Tous les autres composants ne sont pas affectés. link est le seul des 57 dont le nom entre en collision avec une pseudo-classe.

Pas de moteur utilitaire

Frutjam est construit avec Tailwind, mais les composants se compilent en CSS ordinaire qui lit les propriétés personnalisées. Si votre projet n'utilise aucun moteur utilitaire, importez la feuille de style au lieu du plugin :

import 'frutjam/css';

C'est toute la configuration. Chaque classe de composants fonctionne, les thèmes changent avec data-theme comme d'habitude, et rien d'autre n'est requis. Il fait 30 Ko compressé et contient les styles de base, les deux thèmes et plus de 65 composants.

Insérez uniquement ce dont vous avez besoin :

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

Ou sans aucune étape de construction :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Aucune étape de construction

Déposez une balise et commencez à écrire du balisage. Utilisez-le pour un prototype ou une page que vous ne construisez pas, pas pour la production, car il contient tous les composants.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Pour expérimenter les utilitaires de Tailwind sur la même page, ajoutez la version du navigateur de Tailwind à côté :

1
2

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

JavaScript et React : facultatifs, non obligatoires

Frutjam est natif d'abord et CSS-first. La grande majorité des composants : boutons, badges, cartes, formulaires, alertes, etc. : fonctionnent avec du HTML et du CSS purs, aucun JavaScript n'est nécessaire. Des éléments HTML natifs comme <dialog>, <details>, et <input type="checkbox"> gérer 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 de combobox, contrôles de 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()

Réagir aux crochets : frutjam/react

Thin React enveloppe les mêmes appels DOM natifs. Chaque crochet renvoie un ref vous vous attachez à l'élément et aux méthodes pour le contrôler, pas de dépendances supplémentaires 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.

Prochaines étapes

Une fois installé, essayez le composant de bouton pour voir Frutjam en action, ou explorer l'intégralité bibliothèque de composants.

Vous voulez comprendre la réflexion derrière l’approche CSS-first de Frutjam ? Lisez pourquoi nous l'avons construit de cette façon →