shadcn/ui est aujourd'hui la référence pour les primitives d'interface en React. Boutons, modals, dropdowns, formulaires : la bibliothèque est précise, accessible, et pensée pour être possédée plutôt que consommée. Mais construire une landing page complète avec shadcn seul prend du temps, parce que ce n'est pas son rôle. Pour les sections marketing complètes, hero, pricing, testimonials, stats, il faut chercher ailleurs. Voici un tour d'horizon honnête des options disponibles.
Ce que shadcn/ui fait très bien
Le modèle "copy-paste" de shadcn a changé la façon dont on installe les dépendances UI. Pas de package npm à maintenir, pas de styles globaux imposés, un composant copié dans son propre projet, modifiable ligne par ligne. Pour les primitives interactives (Combobox, DatePicker, DataTable), c'est difficile à battre.
shadcn repose sur Radix UI pour l'accessibilité et Tailwind pour le style. Le résultat est un système cohérent, bien documenté, avec une communauté très active. Les 50+ composants couvrent la quasi-totalité des besoins d'une application SaaS.
La limite, c'est ce qui n'est pas dans la liste : aucun composant de section. Pas de hero, pas de bloc testimonials, pas de section features avec illustrations. shadcn construit les briques, pas la maison.
Le vrai écart : les sections marketing complètes
Une landing page typique contient 8 à 12 sections. Chacune nécessite une composition spécifique : mise en page, animation d'entrée, états responsive, données mock pour prévisualiser. Construire ces sections à partir de primitives shadcn est faisable, mais représente plusieurs heures de travail par section.
C'est là que des bibliothèques spécialisées entrent en jeu.
Les alternatives disponibles
Tailwind UI (Tailwind Labs) propose des sections marketing de qualité professionnelle. Le catalogue est vaste, le design soigné. Le modèle est payant (249$/licence), et le code est en HTML + Alpine.js ou React selon les sections. L'adaptation à un projet Next.js existant demande du travail si votre stack diffère. Comparaison Incubator vs Tailwind UI.
Aceternity UI mise sur des effets visuels spectaculaires : particules, masques cursor, backgrounds animés. Les composants sont impressionnants, surtout pour les dark themes. Le catalogue est plus limité et les effets peuvent peser sur les performances si on en abuse. Comparaison Incubator vs Aceternity UI.
HyperUI et Meraki UI offrent des collections gratuites de blocs Tailwind, principalement en HTML. Utiles pour récupérer rapidement une structure, moins adaptés si vous travaillez en TypeScript strict avec des données typées.
MagicUI se positionne sur les animations et les composants "wow factor", dans l'esprit d'Aceternity mais avec un focus plus fort sur les composants React réutilisables.
Incubator (voir le catalog complet) prend une approche différente : des sections entières, prêtes à intégrer dans Next.js, avec meta.ts, mock.ts et composant TSX séparés. 449 variantes couvrant 66 types de sections. Le modèle est le même que shadcn (code dans votre projet, pas de dépendance runtime), mais appliqué aux sections marketing. La comparaison Incubator vs shadcn/ui détaille les différences d'approche.
Comment choisir selon votre cas
| Besoin | Option recommandée | |--------|-------------------| | Primitives UI (boutons, modals, forms) | shadcn/ui | | Sections marketing, dark themes, effets visuels | Incubator dark, Aceternity UI | | Sections minimalistes, typographie forte | Incubator minimal | | Budget limité, prototypage rapide | HyperUI, MagicUI (gratuit) | | Design system complet, budget disponible | Tailwind UI |
La plupart des projets sérieux combinent shadcn/ui pour les composants applicatifs et une bibliothèque de sections pour la partie marketing. Les deux se complètent sans se chevaucher.
Comment intégrer des sections Incubator dans un projet shadcn
L'intégration est directe parce que les deux reposent sur Tailwind et React. Les sections Incubator utilisent des CSS custom properties (var(--color-background), var(--color-accent)) alignées sur les tokens Tailwind v4. Si votre projet utilise Tailwind v3, un mapping rapide des variables suffit.
Exemple concret : la section Hero Cursor Mask produit un effet de masque interactif piloté par la position du curseur. Elle s'installe en copiant le fichier TSX, sans aucune dépendance supplémentaire hors Framer Motion (qui est probablement déjà dans votre projet).
Les scroll animations et les hover effects sont deux catégories particulièrement utiles pour donner du relief à des landing pages qui utilisent shadcn pour tout le reste.
L'approche "primitives + sections"
Le mouvement copy-paste initié par shadcn a eu un effet inattendu : il a normalisé l'idée de posséder son code UI plutôt que de le louer. Les bibliothèques de sections ont suivi la même logique. Résultat, on peut aujourd'hui assembler une landing page complète en combinant shadcn pour la couche applicative et une bibliothèque de sections pour la couche marketing, sans aucune dépendance runtime ajoutée.
C'est une architecture plus saine qu'un framework UI monolithique. Chaque pièce est remplaçable, lisible, et testable séparément.
Si vous démarrez un projet Next.js en 2026, la combinaison shadcn/ui + Incubator couvre la quasi-totalité des besoins d'une landing page SaaS : primitives accessibles d'un côté, sections marketing typées et animées de l'autre. Le catalog complet permet de filtrer par style, industrie et complexité pour trouver les sections qui correspondent à votre projet.