Installation

Installieren Sie Frutjam, die reine CSS-UI-Bibliothek von Tailwind, in wenigen Minuten. Zwei Importe, kein JavaScript, WCAG-zugängliche Komponenten sofort einsatzbereit. Funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.

Wie installiere ich die Frutjam-UI-Bibliothek im Tailwind-CSS-Projekt?

Stellen Sie sicher, dass Sie über eine funktionierende verfügen Rückenwind-CSS Projekt installiert, sowie Knoten und NPM auf Ihrem Computer. Frutjam funktioniert mit Tailwind Version 4.

Installieren Sie frutjam als Node-Paket, indem Sie den folgenden Befehl ausführen:

npm i -D frutjam

Fügen Sie Frutjam zu Ihrem hinzu input.css mit der @plugin Direktive:

1
2

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

JavaScript & Reagieren – optional, nicht erforderlich

Frutjam ist Native-First und CSS-First. Die überwiegende Mehrheit der Komponenten – Schaltflächen, Abzeichen, Karten, Formulare, Benachrichtigungen und mehr – funktionieren mit reinem HTML und CSS, ohne dass JavaScript erforderlich ist. Native HTML-Elemente wie <dialog>, <details>, Und <input type="checkbox"> Bewältigen Sie die Interaktivität dort, wo Browser sie bereits unterstützen. Alle Komponenten sind sofort einsatzbereit und funktionieren mit Django, HTMX, Laravel, React, Next.js und jedem Stack.

Für eine kleine Anzahl von Komponenten gibt es kein natives HTML-Äquivalent (Toast-Benachrichtigungen, Combobox-Filterung, Karussell-Steuerelemente). Nur für diese Fälle liefert Frutjam leichte optionale Helfer mit.

Vanille JS — frutjam/js

Framework-unabhängige ES-Modulhelfer für die Komponenten, die sie benötigen. An ein beliebiges DOM-Element anhängen – kein Framework erforderlich.

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()

Reaktionshaken – frutjam/react

Thin React-Wrapper um dieselben nativen DOM-Aufrufe. Jeder Hook gibt a zurück ref Sie fügen dem Element und Methoden hinzu, um es zu steuern – keine zusätzlichen Abhängigkeiten über React selbst hinaus.

 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>
    </>
  )
}

Verfügbar für: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Verwendung eines CDN

Nutzen Sie die CDN-Version der frutjam-UI-Bibliothek für eine schnelle und einfache Integration ohne lokale Einrichtung. Verwenden Sie diese CDN-Version von frutjam nur für Entwicklungszwecke, nicht in der Produktion.

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>

Nächste Schritte

Probieren Sie nach der Installation Folgendes aus Schaltflächenkomponente um Frutjam in Aktion zu sehen oder alles zu erkunden Komponentenbibliothek.

Möchten Sie die Denkweise hinter Frutjams CSS-First-Ansatz verstehen? Lesen Sie, warum wir es so gebaut haben →