Que fait Conseiller Stack UI ?
Choisir la stack est la décision UI au plus fort effet de levier dans un projet : elle fixe la qualité d'accessibilité, la flexibilité de thème, la taille du bundle et l'aspect « templatisé » du résultat. Faites le choix délibérément, une fois, et notez-le.
Instantané de connaissances : novembre 2026. Les bibliothèques évoluent vite — avant d'installer, confirmez la version majeure actuelle et l'API (voir Vérification de fraîcheur). Préférez ce qui est déjà dans le projet à tout ce qui est listé ici.
Étape 1 — Lisez d'abord le projet
Vérifiez package.json / pubspec.yaml / Package.swift / build.gradle pour les bibliothèques UI existantes, le style (version Tailwind, CSS-in-JS), la version du framework, et tout fichier components.json (shadcn), DESIGN.md ou fichiers de tokens. N'introduisez pas une deuxième bibliothèque de composants à côté d'une existante — étendez celle qui existe ou enveloppez-la. Si le projet utilise déjà un concurrent d'une recommandation ici, mentionnez-le mais ne changez pas les dépendances inutilement.
Étape 2 — Répondez à cinq questions
- Plateforme(s) : web uniquement, mobile uniquement, ou les deux depuis une même base de code ?
- Propriété : code source copié que vous possédez et restylisez librement (modèle shadcn) vs. une dépendance versionnée avec une API de thème (modèle MUI/Mantine) ? Copié = liberté de design maximale + vous le maintenez. Dépendance = plus rapide, cohérent, mises à jour gratuites, plus difficile à rendre distinctif.
- Type de produit : marketing/landing (expressif, riche en mouvements), UI produit/tableau de bord (dense, cohérent, compatible clavier), contenu (typographie d'abord), application mobile grand public (aspect natif, gestes).
- Niveau d'accessibilité : secteur public / entreprise / UE (European Accessibility Act) → choisissez des primitives avec une accessibilité éprouvée (React Aria, Base UI, Radix) et ne codez pas à la main des widgets interactifs.
- Système de style : Tailwind v4 (par défaut pour les nouveaux projets web), CSS Modules/vanilla-extract, ou CSS-in-JS ; sur RN : NativeWind vs Unistyles vs Tamagui.
Étape 3 — Choix par défaut (quand rien d'autre ne contraint)
| Situation | Par défaut | Pourquoi |
|---|---|---|
| React/Next.js UI produit | shadcn/ui (primitives Base UI — le défaut depuis juillet 2026 ; Radix et React Aria aussi supportés) + Tailwind v4 | Vous possédez le code, bonne accessibilité, vaste écosystème de registres, les outils IA le connaissent bien |
| React, widgets complexes / accessibilité critique (plages de dates, comboboxes, glisser-déposer, i18n) | React Aria Components (ou la variante React Aria de shadcn / HeroUI v3, qui est construite dessus) | Comportement a11y + i18n le plus rigoureux |
| React, tout-en-un, sans Tailwind | Mantine | 100+ composants + hooks + formulaires + dates, documentation solide |
| React, aspect entreprise/Material ou grilles de données lourdes | MUI v9 (+ MUI X Data Grid/Date Pickers/Charts) | Mature, complet ; plus difficile à rendre distinctif |
| Administration entreprise (surtout équipes CN/APAC) | Ant Design | Ensemble de composants énorme, motifs denses en données |
| Vue / Nuxt | Nuxt UI v4 (gratuit, construit sur Reka UI + Tailwind v4) ou shadcn-vue | |
| Svelte / SvelteKit | shadcn-svelte (sur Bits UI) | |
| Solid | Kobalte / solid-ui (portage shadcn) / Ark UI | |
| Angular | Spartan UI (similaire à shadcn) ou Angular Material / PrimeNG | |
| Primitives agnostiques du framework | Ark UI (machines d'état Zag.js ; React/Vue/Solid/Svelte) | |
| Effet marketing / landing page | shadcn + Motion + pièces choisies de Magic UI / Aceternity / Animate UI / React Bits | Utilisez 1–3 effets signature, pas un collage |
| React Native / Expo (nouvelle application) | Expo + Expo Router + NativeWind v5 + React Native Reusables (shadcn pour RN) ou HeroUI Native ; @expo/ui pour des contrôles vraiment natifs SwiftUI/Compose ; Reanimated 4 + Gesture Handler pour le mouvement | |
| React Native, focus performance style StyleSheet | Unistyles 3 + vos propres composants | |
| React Native + web depuis une même base de code | Tamagui (compilateur, universel) ou Expo + NativeWind avec react-native-web | |
| Flutter | Material 3 (intégré) / Cupertino ; forui ou shadcn_ui pour un aspect non-Material | |
| iOS natif | SwiftUI composants système (Liquid Glass sur iOS 26+ est offert avec les contrôles standards) | Luttez le moins possible contre la plateforme |
| Android natif | Jetpack Compose Material 3 (API Expressives dans la ligne material3 1.5) |
Les détails, alternatives et compromis par plateforme se trouvent dans les références — lisez celle qui correspond :
references/web-react.md— Primitives React, kits stylisés, écosystème shadcn et registres, outils Tailwindreferences/web-other.md— Vue, Svelte, Solid, Angular, Astro, HTML simple/composants webreferences/mobile.md— React Native/Expo, Flutter, SwiftUI, Compose, Kotlin Multiplatformreferences/motion.md— Bibliothèques d'animations par plateforme et quand CSS/natif suffitreferences/building-blocks.md— Icônes, polices, graphiques, tableaux, formulaires, toasts, dates, DnD, virtualisation, éditeurs, menus de commandes, carrousels, cartes, 3Dreferences/inspiration.md— Où chercher des références (Mobbin, Refero, etc.) et outils de design IA
Étape 4 — Enregistrez la décision
Écrivez le choix dans le projet (DESIGN.md ou section « Stack UI » du README) : bibliothèque + version, approche de style, ensemble d'icônes, bibliothèque de mouvement, police, et pourquoi. Les futures sessions (et autres agents) le liront au lieu de re-décider.
Vérification de fraîcheur (à faire avant d'installer)
npm view <pkg> version time.modified repository.url # version actuelle + dernière publication
npm view <pkg> deprecated # avis de dépréciation, le cas échéant
# Flutter : https://pub.dev/packages/<pkg> (likes, pub points, dernière publication)
# Swift : vérifiez le dernier tag de release du dépôt
Signaux pour éviter une bibliothèque : aucune publication depuis 12+ mois avec des problèmes critiques ouverts, le README dit « non maintenu/archivé », les dépendances pointent sur une vieille version de React/RN, pas de types TypeScript, les problèmes d'accessibilité ignorés. Exemples connus de retrait/risque : react-beautiful-dnd (déprécié → utilisez @atlaskit/pragmatic-drag-and-drop ou dnd kit), @base-ui-components/react (renommé → @base-ui/react), les API Chakra v2 (v3 est une réécriture sur Ark UI/Panda), les API gestuelles Reanimated 2/3 (useAnimatedGestureHandler supprimé dans v4).
Si des MCP de documentation sont disponibles (par ex. Context7, shadcn MCP, le MCP Figma pour les recherches de design system), utilisez-les pour lire la documentation actuelle plutôt que de compter sur la mémoire.
Anti-patrons
- Deux bibliothèques de composants dans une même application (MUI + shadcn) → focus, espacement, thème incohérents.
- Coder à la main des dialogues, menus, comboboxes, sélecteurs de date, toasts, infobulles → bugs d'accessibilité (piège de focus, échappement, aria, verrouillage du défilement, collision). Utilisez des primitives.
- Installer une bibliothèque de « composants animés » en bloc → ne copiez que les 1 à 3 pièces dont vous avez besoin.
- Utiliser un kit UI web dans React Native via des webviews, ou forcer des composants Material sur les utilisateurs iOS.
- Laisser le thème par défaut de la bibliothèque inchangé → le problème « toutes les applications shadcn se ressemblent ». Modifiez au minimum : police, rayon, couleur d'accent, température neutre et densité (voir les compétences design-system-builder et color-theory).