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 ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
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 nativen <details>. 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-Add-on-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 mit nativem <dialog>. 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
Navigieren Sie durch paginierte Inhalte mit reiner CSS-Verbindungs- und Schaltflächenkomposition. Kein JavaScript erforderlich.
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.
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.