# 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.2
- Version du document: 2.7.3
- 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-05

> **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).

### Docs
Frutjam documentation — installation, configuration, theming, colors, and typography. CSS-only Tailwind CSS v4, zero JavaScript, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.

- [Colors](https://frutjam.com/fr/docs/colors.md): Frutjam's color system uses semantic CSS tokens designed to meet WCAG AA contrast ratios out of the box. No JavaScript, dark mode aware, compatible with Tailwind CSS v4. Works with Django, HTMX, Laravel, and any CSS-only stack.
- [Overview](https://frutjam.com/fr/docs/overview.md): Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.
- [Themes](https://frutjam.com/fr/docs/themes.md): Frutjam's CSS-only theming system uses CSS variables and a single data attribute. Switch light, dark, and custom themes with no JavaScript. WCAG AA color tokens built in, works with Django, HTMX, Laravel, and any Tailwind CSS v4 project.
- [Installation](https://frutjam.com/fr/docs/installation.md): Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Configuration](https://frutjam.com/fr/docs/configuration.md): Configure the Frutjam CSS-only Tailwind CSS plugin. Set default themes, define custom color tokens, toggle the prefix system - zero JavaScript required. WCAG accessible defaults, works with Django, HTMX, Laravel, and any framework.
- [Typography](https://frutjam.com/fr/docs/typography.md): Frutjam's CSS-only typography system. Semantic HTML text scaling with Tailwind CSS v4, WCAG accessible, no JavaScript required. Works with Django, HTMX, Laravel, React, and any framework.


### Components
Free CSS-only Tailwind CSS components with WCAG AA/AAA accessibility built in. No JavaScript required, framework-agnostic, and compatible with Django, HTMX, Laravel, React, Vue, and any stack. Ready to use and easy to customize.

- [Accordion](https://frutjam.com/fr/components/accordion.md): CSS-only Tailwind CSS accordion using native <details>/<summary>. Expand and collapse content sections with zero JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Alert](https://frutjam.com/fr/components/alert.md): CSS-only Tailwind CSS alert with info, success, warning, and error variants. Soft style, icon slot, and dismissible pattern. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Avatar](https://frutjam.com/fr/components/avatar.md): CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Badge](https://frutjam.com/fr/components/badge.md): CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Breadcrumb](https://frutjam.com/fr/components/breadcrumb.md): CSS-only Tailwind CSS breadcrumb navigation with custom separators and accessible landmark markup. WCAG AA, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Button](https://frutjam.com/fr/components/button.md): CSS-only Tailwind CSS button with primary, secondary, accent, ghost, outline, and soft variants. Sizes xs–xl, loading state, disabled, and icon buttons. CSS-only, WCAG AA, works with Django, HTMX, Laravel, React.
- [Card](https://frutjam.com/fr/components/card.md): CSS-only Tailwind CSS card with outline, shadow, and flat styles. Compact, default, and large sizes. Card-content, card-title, card-footer slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.
- [Carousel](https://frutjam.com/fr/components/carousel.md): CSS-only Tailwind CSS carousel using scroll-snap. Horizontal slide layout with navigation controls and no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Chat](https://frutjam.com/fr/components/chat.md): CSS-only Tailwind CSS chat bubble component. Start and end positions for sent and received messages, with avatar and timestamp slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.
- [Checkbox](https://frutjam.com/fr/components/checkbox.md): CSS-only Tailwind CSS checkbox with primary, secondary, accent, and semantic color variants. Sizes xs–xl, indeterminate state. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Collapsible](https://frutjam.com/fr/components/collapsible.md): CSS-only Tailwind CSS collapsible panel using native <details>. Show and hide content sections without JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Combobox](https://frutjam.com/fr/components/combobox.md): CSS-only Tailwind CSS combobox with live search filtering and accessible dropdown list. Keyboard navigation, color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Countdown](https://frutjam.com/fr/components/countdown.md): CSS-only Tailwind CSS countdown timer. Animated number display for days, hours, minutes, and seconds. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Diff](https://frutjam.com/fr/components/diff.md): CSS-only Tailwind CSS diff viewer for side-by-side content comparison with a draggable divider. No JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Divider](https://frutjam.com/fr/components/divider.md): CSS-only Tailwind CSS divider — horizontal and vertical with optional centered label. Color and size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Drawer](https://frutjam.com/fr/components/drawer.md): CSS-only Tailwind CSS drawer using native checkbox toggle. Slide-in side panel for navigation or filters without JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Footer](https://frutjam.com/fr/components/footer.md): CSS-only Tailwind CSS footer with multi-column layout, logo, links, and copyright slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Header](https://frutjam.com/fr/components/header.md): CSS-only Tailwind CSS page header — top bar layout with brand, navigation, and action slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Hero](https://frutjam.com/fr/components/hero.md): CSS-only Tailwind CSS hero section for landing pages. Full-width layout with centered heading, description, and CTA. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Indicator](https://frutjam.com/fr/components/indicator.md): CSS-only Tailwind CSS indicator for overlaying badges or dots on any element corner. Color variants and positioning. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Input](https://frutjam.com/fr/components/input.md): CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Join](https://frutjam.com/fr/components/join.md): CSS-only Tailwind CSS join for grouping buttons, inputs, or selects into a connected unit. Horizontal and vertical. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [KBD](https://frutjam.com/fr/components/kbd.md): CSS-only Tailwind CSS kbd component for displaying keyboard shortcuts and key combinations. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Link](https://frutjam.com/fr/components/link.md): CSS-only Tailwind CSS link with primary, secondary, accent, and neutral color variants. Hover underline and plain styles. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Loading](https://frutjam.com/fr/components/loading.md): CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Marquee](https://frutjam.com/fr/components/marquee.md): CSS-only Tailwind CSS marquee for horizontally scrolling content and logos. Speed and direction control via CSS, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Mask](https://frutjam.com/fr/components/mask.md): CSS-only Tailwind CSS mask for clipping images into shapes — circle, squircle, heart, hexagon, and more. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Menu](https://frutjam.com/fr/components/menu.md): CSS-only Tailwind CSS vertical menu for navigation lists. Active, disabled, and icon item states. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Modal](https://frutjam.com/fr/components/modal.md): CSS-only Tailwind CSS modal using native <dialog>. Responsive sizing, backdrop, and focus trap. No JavaScript for basic usage. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Navbar](https://frutjam.com/fr/components/navbar.md): CSS-only Tailwind CSS navbar with brand, nav links, and action slots. Sticky and transparent variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Pagination](https://frutjam.com/fr/components/pagination.md): CSS-only Tailwind CSS pagination for numbered pages, prev/next arrows, ellipsis gaps, accessible radio inputs, and a page-jump select. No JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Popover](https://frutjam.com/fr/components/popover.md): CSS-only Tailwind CSS popover using the native popover API. Floating content panel for tooltips and dropdowns. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Progress](https://frutjam.com/fr/components/progress.md): CSS-only Tailwind CSS progress bar with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Radial Progress](https://frutjam.com/fr/components/radial-progress.md): CSS-only Tailwind CSS radial progress — circular progress ring with percentage display. Color and size variants, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Radio](https://frutjam.com/fr/components/radio.md): CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Range](https://frutjam.com/fr/components/range.md): CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Rating](https://frutjam.com/fr/components/rating.md): CSS-only Tailwind CSS star and heart rating component. Sizes xs–xl, half-star support, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Select](https://frutjam.com/fr/components/select.md): CSS-only Tailwind CSS select dropdown with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Sidebar](https://frutjam.com/fr/components/sidebar.md): CSS-only Tailwind CSS sidebar for side navigation panels. Collapsible, with nav item states and section headings. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Skeleton](https://frutjam.com/fr/components/skeleton.md): CSS-only Tailwind CSS skeleton loader for placeholder UI. Circle, rectangle, and text line shapes with pulse animation. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Stat](https://frutjam.com/fr/components/stat.md): CSS-only Tailwind CSS stat for displaying metrics. Value, label, description, and icon slots. Responsive grid layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Status](https://frutjam.com/fr/components/status.md): CSS-only Tailwind CSS status dot indicator with primary, success, warning, and error color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Steps](https://frutjam.com/fr/components/steps.md): CSS-only Tailwind CSS steps for multi-step wizards and progress indicators. Horizontal and vertical layout, color variants per step. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Surface](https://frutjam.com/fr/components/surface.md): CSS-only Tailwind CSS surface for applying themed background and text colors to a container. All color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Swap](https://frutjam.com/fr/components/swap.md): CSS-only Tailwind CSS swap for toggling between two elements. Flip, rotate, and fade animations, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Table](https://frutjam.com/fr/components/table.md): CSS-only Tailwind CSS table with zebra striping, compact and default sizes, pinned columns, and row hover states. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tabs](https://frutjam.com/fr/components/tabs.md): CSS-only Tailwind CSS tabs with border, lifted, boxed, and pill style variants. Active state and sizes, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tag](https://frutjam.com/fr/components/tag.md): CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Textarea](https://frutjam.com/fr/components/textarea.md): CSS-only Tailwind CSS textarea with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Timeline](https://frutjam.com/fr/components/timeline.md): CSS-only Tailwind CSS timeline for chronological event lists. Vertical layout with icon, content, and connector line slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Toast](https://frutjam.com/fr/components/toast.md): CSS-only Tailwind CSS toast for notification positioning — top, bottom, start, end, and center placement. No JavaScript for layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Toggle](https://frutjam.com/fr/components/toggle.md): CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tooltip](https://frutjam.com/fr/components/tooltip.md): CSS-only Tailwind CSS tooltip with top, bottom, left, and right placement. Color variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.


### Blocks
CSS-only Tailwind CSS UI blocks and sections. No JavaScript, WCAG AA accessible, framework-agnostic. Copy-paste heroes, headers, pricing sections, and feature blocks. Works with Django, HTMX, Laravel, React, and any stack.

- [Header](https://frutjam.com/fr/blocks/header.md): CSS-only Tailwind CSS header blocks with navbar, branding, and mobile drawer. Sticky, transparent, and responsive layout variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Hero](https://frutjam.com/fr/blocks/hero.md): CSS-only Tailwind CSS hero blocks — ready-made landing page sections with centered, split, and image layouts. No JavaScript required, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.
- [Pricing](https://frutjam.com/fr/blocks/pricing.md): CSS-only Tailwind CSS pricing blocks built with card and button components. Copy-paste pricing tables with tiers, feature lists, and CTAs. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.


### Plugins
Extend Frutjam with CSS-only Tailwind CSS plugins. Zero JavaScript, WCAG accessible, framework-agnostic. Works with Django, HTMX, Laravel, and any framework.

- [Markdown editor](https://frutjam.com/fr/plugins/markdown-editor.md): Markdown text editor plugin that transforms a native textarea into a full editing suite. WYSIWYG and plain Markdown modes, live preview, RTL support, dark mode. Works with Django, HTMX, Laravel, React, and any stack.