---
title: "Overview"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Overview of Frutjam -a free CSS-only Tailwind CSS v4 component library with WCAG AA/AAA accessibility, zero JavaScript, and framework-agnostic design."
url: https://frutjam.com/fr/docs/overview
---

# Getting Started with Frutjam

Il n'y a pas de configuration compliquée : il utilise la même configuration que Tailwind CSS, vous pouvez donc vous en tenir à ce que vous savez déjà. Et si vous êtes familier avec Bootstrap, les noms des composants vous sembleront intuitifs et faciles à retenir.

Vous pouvez utiliser des préfixes de variantes CSS Tailwind comme `dark:`, `sm:`, `lg:`, `xl:`, `rtl:` et `ltr:` avec n'importe laquelle de nos classes utilitaires.

## Ingénierie d’interface utilisateur moderne avec un framework Speed-First

Frutjam est une bibliothèque d'interface utilisateur open source Tailwind CSS v4 - une abstraction de haut niveau conçue pour faciliter le développement Web rapide. Considérez-le comme une boîte à outils qui transforme les classes utilitaires brutes en composants sémantiques prêts pour la production, vous permettant de créer des interfaces modernes avec beaucoup moins de code.

## Quels problèmes cela résout-il ?

La plupart des développeurs sont confrontés à une "fatigue des utilitaires" et passent des heures à écrire de longues chaînes de classes pour des éléments de base tels que les boutons et les entrées. Frutjam élimine ces frictions en fournissant un écosystème "plug-and-play".

- **Boilerplate redondant** : au lieu de réinventer la roue pour chaque projet, vous obtenez des composants prédéfinis qui gèrent les états de focus, les transitions de survol et les comportements réactifs prêts à l'emploi.
- **Performance Bloat** : contrairement aux frameworks JavaScript lourds, Frutjam donne la priorité à une approche "Pure CSS", garantissant que votre application reste légère et rapide.
- **Obstacles à la conformité** : créer des interfaces accessibles et optimisées pour le référencement est complexe. La bibliothèque utilise un balisage sémantique et du HTML épuré pour garantir que votre site est intrinsèquement conforme au W3C.

## Frutjam est fait pour vous si vous :

- Vous en avez assez d'écrire des milliers de noms de classes utilitaires à plusieurs reprises
- Besoin de livrer des pages de destination et des applications SaaS accessibles et optimisées pour le référencement en un temps record
- Vous souhaitez un système de conception cohérent et entièrement compatible dans n’importe quel environnement ?
- Préférez une solution légère et indépendante du framework, sans aucune dépendance JavaScript obligatoire.

## Fonctionnalités de base pour un développement rapide

La boîte à outils suit une philosophie "copier, coller et créer", offrant tout ce dont vous avez besoin pour une ingénierie frontend de niveau professionnel.

- **Bibliothèque de composants étendue** : comprend des éléments essentiels tels que des barres de navigation, des modaux, des accordéons et des tableaux de données raffinés.
- **Blocs pré-assemblés** : gagnez des heures grâce aux blocs de mise en page pour les sections de tarification, les en-têtes et les zones de héros.
- **"Système de thème Berry"** : basculez entre les thèmes intégrés comme Snowberry (clair) et Darkberry (foncé), ou créez le vôtre à l'aide des variables CSS OKLCH.
- **Conception axée sur l'accessibilité** : chaque composant suit les meilleures pratiques en matière de rôles ARIA et de navigation au clavier. Toutes les paires de couleurs sont des valeurs OKLCH réglées à la main et vérifiées pour passer le contraste WCAG AA – et non des suppositions calculées automatiquement.
- **Agnostique du framework** : fonctionne de manière transparente, que vous utilisiez React, Next.js, Vue, Django, HTMX, Laravel ou du HTMX statique simple.

## Efficacité technique

En utilisant des noms de classe sémantiques, vous pouvez réduire considérablement la taille de votre code HTML par rapport aux flux de travail standard axés sur les utilitaires. Cela se traduit par des bases de code plus propres et plus maintenables, plus faciles à gérer pour les équipes à long terme. La bibliothèque est construite strictement sur Tailwind CSS, vous garantissant de conserver toute la puissance de personnalisation du moteur utilitaire tout en gagnant la vitesse d'un système basé sur des composants.

Prêt à commencer ? [Commencez avec l'installation →](/fr/docs/installation)