Open Source · MIT-Lizenz · Für immer kostenlos
Barrierefreie, rein CSS-basierte Tailwind CSS Komponentenbibliothek für schnelle Entwicklung
Frutjam ist eine blitzschnelle Open-Source UI-Bibliothek für Entwickler, die Wert auf Barrierefreiheit, Webstandards und nahtlose Integration mit Tailwind CSS legen.
W3C-konform, SEO-freundlich und einfach zu verwenden.
Hochgradig anpassbar
Angetrieben von Tailwind CSS Utility-Klassen
Frutjam bietet sofort einsatzbereite, saubere Komponentenklassen und lässt alle Tailwind-Utilities für die Anpassung verfügbar. Ändern Sie Abstände, Farben, Layout und Interaktionen einfach mit Utility-Klassen auf Frutjam-Komponenten.
Anpassbare Komponenten
Jede Frutjam-Komponente ist so konzipiert, dass sie Tailwind-Dienstprogramme akzeptiert, sodass Sie Stile optimieren können, ohne benutzerdefiniertes CSS schreiben zu müssen.
Utility-First-Steuerung
Verwenden Sie Tailwind-Klassen wie text-lg, px-6 und bg-base-200, um Komponenten in wenigen Minuten anzupassen.
In Sekunden loslegen
Zwei Imports und Sie können loslegen. Keine Build-Tools, keine Konfiguration, keine Runtime.
Schritt 1
Über npm installieren
Fügen Sie Frutjam mit einem einzigen Befehl zu Ihrem Projekt hinzu.
npm install frutjam |
Schritt 2
Importieren Sie es in Ihr CSS
Fügen Sie sowohl Tailwind als auch Frutjam zu Ihrem Stylesheet hinzu.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Schritt 3
Verwenden Sie saubere Komponenten
Schreiben Sie semantische Klassen anstelle langer Nutzenketten.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
In Aktion sehen
Echte Komponenten, echter Code – kopieren und versenden.
Knöpfe
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Abzeichen und Etiketten
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Knopfgrößen
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Karte
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Warum die Frutjam-UI-Bibliothek verwenden?
Frutjam ist eine kostenlose Open-Source-UI-Bibliothek nur für CSS, die mit Tailwind CSS v4 erstellt wurde und sich auf Barrierefreiheit und schnellere Entwicklung konzentriert. Es erfordert keine komplizierte JavaScript-Konfiguration oder große JS-Bundles – was es zu einer leichten DaisyUI-Alternative für Teams macht, die WCAG-kompatible Komponenten ohne JavaScript-Overhead benötigen.
Fügen Sie einfach @import "frutjam" zu Ihrem Stylesheet hinzu, um loszulegen. Frutjam macht lange Tailwind-CSS-Klassenlisten in Ihrem HTML überflüssig; Verwenden Sie einfach saubere, semantische Klassen, um Komponenten einfach zu erstellen. Passen Sie Designs ganz einfach mit einfachen CSS-Variablen an und alle Komponenten werden sofort aktualisiert.
W3C-Standards
Sauberes, gültiges HTML für moderne Web-Apps.
Barrierefreiheit zuerst
Jede Komponente ist für ein 11-jähriges Jubiläum konzipiert.
Farbkontrast
Die Komponenten bestehen sofort nach dem Auspacken die WCAG-AA/AAA-Farbkontrastprüfungen.
SEO-freundlich
Semantisches Markup für bessere Sichtbarkeit in Suchmaschinen.
Entwicklerfreundlich
Einfache, intuitive API und einfache Integration.
CSS und HTML zuerst
Keine JavaScript-Sperre – Stil und Struktur stehen an erster Stelle.
Tailwind CSS-Unterstützung
Funktioniert perfekt mit Ihrem bestehenden Tailwind-Workflow.
RTL-Unterstützung
Vollständig kompatibel mit Rechts-nach-Links-Sprachen.
Reaktionsfreudig
Sieht auf jedem Gerät und jeder Bildschirmgröße großartig aus.
Aktiv gepflegt
Neue Komponenten, Updates und Community-Support.
Professionelle Themen
Wechseln Sie zwischen hellen und dunklen Modi oder erstellen Sie Ihren eigenen.
Vorgefertigte Layouts und Komponenten
Gebrauchsfertige Bausteine für jedes Projekt.
Open Source
MIT-lizenziert und von der Community betrieben.
Plugin-Unterstützung
Erweitern Sie Frutjam mit nützlichen Plugins wie dem Markdown Text Editor.
DOM-Größe reduzieren
Eine große Anzahl verschachtelter oder unnötiger Elemente kann zu einer Verlangsamung des Renderings führen. Vereinfachen Sie Ihre Komponentenstruktur und verbessern Sie Leistung und Wartbarkeit.
100/100 bei Google PageSpeed Insights
Erreichen Sie mit der Frutjam-UI-Bibliothek eine perfekte 100 in den Bereichen Leistung, Barrierefreiheit, Best Practices und SEO. Diese Website wurde vollständig mit der Frutjam-Benutzeroberfläche erstellt und erreichte bei Google PageSpeed Insights eine Gesamtpunktzahl von 100/100.
Websites laufen schneller, bieten ein besseres Benutzererlebnis und haben höhere Suchränge. Im heutigen KI-gesteuerten Web haben schnellere Websites Vorrang – KI-Tools scannen Websites häufig in Echtzeit und bevorzugen schnelle, effiziente Seiten, die keine Rechenressourcen verschwenden. Erstellen Sie intelligenter mit einer zukunftsfähigen UI-Bibliothek.
Reines CSS, kein JavaScript erforderlich. Framework-unabhängig und überall voll kompatibel.
Die Frutjam-UI-Bibliothek erfordert keine großen JavaScript-Bundles, da sie in reinem CSS geschrieben ist. Dadurch wird Ihr Projekt kompakter und für schnellere Ladezeiten und eine reibungslosere Leistung optimiert. Es funktioniert perfekt mit jedem Web-Framework oder Backend, egal ob Sie React, Vue, Angular, Next.js, Django, HTMX, Laravel oder einfach nur HTML verwenden.
Für moderne Frameworks
Ihr Framework ist schnell. Behalte es so.
Next.js, Svelte und Vue sind auf herausragende Leistung und SEO ausgelegt – Server-Rendering, minimales JS, sofortige Hydratation. Aber in dem Moment, in dem Sie eine umfangreiche Komponentenbibliothek voller aufgeblähtem JavaScript für etwas so Einfaches wie ein Modal hinzufügen, geben Sie alles auf, was diese Frameworks versprechen.
Frutjam ist vom Design her CSS-first und Native-first. Keine JavaScript-Bundles. Kein Laufzeitaufwand. Keine Layoutverschiebung. Die Leistungsobergrenze Ihres Frameworks wird zu Ihrer tatsächlichen Leistung – nicht nur zu einer theoretischen.
Keine Layoutverschiebung
Reine CSS-Komponenten werden sofort mit der Seite gerendert – zum Zeichnen der Benutzeroberfläche ist kein JavaScript erforderlich. Ihr Cumulative Layout Shift (CLS) bleibt bei 0 und behält so den perfekten PageSpeed-Score bei.
Kein JS-Overhead
Jedes KB JavaScript, das Ihr Framework durch die Bundle-Aufteilung einspart, fügt Frutjam nie wieder hinzu. Schaltflächen, Karten, Modalitäten, Abzeichen – alles in CSS. Ihre Time to Interactive bleibt kurz.
SEO, das liefert
Semantisches HTML, W3C-gültiges Markup und WCAG-Farbkontrast sofort einsatzbereit. Suchmaschinen lesen saubere Struktur. Kombinieren Sie ein modernes Framework mit Frutjam und Ihre Seiten werden ranken und performen.
Kein hässliches HTML mehr, weniger Klassennamen, einfache Wartbarkeit und schnellere Entwicklung.
Keine chaotischen Klassen mehr: Eine Klasse erledigt alles. Anstatt jedes Mal eine Unmenge an Klassen für jedes Element, jede Seite und jedes Projekt zu schreiben, verwenden Sie die Klassennamen von Frutjam-Komponenten für eine einfache Wartung und Skalierung sowie eine schnellere Entwicklung ohne die Kopfschmerzen durch Unordnung von Klassen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Themen und Anpassung
Frutjam verwendet einfache CSS-Variablen für die Themengestaltung. Ändern Sie eine Variable und alle Komponenten werden sofort aktualisiert – kein Neuaufbau, keine Klassenänderungen.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Was Sie anpassen können
Farben
Primär, sekundär, Akzent, Fehler, Erfolg, Warnung und alle Grundtöne – alles über jeweils eine einzige CSS-Variable.
Grenzradius
--radius-base skaliert alle Komponenten auf einmal – ändert eine Variable, jedes Element wird aktualisiert.
Typografie
Schriftfamilie, Größenskala und Zeilenhöhe – legen Sie Ihr Schriftsystem einmal fest und alle Komponenten erben es.
Abstand und Größe
Komponentenauffüllung und Größenvarianten – verwenden Sie integrierte Größenmodifikatoren oder überschreiben Sie Abstands-Token global.
Komponentenbibliothek
Eine wachsende Sammlung vorgefertigter, zugänglicher Komponenten für jeden Anwendungsfall.
Schaltflächen und Formulare
Schaltflächenvarianten, Eingaben, Kontrollkästchen, Auswahlmöglichkeiten und vollständige Formularlayouts.
Modalitäten und Dialoge
Zugängliche modale Dialoge, Schubladen und Bestätigungsaufforderungen.
Navigation
Navigationsleisten, Seitenleisten, Breadcrumbs und Tab-Navigation.
Karten und Layouts
Kartenvarianten, Rastersysteme und Seitenlayout-Grundgerüste.
Warnungen und Toasts
Statuswarnungen, Benachrichtigungsbanner und Inline-Feedback-Nachrichten.
Abzeichen und Anhänger
Statusabzeichen, Kategorie-Tags und Etikettenkomponenten.
Listen und Tabellen
Datentabellen, geordnete/ungeordnete Listen und Definitionslisten.
Plugins
Markdown-Editor, Syntax-Highlighter und weitere nützliche Erweiterungen.
Community-Plugin
Von Backend-Entwicklern geliebt. Native-First-Markdown-Editor.
Die meisten Redakteure unterbrechen den Standard-Web-Workflow. MarkdownEditor unterstützt dies – er sitzt direkt über einem <textarea>, sodass Ihr Backend nie erfährt, dass sich etwas geändert hat. Es funktioniert einfach mit form method="POST", Standard-DOM-Zugriff und jedem sofort einsatzbereiten Server-Framework.
Ersetzen Sie ein einfaches <textarea> durch eine Zeile JS und Ihre Benutzer erhalten ein 10-mal besseres Erlebnis, während Ihr Django-, Laravel- oder PHP-Controller genau so bleibt, wie er war.
-
Keine Datenbindung erforderlich – funktioniert standardmäßig mit
form method="POST" -
Standardzugriff – Lesen und Schreiben mit
element.valuewie bei jeder Eingabe - Backend-agnostisch – PHP, Django, Node.js, Laravel, Rails – alle lesen nur einen einfachen String
- ~116 KB – Hybrid-WYSIWYG + einfacher Modus, RTL, Bild-Upload, Live-Vorschau, keine CSS-Konflikte
Live-Demo – probieren Sie es aus:
Drop-in-Ersatz – eine Klasse, eine Zeile JS. Backend unverändert.
Native Formularintegration
Erweitert einen Standard-<textarea>. Senden Sie es mit einem normalen <form> und greifen Sie über request.POST['name'] auf den Inhalt zu. Keine preventDefault(), keine FormData-Konstruktion.
Erweiterter Bild-Upload
Konfigurieren Sie Server-Uploads über die API. Bilder gehen direkt an Ihr CDN – kein Base64-Aufblähen in Ihrer Datenbank, keine SEO-Einbußen, keine speicherintensiven Payloads.
Hohe Leistung
Entprellte Vorschauaktualisierungen, zwischengespeicherte Stilberechnungen und konfliktfreie Tastaturbedienung. Verarbeitet Tausende von Zeilen ohne Eingabeverzögerung – und alle Editor-Stile verfügen über den vollen Gültigkeitsbereich, sodass es sicher mit jedem CSS-Framework zusammenarbeitet.
Wie schneidet Frutjam im Vergleich ab?
Sehen Sie, wie sich Frutjam als kostenlose, zugängliche Alternative gegen einfaches Tailwind-CSS, Bootstrap und DaisyUI schlägt.
| Besonderheit | Frutjam | DaisyUI | Einfacher Rückenwind | Bootstrap |
|---|---|---|---|---|
| Nur CSS (kein JavaScript erforderlich) | ✓ | ✓ | ✓ | Teilweise |
| Semantische Komponentenklassen | ✓ | ✓ | ✗ | ✓ |
| WCAG AA-Kontrast garantiert für jede Komponente | ✓ | Handbuch | Handbuch | Teilweise |
| Funktioniert mit Tailwind-Dienstprogrammen | ✓ | ✓ | ✓ | ✗ |
| Thematisierung von CSS-Variablen | ✓ | ✓ | ✓ | Beschränkt |
| 100/100 PageSpeed erreichbar | ✓ | ✓ | Variiert | Variiert |
| RTL-Unterstützung | ✓ | Teilweise | Teilweise | ✓ |
| Framework-unabhängig (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Theme über einfache CSS-Variablen, keine Konfigurationsdatei | ✓ | Teilweise | Handbuch | ✗ |
| AI-Editor-Integration (MCP / Kontext) | ✓ Kostenlos | Bezahlt | ✗ | ✗ |
AI-Editor-Integration
Verwenden Sie Claude Code, Cursor oder Copilot?
Cherry MCP verbindet Frutjam direkt mit Ihrem KI-Editor. Erhalten Sie präzisen Komponentencode, korrekte Klassennamen und aktuelle Dokumente – ohne Kopieren und Einfügen aus dem Browser.
Probieren Sie Cherry MCPHäufig gestellte Fragen
Alles, was Sie über Frutjam wissen müssen.
Ist die Nutzung von Frutjam kostenlos?
Ja – Frutjam ist MIT-lizenziert und völlig kostenlos. Verwenden Sie es ohne Einschränkungen und ohne Quellenangabe in persönlichen Projekten, Kundenarbeiten und kommerziellen Produkten.
Ist Frutjam für kommerzielle Projekte geeignet?
Ja. Frutjam ist Open Source unter der MIT-Lizenz, die die kostenlose Nutzung in persönlichen und kommerziellen Produkten ohne Lizenzgebühren oder Einschränkungen ermöglicht.
Ersetzt Frutjam Tailwind CSS?
Nein – Frutjam baut auf Tailwind auf. Stellen Sie es sich als eine Ebene vor, die semantische Komponentenklassen (.btn, .card, .badge) hinzufügt und gleichzeitig alle Tailwind-Dienstprogrammklassen verfügbar hält.
Benötige ich JavaScript, um Frutjam zu verwenden?
Kein JavaScript erforderlich. Frutjam ist reines CSS – Komponenten wie Schaltflächen, Karten, Abzeichen und Formulare funktionieren vollständig ohne eine JS-Laufzeitumgebung. Für interaktive Muster wie Modals oder Dropdowns lässt es sich gut mit einfachen Bibliotheken wie Alpine.js oder HTMX kombinieren.
Kann ich Frutjam mit React, Vue oder Angular verwenden?
Ja – Frutjam ist völlig Framework-unabhängig. Es funktioniert mit jedem Vorlagensystem oder JS-Framework, einschließlich React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django und einfachem HTML. Importieren Sie einfach das CSS und verwenden Sie die Klassen.
Ist Frutjam für Screenreader zugänglich?
Ja. Frutjam befolgt die WAI-ARIA-Richtlinien mit entsprechenden Rollen, Unterstützung für die Tastaturnavigation und WCAG AA/AAA-Farbkontrast – so dass es für alle Benutzer ohne zusätzliche Konfiguration zugänglich ist.
Verbessert sich PageSpeed bei der Verwendung von Frutjam?
Ja. Der CSS-First-Ansatz von Frutjam vermeidet vollständig renderblockierendes JavaScript. In Kombination mit W3C-gültigem Markup, korrektem Farbkontrast und nativer HTML-Semantik trägt es direkt zu besseren Core Web Vitals und einem 100/100 PageSpeed-Score bei.
Wie kann ich Farben, Schriftarten und Radius anpassen?
Überschreiben Sie CSS-Variablen in Ihrem Stylesheet – legen Sie --color-primary, --font-base, --radius-base und mehr fest. Jede Komponente übernimmt die Änderung sofort, ohne dass eine Neuerstellung oder Klassenänderungen in Ihrem HTML erforderlich sind.
Aus dem Blog
Gedanken zum Aufbau von Frutjam und zum CSS-First-Ansatz für die Benutzeroberfläche.
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
Open Source und für immer kostenlos
Treten Sie der Community bei
Frutjam ist Open Source und wird von der Community betrieben. Jede Komponente, jeder Fix und jede Idee aus der Community macht es für alle besser.
Einen Fehler gefunden? Haben Sie eine Funktionsanfrage? Möchten Sie eine Komponente beisteuern oder die Dokumente verbessern? Wir würden uns freuen, Sie bei uns zu haben.