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 auf Ihrem Computer ein funktionierendes Tailwind CSS-Projekt sowie Node und NPM installiert ist. 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 Ihrer input.css hinzu, indem Sie die @plugin-Direktive verwenden:

1
2

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

JavaScript & React – 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"> handhaben 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.

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

React Hooks – frutjam/react

Thin React-Wrapper um dieselben nativen DOM-Aufrufe. Jeder Hook gibt einen ref zurück, den Sie an das Element und Methoden zu seiner Steuerung anhängen – 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.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Nächste Schritte

Probieren Sie nach der Installation die Schaltflächenkomponente aus, um Frutjam in Aktion zu sehen, oder erkunden Sie die vollständige Komponentenbibliothek.

Möchten Sie den Gedanken hinter Frutjams CSS-First-Ansatz verstehen? Lesen Sie, warum wir es so aufgebaut haben →