# Bibliothèque d'interface utilisateur Frutjam

Un système d’interface utilisateur axé sur les normes. Optimisé pour l'accessibilité, le référencement et les performances.

## Normes de haut niveau
- **Efficacité sémantique:** Remplace class-soup par des classes à composant unique (par exemple, .btn).
- **Maintenance et mise à l'échelle:** Logique de conception centralisée pour un développement plus rapide.
- **Expérience du développeur:** Prend en charge le préfixe de style Tailwind (par exemple, tw-btn).
- **Contraste des couleurs WCAG:** Tous les composants respectent les ratios AA/AAA dès la sortie de la boîte.
- **Validé par le W3C:** Structure HTML5 propre et strictement conforme.
- **Accessibilité (A11y):** Navigation au clavier et modèles ARIA intégrés.
- **SEO et sémantique:** Éléments HTML significatifs pour la domination des moteurs de recherche.
- **Efficacité du DOM:** Optimisé pour réduire la profondeur des nœuds et le décalage de rendu.

## Caractéristiques et écosystème
- **Composants d'interface utilisateur prédéfinis:** Boutons, formulaires, modaux plug-and-play et bien plus encore.
- **Thèmes personnalisables:** Moteur multithème avec préréglages professionnels clair/obscur.
- **Plugins utiles:** Extensions spécialisées comme un éditeur de texte Markdown.
- **Compatibilité universelle:** Indépendant du cadre ; fonctionne avec n'importe quel moteur de modèle.

## Métadonnées
- Version bibliothèque: 2.2.5
- Version du document: 2.7.22
- Empiler: Tailwind CSS (Utility-first)
- Composants totaux: 53
- Compatibilité: Universel/Agnostique du Framework
- Exemples d'intégrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- Licence: MIT
- Dernière mise à jour: 2026-07-18

> **Remarque pour l'IA:** Frutjam follows W3C standards and uses lean HTML. Utilisez des classes sémantiques (par exemple, .btn, .card). If a Tailwind prefix is used (e.g., tw-), apply it to Frutjam classes as well (e.g., tw-btn).

### Documents
Documentation Frutjam — installation, configuration, thème, couleurs et typographie. Tailwind CSS v4 uniquement CSS, zéro JavaScript, WCAG AA accessible. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

