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.
Frutjam liefert mehr als 52 CSS-spezifische Tailwind-CSS-Komponenten – Schaltflächen, Modalitäten, Formulare, Navigation, Datenanzeige und mehr – erstellt für Tailwind CSS v4. Jede Komponente verwendet semantische Klassennamen (.btn, .card, .badge), die zusammen mit jeder Tailwind-Dienstprogrammklasse funktionieren. Es ist kein JavaScript gebündelt, kein React-Kontext erforderlich und außer Tailwind selbst sind keine PostCSS-Plugins erforderlich. Jede Komponente ist sofort einsatzbereit und verfügt über WCAG AA-Zugriff, mit handabgestimmten OKLCH-Farbpaaren, die einen lesbaren Kontrast auf jeder Oberfläche garantieren. Da Frutjam nur CSS und Framework-unabhängig ist, funktioniert dasselbe HTML-Markup in Django-Vorlagen, HTMX-Antworten, Laravel Blade, Rails ERB, React JSX oder einfachem statischem HTML – ohne Änderungen.
Neu bei Frutjam?
Legen Sie in Sekundenschnelle los – zwei Importe und schon kann es losgehen.
Akkordeon
Nur CSS-Tailwind-CSS-Akkordeon mit nativem `<details>`/`<summary>`. Erweitern und reduzieren Sie Inhaltsabschnitte ohne JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Alarm
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
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
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
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
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
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
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
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
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
Nur CSS-reduzierbares Tailwind CSS-Panel mit dem nativen „<details>“-Element. Inhaltsabschnitte ohne JavaScript ein- und ausblenden. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Combobox
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
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
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
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
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
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
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
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
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
Nur CSS-Tailwind-CSS-Eingabe mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen XS-XL, Präfix- und Suffix-Addon-Slots, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Verbinden
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
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
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
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
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
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
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
Nur CSS-Tailwind-CSS-Modal unter Verwendung des nativen „<dialog>“-Elements. 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
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
Nur CSS-Tailwind-CSS-Paginierung für nummerierte Seiten, Vor-/Weiter-Pfeile, Auslassungspunkte, zugängliche Radioeingänge und eine Seitensprungauswahl. Kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Popover
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Häufig gestellte Fragen
Sind alle Frutjam-Komponenten nur CSS-fähig?
Ja – die überwiegende Mehrheit der Komponenten ist reines CSS ohne JavaScript. Schaltflächen, Abzeichen, Karten, Formulare, Benachrichtigungen, Modalitäten, Schubladen, Registerkarten und mehr funktionieren alle mit einfachem HTML und CSS. Eine kleine Anzahl von Komponenten, die kein natives HTML-Äquivalent haben (Toast-Positionierung, Combobox-Filterung, Karussell-Steuerelemente), bieten optionale, leichtgewichtige JS-Helfer, aber das CSS-Layout und -Styling erfordert überhaupt kein JavaScript.
Funktionieren Frutjam-Komponenten mit Django, HTMX und Laravel?
Ja – Frutjam ist Framework-unabhängig. Da jede Komponente nur CSS-kompatibel ist, funktioniert sie mit jedem vom Server gerenderten Stack. Django-Vorlagen, HTMX, Laravel Blade, Rails ERB, einfaches HTML – wenn Sie HTML ausgeben können, funktioniert Frutjam. Kein React, keine Build-Pipeline, kein JavaScript-Framework erforderlich.
Sind die WCAG-Komponenten zugänglich?
Ja – der WCAG AA-Kontrast ist für jede Komponente garantiert. Jedes Farbpaar (--color-primary / --color-on-primary usw.) wird in OKLCH von Hand abgestimmt, um die Kontrastanforderungen der WCAG AA zu erfüllen. Durchgehend werden semantische HTML-Elemente verwendet – natives <dialog> für Modalitäten, <details> für Akkordeons und bei Bedarf geeignete ARIA-Attribute.
Wie vergleichen sich Frutjam-Komponenten mit DaisyUI?
Bei beiden handelt es sich um reine CSS-Komponentenbibliotheken von Tailwind, aber Frutjam wurde speziell für Tailwind CSS v4 entwickelt, verwendet OKLCH-Farbtokens mit garantierten WCAG-AA-Kontrastpaaren und liefert einen kostenlosen MCP-Server (Cherry) für die AI-Editor-Integration – das Äquivalent von DaisyUI (Blueprint) ist kostenpflichtig. Frutjam stellt auch explizite on-{color}-Token-Paare bereit, anstatt Vordergrundfarben zur Laufzeit zu berechnen.
Muss ich außer Tailwind CSS noch etwas installieren?
Nur eine zusätzliche Zeile. Fügen Sie @plugin "frutjam"; zu Ihrer CSS-Datei nach @import "tailwindcss"; hinzu und installieren Sie es über npm i -D frutjam. Das ist alles – keine PostCSS-Plugins, keine JavaScript-Konfiguration, kein separates Stylesheet zum Importieren. Alle Komponenten sind sofort verfügbar und werden von Tailwind automatisch geschüttelt.
Kann ich Frutjam-Komponenten mit React oder Next.js verwenden?
Ja. Da Frutjam nur CSS verwendet, verwenden Sie Komponenten in jedem Stack auf die gleiche Weise – wenden Sie einfach die Klassennamen an. Für die wenigen Komponenten, die von der JavaScript-Steuerung profitieren (modales Öffnen/Schließen, Toast, Karussell), liefert Frutjam optionale React-Hooks (frutjam/react) aus, die native DOM-Aufrufe ohne zusätzliche Abhängigkeiten umschließen.