Composants
Composants CSS Tailwind gratuits uniquement en CSS avec accessibilité WCAG AA/AAA intégrée. Aucun JavaScript requis, indépendant du framework et compatible avec Django, HTMX, Laravel, React, Vue et toute pile. Prêt à l’emploi et facile à personnaliser.
Frutjam fournit plus de 52 composants CSS Tailwind uniquement CSS (boutons, modaux, formulaires, navigation, affichage des données, etc.) conçus pour Tailwind CSS v4. Chaque composant utilise des noms de classe sémantique (.btn, .card, .badge) qui fonctionnent avec n'importe quelle classe d'utilitaire Tailwind. Aucun JavaScript n'est fourni, aucun contexte React n'est requis et aucun plugin PostCSS n'est nécessaire au-delà de Tailwind lui-même. Chaque composant est WCAG AA accessible dès la sortie de la boîte, avec des paires de couleurs OKLCH réglées à la main qui garantissent un contraste lisible sur chaque surface. Étant donné que Frutjam est uniquement CSS et indépendant du framework, le même balisage HTMX fonctionne dans les modèles Django, les réponses HTMX, Laravel Blade, Rails ERB, React JSX ou le HTMX statique simple — sans modification.
Nouveau sur Frutjam?
Démarrez en quelques secondes : deux importations et vous êtes prêt à créer.
Accordéon
Accordéon CSS Tailwind uniquement CSS utilisant `<details>`/`<summary>` natif. Développez et réduisez les sections de contenu sans JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Alerte
Alerte CSS Tailwind uniquement en CSS avec variantes d'informations, de réussite, d'avertissement et d'erreur. Style doux, emplacement pour icônes et motif irrecevable. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Avatar
Avatar CSS Tailwind uniquement CSS pour les images de profil. Tailles XS-XL, empilage de groupe et indicateur d'état en ligne/hors ligne. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Badge
Badge CSS Tailwind uniquement CSS avec variantes primaire, secondaire, accent, information, réussite, avertissement et erreur. Styles doux, contour et fantôme, tailles xs-lg. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Fil d'Ariane
Navigation dans le fil d'Ariane CSS Tailwind uniquement en CSS avec séparateurs personnalisés et balisage de points de repère accessible. WCAG AA, fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.
Bouton
Bouton CSS Tailwind uniquement CSS avec variantes primaire, secondaire, accent, fantôme, contour et douce. Tailles xs-xl, état de chargement, désactivé et boutons d'icône. CSS uniquement, WCAG AA, fonctionne avec Django, HTMX, Laravel, React.
Carte
Carte CSS Tailwind uniquement CSS avec styles de contour, d'ombre et plat. Tailles compactes, par défaut et grandes. Emplacements pour le contenu de la carte, le titre de la carte et le pied de page de la carte. WCAG AA, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Carrousel
Carrousel CSS Tailwind uniquement CSS utilisant scroll-snap. Disposition des diapositives horizontales avec commandes de navigation et aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Chat
Composant de bulle de discussion CSS Tailwind uniquement CSS. Positions de début et de fin des messages envoyés et reçus, avec emplacements pour avatar et horodatage. WCAG AA, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Case à cocher
Case à cocher CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, état indéterminé. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Pliant
Panneau pliable CSS Tailwind uniquement en CSS utilisant l'élément natif `<details>`. Afficher et masquer les sections de contenu sans JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Liste déroulante
Combobox Tailwind CSS uniquement CSS avec filtrage de recherche en direct et liste déroulante accessible. Navigation au clavier, variantes de couleurs. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Compte à rebours
Compte à rebours CSS Tailwind uniquement en CSS. Affichage animé des nombres pour les jours, les heures, les minutes et les secondes. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Différence
Visionneuse de différences CSS Tailwind uniquement CSS pour une comparaison de contenu côte à côte avec un séparateur déplaçable. Aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Diviseur
Séparateur CSS Tailwind uniquement CSS – horizontal et vertical avec étiquette centrée en option. Variantes de couleurs et de tailles. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Tiroir
Tiroir CSS Tailwind uniquement CSS utilisant la case à cocher native. Panneau latéral coulissant pour la navigation ou les filtres sans JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Pied de page
Pied de page CSS Tailwind uniquement CSS avec disposition multi-colonnes, logo, liens et emplacements de droits d'auteur. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.
En-tête
En-tête de page CSS Tailwind uniquement en CSS : disposition de la barre supérieure avec emplacements de marque, de navigation et d'action. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Héros
Section héros CSS Tailwind uniquement en CSS pour les pages de destination. Mise en page pleine largeur avec titre, description et CTA centrés. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Indicateur
Indicateur CSS Tailwind uniquement CSS pour superposer des badges ou des points sur n'importe quel coin d'élément. Variantes de couleurs et positionnement. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Saisir
Entrée CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, emplacements pour modules complémentaires de préfixe et de suffixe, style fantôme. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Rejoindre
Jointure CSS Tailwind uniquement CSS pour regrouper des boutons, des entrées ou des sélections dans une unité connectée. Horizontale et verticale. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
KBD
Composant kbd CSS Tailwind uniquement CSS pour afficher les raccourcis clavier et les combinaisons de touches. Variantes de taille. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Lien
Lien CSS Tailwind uniquement CSS avec des variantes de couleurs primaires, secondaires, accentuées et neutres. Survolez les styles soulignés et simples. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Chargement
Indicateur de chargement CSS Tailwind uniquement en CSS avec animations de spinner, de points, d'anneaux et de barres. Variantes de couleur et de taille, aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Chapiteau
Marquee CSS Tailwind uniquement CSS pour le contenu et les logos à défilement horizontal. Contrôle de vitesse et de direction via CSS, pas de JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Masque
Masque CSS Tailwind uniquement CSS pour découper des images en formes : cercle, cercle, cœur, hexagone, etc. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Menu
Menu vertical CSS Tailwind uniquement CSS pour les listes de navigation. États des éléments actifs, désactivés et icônes. Variantes de taille. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Modal
Modal CSS Tailwind uniquement CSS utilisant l'élément natif `<dialog>`. Dimensionnement, toile de fond et piège de mise au point réactifs. Pas de JavaScript pour une utilisation de base. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Barre de navigation
Barre de navigation CSS Tailwind uniquement en CSS avec marque, liens de navigation et emplacements d'action. Variantes collantes et transparentes. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Pagination
Pagination CSS Tailwind uniquement CSS pour les pages numérotées, les flèches précédent/suivant, les points de suspension, les entrées radio accessibles et une sélection de saut de page. Aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Popover
Popover CSS Tailwind uniquement CSS utilisant l'API popover native. Panneau de contenu flottant pour les info-bulles et les listes déroulantes. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Progrès
Barre de progression CSS Tailwind uniquement en CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Progrès Radial
Progression radiale CSS Tailwind uniquement en CSS - anneau de progression circulaire avec affichage en pourcentage. Variantes de couleur et de taille, pas de JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Radio
Boutons radio CSS Tailwind uniquement en CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Gamme
Curseur de plage CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Notation
Composant d'étoile et d'évaluation cardiaque Tailwind CSS uniquement. Tailles xs-xl, support demi-étoile, aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Sélectionner
Liste déroulante de sélection CSS Tailwind uniquement en CSS avec des variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, style fantôme. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Barre latérale
Barre latérale CSS Tailwind uniquement en CSS pour les panneaux de navigation latéraux. Pliable, avec les états des éléments de navigation et les en-têtes de section. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Squelette
Chargeur de squelette Tailwind CSS uniquement CSS pour l'interface utilisateur d'espace réservé. Formes de cercles, de rectangles et de lignes de texte avec animation par impulsions. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Statistique
Statistique CSS Tailwind uniquement en CSS pour l'affichage des métriques. Emplacements de valeur, d’étiquette, de description et d’icône. Disposition de grille réactive. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Statut
Indicateur de points d'état CSS Tailwind uniquement en CSS avec variantes de couleurs primaires, de réussite, d'avertissement et d'erreur. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Mesures
Étapes CSS Tailwind uniquement en CSS pour les assistants en plusieurs étapes et les indicateurs de progression. Disposition horizontale et verticale, variantes de couleurs par étape. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Surface
Surface CSS Tailwind uniquement CSS pour appliquer des couleurs d'arrière-plan et de texte thématiques à un conteneur. Toutes les variantes de couleurs. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Échanger
Swap CSS Tailwind uniquement CSS pour basculer entre deux éléments. Retournez, faites pivoter et fondu les animations, pas de JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Tableau
Table CSS Tailwind uniquement CSS avec rayures zébrées, tailles compactes et par défaut, colonnes épinglées et états de survol des lignes. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Onglets
Onglets CSS Tailwind uniquement CSS avec variantes de style bordure, levée, encadré et pilule. État et tailles actifs, aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Étiqueter
Balise CSS Tailwind (puce) CSS uniquement avec variantes de couleur, style doux et bouton amovible. Tailles xs-lg. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Zone de texte
Zone de texte CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, style fantôme. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Chronologie
Chronologie CSS Tailwind uniquement en CSS pour les listes d'événements chronologiques. Disposition verticale avec emplacements pour icônes, contenus et lignes de connecteur. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Griller
Toast CSS Tailwind uniquement CSS pour le positionnement des notifications : placement en haut, en bas, au début, à la fin et au centre. Pas de JavaScript pour la mise en page. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Basculer
Commutateur à bascule CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Info-bulle
Info-bulle CSS Tailwind uniquement en CSS avec placement en haut, en bas, à gauche et à droite. Variantes de couleurs, aucun JavaScript requis. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Questions fréquemment posées
Tous les composants Frutjam sont-ils uniquement CSS ?
Oui, la grande majorité des composants sont du CSS pur sans JavaScript. Les boutons, badges, cartes, formulaires, alertes, modaux, tiroirs, onglets et bien plus encore fonctionnent tous avec du HTML et du CSS simples. Un petit nombre de composants qui n'ont pas d'équivalent HTML natif (positionnement du toast, filtrage de la zone de liste déroulante, commandes de carrousel) offrent des assistants JS légers en option, mais la mise en page et le style CSS ne nécessitent aucun JavaScript.
Les composants Frutjam fonctionnent-ils avec Django, HTMX et Laravel ?
Oui, Frutjam est indépendant du framework. Étant donné que chaque composant est uniquement CSS, il fonctionne avec n'importe quelle pile rendue par le serveur. Modèles Django, HTMX, Laravel Blade, Rails ERB, HTMX brut — si vous pouvez générer du HTMX, Frutjam fonctionne. Pas de React, pas de pipeline de build, pas de framework JavaScript requis.
Les composants WCAG sont-ils accessibles ?
Oui, le contraste WCAG AA est garanti sur chaque composant. Chaque paire de couleurs (--color-primary / --color-on-primary, etc.) est réglée manuellement dans OKLCH pour répondre aux exigences de contraste WCAG AA. Des éléments HTML sémantiques sont utilisés partout : <dialog> natif pour les modaux, <details> pour les accordéons et les attributs ARIA appropriés si nécessaire.
Comment les composants Frutjam se comparent-ils à DaisyUI ?
Les deux sont des bibliothèques de composants CSS Tailwind uniquement CSS, mais Frutjam est conçu spécifiquement pour Tailwind CSS v4, utilise des jetons de couleur OKLCH avec des paires de contraste WCAG AA garanties et fournit un serveur MCP gratuit (Cherry) pour l'intégration de l'éditeur AI - l'équivalent de DaisyUI (Blueprint) est payant. Frutjam fournit également des paires de jetons on-{color} explicites plutôt que de calculer les couleurs de premier plan au moment de l'exécution.
Dois-je installer autre chose que Tailwind CSS ?
Juste une ligne supplémentaire. Ajoutez @plugin "frutjam"; à votre fichier CSS après @import "tailwindcss"; et installez via npm i -D frutjam. C'est tout : pas de plugins PostCSS, pas de configuration JavaScript, pas de feuille de style distincte à importer. Tous les composants sont disponibles immédiatement et arborescents automatiquement par Tailwind.
Puis-je utiliser les composants Frutjam avec React ou Next.js ?
Oui. Puisque Frutjam est uniquement CSS, vous utilisez les composants de la même manière dans n'importe quelle pile : appliquez simplement les noms de classe. Pour les quelques composants qui bénéficient du contrôle JavaScript (ouverture/fermeture modale, toast, carrousel), Frutjam fournit des hooks React facultatifs (frutjam/react) qui encapsulent les appels DOM natifs sans dépendances supplémentaires.