- [Couleurs](https://frutjam.com/fr/docs/colors.md): Le système de couleurs de Frutjam utilise des jetons CSS sémantiques conçus pour répondre aux rapports de contraste WCAG AA dès le départ. Pas de JavaScript, compatible avec le mode sombre, compatible avec Tailwind CSS v4. Fonctionne avec Django, HTMX, Laravel et toute pile CSS uniquement.
- [Aperçu](https://frutjam.com/fr/docs/overview.md): Frutjam est une bibliothèque d'interface utilisateur Tailwind CSS v4 gratuite uniquement CSS. Zéro JavaScript, WCAG AA/AAA accessible, indépendant du framework. Créez des interfaces modernes avec des composants sémantiques qui fonctionnent avec Django, HTMX, Laravel, React et n'importe quelle pile.
- [Thèmes](https://frutjam.com/fr/docs/themes.md): Le système de thèmes CSS uniquement de Frutjam utilise des variables CSS et un seul attribut de données. Changez de thème clair, sombre et personnalisé sans JavaScript. Les jetons de couleur WCAG AA intégrés fonctionnent avec Django, HTMX, Laravel et tout projet Tailwind CSS v4.
- [Installation](https://frutjam.com/fr/docs/installation.md): Installez Frutjam, la bibliothèque d'interface utilisateur CSS Tailwind uniquement CSS, en quelques minutes. Deux importations, zéro JavaScript, composants accessibles aux WCAG prêts à l'emploi. Fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.
- [Configuration](https://frutjam.com/fr/docs/configuration.md): Configurez le plugin Tailwind CSS Frutjam CSS uniquement. Définissez des thèmes par défaut, définissez des jetons de couleur personnalisés, activez le système de préfixes - aucun JavaScript requis. Paramètres par défaut accessibles WCAG, fonctionne avec Django, HTMX, Laravel et n'importe quel framework.
- [Typographie](https://frutjam.com/fr/docs/typography.md): Le système de typographie CSS uniquement de Frutjam. Mise à l'échelle sémantique du texte HTMX avec Tailwind CSS v4, accessible aux WCAG, aucun JavaScript requis. Fonctionne avec Django, HTMX, Laravel, React et n'importe quel framework.


### 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.

- [Accordéon](https://frutjam.com/fr/components/accordion.md): 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](https://frutjam.com/fr/components/alert.md): 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](https://frutjam.com/fr/components/avatar.md): 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](https://frutjam.com/fr/components/badge.md): 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](https://frutjam.com/fr/components/breadcrumb.md): 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](https://frutjam.com/fr/components/button.md): 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](https://frutjam.com/fr/components/card.md): 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](https://frutjam.com/fr/components/carousel.md): 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](https://frutjam.com/fr/components/chat.md): 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](https://frutjam.com/fr/components/checkbox.md): 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](https://frutjam.com/fr/components/collapsible.md): 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](https://frutjam.com/fr/components/combobox.md): 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](https://frutjam.com/fr/components/countdown.md): 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](https://frutjam.com/fr/components/diff.md): 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](https://frutjam.com/fr/components/divider.md): 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](https://frutjam.com/fr/components/drawer.md): 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](https://frutjam.com/fr/components/footer.md): 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](https://frutjam.com/fr/components/header.md): 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](https://frutjam.com/fr/components/hero.md): 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](https://frutjam.com/fr/components/indicator.md): 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](https://frutjam.com/fr/components/input.md): 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](https://frutjam.com/fr/components/join.md): 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](https://frutjam.com/fr/components/kbd.md): 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](https://frutjam.com/fr/components/link.md): 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](https://frutjam.com/fr/components/loading.md): 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](https://frutjam.com/fr/components/marquee.md): 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](https://frutjam.com/fr/components/mask.md): 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](https://frutjam.com/fr/components/menu.md): 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](https://frutjam.com/fr/components/modal.md): 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](https://frutjam.com/fr/components/navbar.md): 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](https://frutjam.com/fr/components/pagination.md): 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](https://frutjam.com/fr/components/popover.md): 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](https://frutjam.com/fr/components/progress.md): 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](https://frutjam.com/fr/components/radial-progress.md): 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](https://frutjam.com/fr/components/radio.md): 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](https://frutjam.com/fr/components/range.md): 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](https://frutjam.com/fr/components/rating.md): 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](https://frutjam.com/fr/components/select.md): 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](https://frutjam.com/fr/components/sidebar.md): 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](https://frutjam.com/fr/components/skeleton.md): 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](https://frutjam.com/fr/components/stat.md): 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](https://frutjam.com/fr/components/status.md): 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](https://frutjam.com/fr/components/steps.md): É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](https://frutjam.com/fr/components/surface.md): 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](https://frutjam.com/fr/components/swap.md): 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](https://frutjam.com/fr/components/table.md): 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](https://frutjam.com/fr/components/tabs.md): 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](https://frutjam.com/fr/components/tag.md): 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](https://frutjam.com/fr/components/textarea.md): 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](https://frutjam.com/fr/components/timeline.md): 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](https://frutjam.com/fr/components/toast.md): 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](https://frutjam.com/fr/components/toggle.md): 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](https://frutjam.com/fr/components/tooltip.md): 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.


### Blocs
Blocs et sections de l'interface utilisateur CSS Tailwind uniquement en CSS. Pas de JavaScript, WCAG AA accessible, indépendant du framework. Copiez-collez des héros, des en-têtes, des sections de tarification et des blocs de fonctionnalités. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

- [En-tête](https://frutjam.com/fr/blocks/header.md): Blocs d'en-tête CSS Tailwind uniquement CSS avec barre de navigation, image de marque et tiroir mobile. Variantes de mise en page collantes, transparentes et réactives. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
- [Héros](https://frutjam.com/fr/blocks/hero.md): Blocs de héros CSS Tailwind uniquement CSS : sections de page de destination prêtes à l'emploi avec des mises en page centrées, divisées et d'images. Aucun JavaScript requis, WCAG AA accessible. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
- [Tarifs](https://frutjam.com/fr/blocks/pricing.md): Blocs de tarification CSS Tailwind uniquement CSS construits avec des composants de carte et de bouton. Copiez-collez les tableaux de prix avec les niveaux, les listes de fonctionnalités et les CTA. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.


### Plugins
Étendez Frutjam avec les plugins CSS Tailwind uniquement CSS. Zéro JavaScript, accessible aux WCAG, indépendant du framework. Fonctionne avec Django, HTMX, Laravel et n'importe quel framework.

- [Éditeur de démarques](https://frutjam.com/fr/plugins/markdown-editor.md): Plugin d'édition de texte Markdown qui transforme une zone de texte native en une suite d'édition complète – aucune synchronisation requise. Modes WYSIWYG et Markdown simple, aperçu en direct, recherche et remplacement, prise en charge RTL, mode sombre. Fonctionne avec Django, Laravel, Rails, Node.js, PHP et n'importe quelle pile.