Open Source · Licence MIT · Gratuit pour toujours
Bibliothèque de composants CSS Tailwind accessible et uniquement CSS pour un développement rapide
Frutjam est une bibliothèque d'interface utilisateur open source ultra-rapide conçue pour les développeurs soucieux de l'accessibilité, des normes et de l'intégration transparente avec Tailwind CSS.
Conforme au W3C, convivial pour le référencement et facile à utiliser.
Hautement personnalisable
Propulsé par les classes d'utilitaires CSS Tailwind
Frutjam vous propose des classes de composants propres et prêtes à l'emploi, tout en laissant chaque utilitaire Tailwind disponible pour la personnalisation. Modifiez facilement l'espacement, les couleurs, la disposition et les interactions avec les classes utilitaires au-dessus des composants Frutjam.
Composants personnalisables
Chaque composant Frutjam est conçu pour accepter les utilitaires Tailwind, vous pouvez donc modifier les styles sans écrire de CSS personnalisé.
Contrôle axé sur les services publics
Utilisez les classes Tailwind telles que text-lg, px-6 et bg-base-200 pour personnaliser les composants en quelques minutes.
Commencez en quelques secondes
Deux importations et vous êtes prêt à construire. Aucun outil de construction, aucune configuration, aucun runtime.
Étape 1
Installer via npm
Ajoutez Frutjam à votre projet avec une seule commande.
npm install frutjam |
Étape 2
Importez dans votre CSS
Ajoutez Tailwind et Frutjam à votre feuille de style.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Étape 3
Utiliser des composants propres
Write semantic classes instead of long utility chains.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
See it in action
Real components, real code — copy and ship.
Buttons
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Badges & Labels
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Tailles des boutons
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Card
Card Title
A clean, accessible card component ready to use in any project.
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Why use Frutjam UI library?
Frutjam is a free, open-source CSS-only UI library built with Tailwind CSS v4 that focuses on accessibility and faster development. It doesn't require complicated JavaScript configuration or huge JS bundles — making it a lightweight DaisyUI alternative for teams who need WCAG-compliant components with zero JavaScript overhead.
Just add @import "frutjam" to your stylesheet to get started. Frutjam removes the need for lengthy Tailwind CSS class lists in your HTML; just use clean, semantic classes to build components easily. Easily customise themes using simple CSS variables, and all components update instantly.
W3C Standards
Clean, valid HTML for modern web apps.
Accessibility First
Every component is built with a11y in mind.
Color Contrast
Components pass WCAG AA/AAA color contrast checks out of the box.
SEO Friendly
Semantic markup for better search engine visibility.
Developer Friendly
Simple, intuitive API and easy integration.
CSS & HTML First
No JavaScript lock-in — style and structure come first.
Tailwind CSS Support
Works perfectly with your existing Tailwind workflow.
RTL Support
Fully compatible with right-to-left languages.
Responsive
Looks great on any device, any screen size.
Actively Maintained
New components, updates, and community support.
Professional Themes
Switch between light and dark modes, or create your own.
Prebuilt Layouts & Components
Ready-to-use building blocks for any project.
Open Source
MIT licensed and community-driven.
Plugin Support
Extend Frutjam with useful plugins like the Markdown Text Editor.
Reduce DOM Size
A large number of nested or unnecessary elements can cause rendering to slow down. Simplify your component structure and improve performance and maintainability.
100/100 on Google PageSpeed Insights
Achieve a perfect 100 in Performance, Accessibility, Best Practices, and SEO using Frutjam UI library. This website is built entirely with Frutjam UI and achieved an overall score of 100/100 on Google PageSpeed Insights.
Websites run faster, provide a better user experience, and have higher search ranks. In today's AI-driven web, faster sites are prioritized—AI tools frequently scan websites in real time, and they prefer fast, efficient pages that don't waste computational resources. Build smarter with a future-ready UI library.
Pure CSS, no JavaScript needed. Framework-agnostic and fully compatible everywhere.
Frutjam UI library does not require huge JavaScript bundles since it is written in pure CSS. This makes your project lightweight and optimized for faster load times and smoother performance. It works perfectly with any web framework or backend, whether you're using React, Vue, Angular, Next.js, Django, HTMX, Laravel, or just plain HTMX.
Pour les cadres modernes
Votre cadre est rapide. Gardez-le ainsi.
Next.js, Svelte et Vue sont conçus pour des performances et un référencement fulgurants : rendu du serveur, JS minimal, hydratation instantanée. Mais dès que vous ajoutez une bibliothèque de composants lourde et pleine de JavaScript gonflé pour quelque chose d'aussi simple qu'un modal, vous échangez tout ce que promettent ces frameworks.
Frutjam est d'abord CSS et natif de par sa conception. Aucun bundle JavaScript. Aucune surcharge d’exécution. Aucun changement de mise en page. Le plafond de performances de votre framework devient votre performance réelle, et pas seulement théorique.
Changement de mise en page nul
Les composants CSS purs s'affichent instantanément avec la page : aucun JavaScript n'est nécessaire pour peindre l'interface utilisateur. Votre Cumulative Layout Shift (CLS) reste à 0, préservant ce score PageSpeed parfait.
Pas de surcharge JS
Chaque Ko de JavaScript que votre framework enregistre suite au fractionnement du bundle, Frutjam ne le rajoute jamais. Boutons, cartes, modaux, badges, le tout en CSS. Votre temps d'interactivité reste rapide.
Un référencement efficace
HTML sémantique, balisage valide W3C et contraste de couleurs WCAG prêt à l'emploi. Les moteurs de recherche lisent une structure propre. Associez un framework moderne à Frutjam et vos pages seront classées et performantes.
Fin du HTML laid, moins de noms de classes, facile à maintenir et un développement plus rapide.
Fini les cours compliqués : une seule classe fait tout. Au lieu d'écrire un fouillis de classes à chaque fois pour chaque élément, chaque page et chaque projet, encore et encore, utilisez les noms de classes de composants Frutjam pour une maintenance et une mise à l'échelle faciles et un développement plus rapide sans le casse-tête des classes encombrées.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Thèmes et personnalisation
Frutjam utilise des variables CSS simples pour la création de thèmes. Modifiez une variable et chaque composant est mis à jour instantanément : pas de reconstruction, pas de changement de classe.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Ce que vous pouvez personnaliser
Colors
Primaire, secondaire, accent, erreur, succès, avertissement et toutes les nuances de base, le tout via une seule variable CSS chacune.
Rayon de frontière
--radius-base met à l'échelle tous les composants en même temps : modifiez une variable, chaque élément est mis à jour.
Typographie
Famille de polices, échelle de taille et hauteur de ligne : définissez votre système de caractères une fois et tous les composants en héritent.
Espacement et dimensionnement
Remplissage des composants et variantes de taille : utilisez les modificateurs de taille intégrés ou remplacez les jetons d'espacement globalement.
Bibliothèque de composants
Une collection croissante de composants prédéfinis et accessibles pour chaque cas d’utilisation.
Boutons et formulaires
Variantes de boutons, entrées, cases à cocher, sélections et mises en page de formulaire complet.
Modaux et boîtes de dialogue
Boîtes de dialogue modales, tiroirs et invites de confirmation accessibles.
Navigation
Barres de navigation, barres latérales, fil d'Ariane et navigation par onglets.
Cartes et mises en page
Variantes de cartes, systèmes de grille et squelettes de mise en page.
Alertes et toasts
Alertes d'état, bannières de notification et messages de commentaires en ligne.
Insignes et étiquettes
Badges d'état, balises de catégorie et composants d'étiquette.
Listes et tableaux
Tableaux de données, listes ordonnées/non ordonnées et listes de définitions.
Plugins
Éditeur Markdown, surligneur de syntaxe et extensions plus utiles.
Plugin communautaire
Apprécié par les développeurs backend. Éditeur Markdown natif.
La plupart des éditeurs rompent avec le flux de travail Web standard. MarkdownEditor l'adopte : il est placé directement au-dessus d'un <textarea> afin que votre backend ne sache jamais que quelque chose a changé. Cela fonctionne simplement avec form method="POST", l'accès DOM standard et chaque infrastructure de serveur prête à l'emploi.
Remplacez un simple <textarea> par une ligne de JS et vos utilisateurs bénéficieront d'une expérience 10 fois meilleure tandis que votre contrôleur Django, Laravel ou PHP reste exactement tel qu'il était.
-
Aucune liaison de données nécessaire : fonctionne avec
form method="POST"prêt à l'emploi -
Accès standard : lecture et écriture avec
element.valuecomme n'importe quelle entrée - Agnostique du backend – PHP, Django, Node.js, Laravel, Rails – tous lisent simplement une chaîne simple
- ~116 Ko — hybride WYSIWYG + mode simple, RTL, téléchargement d'images, aperçu en direct, zéro conflit CSS
Démo en direct — essayez-la :
Remplacement immédiat : une classe, une ligne de JS. Backend inchangé.
Intégration de formulaire natif
Améliore un <textarea> standard. Soumettez avec un <form> normal et accédez au contenu via request.POST['name']. Pas de construction preventDefault(), pas de construction FormData.
Téléchargement d'images avancé
Configurez les téléchargements du serveur via l'API. Les images vont directement sur votre CDN – pas de surcharge Base64 dans votre base de données, pas de pénalité de référencement, pas de charges utiles gourmandes en mémoire.
Hautes performances
Mises à jour d'aperçu anti-rebondies, calculs de style mis en cache et gestion du clavier sans conflit. Gère des milliers de lignes sans décalage d'entrée - et tous les styles d'éditeur sont entièrement étendus afin qu'ils cohabitent en toute sécurité avec n'importe quel framework CSS.
Comment Frutjam se compare-t-il ?
Découvrez comment Frutjam se compare aux CSS Tailwind, Bootstrap et DaisyUI en tant qu'alternative gratuite et accessible.
| Fonctionnalité | Frutjam | DaisyUI | Vent arrière simple | Amorçage |
|---|---|---|---|---|
| CSS uniquement (aucun JavaScript requis) | ✓ | ✓ | ✓ | Partiel |
| Classes de composants sémantiques | ✓ | ✓ | ✗ | ✓ |
| Contraste WCAG AA garanti sur chaque composant | ✓ | Manuel | Manuel | Partiel |
| Fonctionne aux côtés des utilitaires Tailwind | ✓ | ✓ | ✓ | ✗ |
| Thématisation des variables CSS | ✓ | ✓ | ✓ | Limité |
| 100/100 PageSpeed atteignable | ✓ | ✓ | Varie | Varie |
| Prise en charge RTL | ✓ | Partiel | Partiel | ✓ |
| Indépendant du framework (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Thème via des variables CSS simples, pas de fichier de configuration | ✓ | Partiel | Manuel | ✗ |
| Intégration de l'éditeur IA (MCP / contexte) | ✓ Gratuit | Payé | ✗ | ✗ |
Intégration de l'éditeur IA
Vous utilisez Claude Code, Cursor ou Copilot ?
Cherry MCP connecte Frutjam directement à votre éditeur IA. Obtenez un code de composant précis, des noms de classe corrects et des documents à jour, sans copier-coller depuis le navigateur.
Essayez Cherry MCPQuestions fréquemment posées
Tout ce que vous devez savoir sur Frutjam.
L’utilisation de Frutjam est-elle gratuite ?
Oui, Frutjam est sous licence MIT et entièrement gratuit. Utilisez-le dans des projets personnels, des travaux clients et des produits commerciaux sans aucune restriction ni attribution requise.
Frutjam est-il adapté aux projets commerciaux ?
Oui. Frutjam est open source sous licence MIT, qui permet une utilisation gratuite dans des produits personnels et commerciaux sans aucune redevance ni restriction.
Frutjam remplace-t-il Tailwind CSS ?
Non, Frutjam s'appuie sur Tailwind. Considérez-le comme une couche qui ajoute des classes de composants sémantiques (.btn, .card, .badge) tout en gardant toutes les classes utilitaires Tailwind disponibles à côté.
Ai-je besoin de JavaScript pour utiliser Frutjam ?
Aucun JavaScript requis. Frutjam est du pur CSS : les composants tels que les boutons, les cartes, les badges et les formulaires fonctionnent entièrement sans environnement d'exécution JS. Pour les modèles interactifs tels que les modaux ou les listes déroulantes, il se marie bien avec des bibliothèques légères comme Alpine.js ou HTMX.
Puis-je utiliser Frutjam avec React, Vue ou Angular ?
Oui, Frutjam est totalement indépendant du framework. Il fonctionne avec n'importe quel système de modèles ou framework JS, notamment React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django et HTML brut. Importez simplement le CSS et utilisez les classes.
Frutjam est-il accessible aux lecteurs d'écran ?
Oui. Frutjam suit les directives WAI-ARIA avec des rôles appropriés, une prise en charge de la navigation au clavier et un contraste de couleurs WCAG AA/AAA prêt à l'emploi, ce qui le rend accessible à tous les utilisateurs sans configuration supplémentaire.
PageSpeed s'améliore-t-il lors de l'utilisation de Frutjam ?
Oui. L'approche CSS-first de Frutjam évite complètement le blocage du rendu par JavaScript. Combiné avec un balisage valide W3C, un contraste de couleurs approprié et une sémantique HTML native, il contribue directement à de meilleurs Core Web Vitals et à un score PageSpeed de 100/100.
Comment personnaliser les couleurs, les polices et le rayon ?
Remplacez les variables CSS dans votre feuille de style : définissez --color-primary, --font-base, --radius-base, et plus encore. Chaque composant récupère la modification instantanément sans reconstruction ni modification de classe dans votre code HTML.
Du blog
Réflexions sur la création de Frutjam et l'approche CSS de l'interface utilisateur.
Open Source et gratuit pour toujours
Rejoignez la communauté
Frutjam est open source et axé sur la communauté. Chaque composant, correctif et idée de la communauté le rend meilleur pour tout le monde.
Vous avez trouvé un bug ? Vous avez une demande de fonctionnalité ? Vous souhaitez contribuer à un composant ou améliorer la documentation ? Nous serions ravis de vous avoir.