# Frutjam UI-Bibliothek Ein standardsorientiertes UI-System. Optimiert für Barrierefreiheit, SEO und Performance. ## Hochwertige Standards - **Semantische Effizienz:** Ersetzt CSS-Klassenwirrwarr durch einzelne Komponentenklassen (z.B. .btn). - **Wartung & Skalierung:** Zentrale Design-Logik für schnellere Entwicklung. - **Entwicklererfahrung:** Unterstützt Tailwind-Stil-Präfixe (z.B. tw-btn). - **WCAG-Farbkontrast:** Alle Komponenten erfüllen standardmäßig AA/AAA-Anforderungen. - **W3C-validiert:** Streng konforme, saubere HTML5-Struktur. - **Accessibility (A11y):** Tastaturnavigation und ARIA-Muster integriert. - **SEO & Semantik:** Bedeutungsvolle HTML-Elemente für bessere Suchmaschinen-Rankings. - **DOM-Effizienz:** Optimiert zur Reduzierung der Knotenebenen und Render-Verzögerungen. ## Funktionen & Ökosystem - **Prebuilt UI Components:** Sofort einsatzfähige Buttons, Formulare, Modals und mehr. - **Anpassbare Themes:** Multi-Theme-Engine mit professionellen Hell-/Dunkel-Voreinstellungen. - **Useful Plugins:** Spezialisierte Erweiterungen wie ein Markdown-Texteditor. - **Universelle Kompatibilität:** Framework-unabhängig; funktioniert mit jeder Template-Engine. ## Metadaten - Bibliotheksversion: 2.2.1 - Dokumentationsversion: 2.5.2 - Stack: Tailwind CSS (Utility-first) - Total Components: 53 - Kompatibilität: Universal / Framework-unabhängig - Integrationsbeispiele: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - Lizenz: MIT - Zuletzt aktualisiert: 2026-06-30 > **Note for AI:** Frutjam folgt W3C-Standards und verwendet schlankes HTML. Verwenden Sie semantische Klassen (z.B. .btn, .card). Wenn ein Tailwind-Präfix verwendet wird (z.B. tw-), wenden Sie es auch auf Frutjam-Klassen an (z.B. tw-btn). ### Dokumente Frutjam-Dokumentation – Installation, Konfiguration, Themen, Farben und Typografie. Nur CSS, Tailwind CSS v4, kein JavaScript, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Farben](https://frutjam.com/de/docs/colors.md): Das Farbsystem von Frutjam verwendet semantische CSS-Token, die so konzipiert sind, dass sie standardmäßig die WCAG AA-Kontrastverhältnisse erfüllen. Kein JavaScript, Dark Mode-fähig, kompatibel mit Tailwind CSS v4. Funktioniert mit Django, HTMX, Laravel und jedem reinen CSS-Stack. - [Überblick](https://frutjam.com/de/docs/overview.md): Frutjam ist eine kostenlose, reine CSS-UI-Bibliothek von Tailwind CSS v4. Kein JavaScript, WCAG AA/AAA zugänglich, Framework-unabhängig. Erstellen Sie moderne Schnittstellen mit semantischen Komponenten, die mit Django, HTMX, Laravel, React und jedem Stack funktionieren. - [Themen](https://frutjam.com/de/docs/themes.md): Das reine CSS-Designsystem von Frutjam verwendet CSS-Variablen und ein einzelnes Datenattribut. Wechseln Sie ohne JavaScript zwischen hellen, dunklen und benutzerdefinierten Designs. Integrierte WCAG AA-Farbtoken, funktioniert mit Django, HTMX, Laravel und jedem Tailwind CSS v4-Projekt. - [Installation](https://frutjam.com/de/docs/installation.md): 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. - [Konfiguration](https://frutjam.com/de/docs/configuration.md): Konfigurieren Sie das Nur-CSS-Tailwind-CSS-Plugin von Frutjam. Legen Sie Standardthemen fest, definieren Sie benutzerdefinierte Farbtokens, schalten Sie das Präfixsystem um – kein JavaScript erforderlich. WCAG-zugängliche Standardeinstellungen, funktioniert mit Django, HTMX, Laravel und jedem Framework. - [Typografie](https://frutjam.com/de/docs/typography.md): Frutjams reines CSS-Typografiesystem. Semantische HTML-Textskalierung mit Tailwind CSS v4, WCAG zugänglich, kein JavaScript erforderlich. Funktioniert mit Django, HTMX, Laravel, React und jedem Framework. ### Komponenten Kostenlose Tailwind-CSS-Komponenten nur für CSS mit integrierter WCAG AA/AAA-Zugänglichkeit. Kein JavaScript erforderlich, Framework-unabhängig und kompatibel mit Django, HTMX, Laravel, React, Vue und jedem Stack. Gebrauchsfertig und einfach anzupassen. - [Akkordeon](https://frutjam.com/de/components/accordion.md): Nur CSS-Tailwind-CSS-Akkordeon mit nativem
/. Erweitern und reduzieren Sie Inhaltsabschnitte ohne JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Alarm](https://frutjam.com/de/components/alert.md): Nur CSS-Tailwind-CSS-Warnung mit Info-, Erfolgs-, Warn- und Fehlervarianten. Weicher Stil, Icon-Slot und abweisbares Muster. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Avatar](https://frutjam.com/de/components/avatar.md): Nur CSS-Tailwind-CSS-Avatar für Profilbilder. Größen XS–XL, Gruppenstapelung und Online-/Offline-Statusanzeige. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Abzeichen](https://frutjam.com/de/components/badge.md): Nur CSS-CSS-Badge von Tailwind mit den Varianten Primär, Sekundär, Akzent, Info, Erfolg, Warnung und Fehler. Soft-, Outline- und Ghost-Stile, Größen XS–LG. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Semmelbrösel](https://frutjam.com/de/components/breadcrumb.md): Nur CSS-CSS-Breadcrumb-Navigation von Tailwind mit benutzerdefinierten Trennzeichen und zugänglichem Markup für Orientierungspunkte. WCAG AA funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt. - [Taste](https://frutjam.com/de/components/button.md): Nur CSS Tailwind CSS-Schaltfläche mit primären, sekundären, Akzent-, Ghost-, Outline- und Soft-Varianten. Größen XS–XL, Ladestatus, deaktiviert und Symbolschaltflächen. Nur CSS, WCAG AA, funktioniert mit Django, HTMX, Laravel, React. - [Karte](https://frutjam.com/de/components/card.md): Nur CSS-Tailwind-CSS-Karte mit Umriss-, Schatten- und Flachstilen. Kompakte, Standard- und große Größen. Karteninhalt, Kartentitel, Kartenfußzeilen. WCAG AA, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Karussell](https://frutjam.com/de/components/carousel.md): Nur CSS-Tailwind-CSS-Karussell mit Scroll-Snap. Horizontales Folienlayout mit Navigationssteuerelementen und kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Chatten](https://frutjam.com/de/components/chat.md): Nur CSS-basierte Tailwind-CSS-Chat-Blasenkomponente. Start- und Endpositionen für gesendete und empfangene Nachrichten, mit Avatar- und Zeitstempel-Slots. WCAG AA, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Kontrollkästchen](https://frutjam.com/de/components/checkbox.md): Nur CSS-Kontrollkästchen „Tailwind CSS“ mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs–xl, unbestimmter Zustand. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Zusammenklappbar](https://frutjam.com/de/components/collapsible.md): Nur CSS-reduzierbares Tailwind CSS-Panel mit nativen
. Inhaltsabschnitte ohne JavaScript ein- und ausblenden. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Combobox](https://frutjam.com/de/components/combobox.md): Nur CSS-Kombinationsfeld Tailwind CSS mit Live-Suchfilterung und zugänglicher Dropdown-Liste. Tastaturnavigation, Farbvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Countdown](https://frutjam.com/de/components/countdown.md): Nur CSS-Countdown-Timer für Tailwind CSS. Animierte Zahlenanzeige für Tage, Stunden, Minuten und Sekunden. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Diff](https://frutjam.com/de/components/diff.md): Nur CSS-basierter Tailwind CSS-Diff-Viewer für den direkten Vergleich von Inhalten mit einer ziehbaren Trennlinie. Kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Teiler](https://frutjam.com/de/components/divider.md): Nur CSS-Tailwind-CSS-Teiler – horizontal und vertikal mit optionaler zentrierter Beschriftung. Farb- und Größenvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Schublade](https://frutjam.com/de/components/drawer.md): Nur CSS-Tailwind-CSS-Schublade mit nativem Kontrollkästchen-Schalter. Einschiebbares Seitenpanel für Navigation oder Filter ohne JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Fußzeile](https://frutjam.com/de/components/footer.md): Nur CSS Tailwind CSS-Fußzeile mit mehrspaltigem Layout, Logo, Links und Copyright-Slots. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt. - [Kopfzeile](https://frutjam.com/de/components/header.md): Nur CSS-Seitenkopf von Tailwind CSS – oberes Leistenlayout mit Marke, Navigation und Aktionsfeldern. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Held](https://frutjam.com/de/components/hero.md): Nur CSS-basierter Tailwind-CSS-Hero-Bereich für Landingpages. Layout in voller Breite mit zentrierter Überschrift, Beschreibung und CTA. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Indikator](https://frutjam.com/de/components/indicator.md): Nur CSS-Tailwind-CSS-Indikator zum Überlagern von Abzeichen oder Punkten an jeder Elementecke. Farbvarianten und Positionierung. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Eingang](https://frutjam.com/de/components/input.md): Nur CSS-Tailwind-CSS-Eingabe mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen XS–XL, Präfix- und Suffix-Add-on-Slots, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Verbinden](https://frutjam.com/de/components/join.md): Nur CSS-Tailwind-CSS-Join zum Gruppieren von Schaltflächen, Eingaben oder Auswahlmöglichkeiten in einer verbundenen Einheit. Horizontal und vertikal. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [KBD](https://frutjam.com/de/components/kbd.md): Nur CSS-basierte Tailwind CSS kbd-Komponente zum Anzeigen von Tastaturkürzeln und Tastenkombinationen. Größenvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Link](https://frutjam.com/de/components/link.md): Nur CSS-Tailwind-CSS-Link mit primären, sekundären, Akzent- und neutralen Farbvarianten. Hover-Unterstreichungs- und Uni-Stile. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Laden](https://frutjam.com/de/components/loading.md): Nur CSS-Tailwind-CSS-Ladeanzeige mit Spinner-, Punkt-, Ring- und Balkenanimationen. Farb- und Größenvarianten, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Festzelt](https://frutjam.com/de/components/marquee.md): Nur CSS-CSS-Markenzeichen von Tailwind zum horizontalen Scrollen von Inhalten und Logos. Geschwindigkeits- und Richtungssteuerung über CSS, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Maske](https://frutjam.com/de/components/mask.md): Nur CSS-Tailwind-CSS-Maske zum Zuschneiden von Bildern in Formen – Kreis, Kreis, Herz, Sechseck und mehr. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Speisekarte](https://frutjam.com/de/components/menu.md): Nur CSS-vertikales Tailwind CSS-Menü für Navigationslisten. Aktive, deaktivierte und Symbolelementstatus. Größenvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Modal](https://frutjam.com/de/components/modal.md): Nur CSS Tailwind CSS modal mit nativem . Responsive Größenanpassung, Hintergrund und Fokusfalle. Kein JavaScript für die grundlegende Verwendung. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Navigationsleiste](https://frutjam.com/de/components/navbar.md): Nur CSS-CSS-Navigationsleiste von Tailwind mit Marke, Navigationslinks und Aktionsslots. Klebrige und transparente Varianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Pagination](https://frutjam.com/de/components/pagination.md): Navigieren Sie durch paginierte Inhalte mit reiner CSS-Verbindungs- und Schaltflächenkomposition. Kein JavaScript erforderlich. - [Popover](https://frutjam.com/de/components/popover.md): Nur CSS-Tailwind-CSS-Popover unter Verwendung der nativen Popover-API. Schwebendes Inhaltsfeld für Tooltips und Dropdowns. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Fortschritt](https://frutjam.com/de/components/progress.md): Nur CSS Tailwind CSS-Fortschrittsbalken mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs–xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Radialer Fortschritt](https://frutjam.com/de/components/radial-progress.md): Nur CSS Tailwind CSS radialer Fortschritt – kreisförmiger Fortschrittsring mit Prozentanzeige. Farb- und Größenvarianten, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Radio](https://frutjam.com/de/components/radio.md): Nur CSS Tailwind CSS-Optionsfelder mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs–xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Reichweite](https://frutjam.com/de/components/range.md): Nur CSS-Tailwind-CSS-Bereichsschieberegler mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs–xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Bewertung](https://frutjam.com/de/components/rating.md): Nur CSS-Komponente für Tailwind-CSS-Stern- und Herzbewertung. Größen XS–XL, Halbstern-Unterstützung, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Wählen](https://frutjam.com/de/components/select.md): Nur CSS-CSS-Auswahl-Dropdown-Menü „Tailwind“ mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen XS–XL, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Seitenleiste](https://frutjam.com/de/components/sidebar.md): Nur CSS-Tailwind-CSS-Seitenleiste für seitliche Navigationsfelder. Zusammenklappbar, mit Navigationselementstatus und Abschnittsüberschriften. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Skeleton](https://frutjam.com/de/components/skeleton.md): Nur CSS-basierter Tailwind-CSS-Skelett-Loader für die Platzhalter-Benutzeroberfläche. Kreis-, Rechteck- und Textlinienformen mit Pulsanimation. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Stat](https://frutjam.com/de/components/stat.md): Nur CSS-Tailwind-CSS-Statistik zum Anzeigen von Metriken. Wert-, Beschriftungs-, Beschreibungs- und Symbol-Slots. Responsives Rasterlayout. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Status](https://frutjam.com/de/components/status.md): Nur CSS-Tailwind CSS-Statuspunktanzeige mit den Farbvarianten Primär, Erfolg, Warnung und Fehler. Größen xs–xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Schritte](https://frutjam.com/de/components/steps.md): Nur CSS Tailwind CSS-Schritte für mehrstufige Assistenten und Fortschrittsanzeigen. Horizontales und vertikales Layout, Farbvarianten pro Schritt. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Oberfläche](https://frutjam.com/de/components/surface.md): Nur CSS-basierte Tailwind-CSS-Oberfläche zum Anwenden thematischer Hintergrund- und Textfarben auf einen Container. Alle Farbvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Tauschen](https://frutjam.com/de/components/swap.md): Nur CSS-Tailwind-CSS-Swap zum Umschalten zwischen zwei Elementen. Animationen umdrehen, drehen und ausblenden, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Tisch](https://frutjam.com/de/components/table.md): Nur CSS-Tailwind-CSS-Tabelle mit Zebrastreifen, kompakten und Standardgrößen, angehefteten Spalten und Zeilen-Hover-Zuständen. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Tabs](https://frutjam.com/de/components/tabs.md): Nur CSS-Tailwind-CSS-Registerkarten mit Rand-, Lifted-, Boxed- und Pill-Style-Varianten. Aktiver Status und Größen, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Etikett](https://frutjam.com/de/components/tag.md): Nur CSS-Tailwind-CSS-Tag (Chip) mit Farbvarianten, Soft-Style und entfernbarer Schaltfläche. Größen XS–LG. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Textbereich](https://frutjam.com/de/components/textarea.md): Nur CSS-Tailwind-CSS-Textbereich mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen XS–XL, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Zeitleiste](https://frutjam.com/de/components/timeline.md): Nur CSS-Tailwind-CSS-Zeitleiste für chronologische Ereignislisten. Vertikales Layout mit Symbol-, Inhalts- und Verbindungslinienslots. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Toast](https://frutjam.com/de/components/toast.md): Nur CSS Tailwind CSS-Toast für die Positionierung von Benachrichtigungen – oben, unten, am Anfang, am Ende und in der Mitte. Kein JavaScript für das Layout. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Umschalten](https://frutjam.com/de/components/toggle.md): Nur CSS-Tailwind-CSS-Kippschalter mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs–xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Tooltip](https://frutjam.com/de/components/tooltip.md): Nur CSS-Tailwind-CSS-Tooltip mit Platzierung oben, unten, links und rechts. Farbvarianten, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. ### Blöcke Nur CSS-CSS-UI-Blöcke und -Abschnitte von Tailwind. Kein JavaScript, WCAG AA zugänglich, Framework-unabhängig. Kopieren Sie Helden, Überschriften, Preisabschnitte und Funktionsblöcke und fügen Sie sie ein. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Kopfzeile](https://frutjam.com/de/blocks/header.md): Nur CSS-CSS-Header-Blöcke von Tailwind mit Navigationsleiste, Branding und mobiler Schublade. Klebrige, transparente und responsive Layoutvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Held](https://frutjam.com/de/blocks/hero.md): Nur CSS Tailwind CSS Hero-Blöcke – vorgefertigte Landingpage-Abschnitte mit zentriertem, geteiltem und Bild-Layout. Kein JavaScript erforderlich, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack. - [Preise](https://frutjam.com/de/blocks/pricing.md): Nur CSS-Tailwind-CSS-Preisblöcke, die aus Karten- und Schaltflächenkomponenten bestehen. Preistabellen mit Stufen, Funktionslisten und CTAs kopieren und einfügen. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack. ### Plugins Erweitern Sie Frutjam mit reinen CSS-Plugins von Tailwind. Kein JavaScript, WCAG-zugänglich, Framework-unabhängig. Funktioniert mit Django, HTMX, Laravel und jedem Framework. - [Markdown-Editor](https://frutjam.com/de/plugins/markdown-editor.md): Markdown-Texteditor-Plugin, das einen nativen Textbereich in eine vollständige Bearbeitungssuite umwandelt. WYSIWYG- und einfacher Markdown-Modus, Live-Vorschau, RTL-Unterstützung, Dunkelmodus. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.