SHADCN SPACE : composer des interfaces React sans repartir de zéro
📌 SHADCN SPACE est une collection de blocs, composants et templates Shadcn UI à copier, installer ou adapter dans des applications React et Next.js.
Le site répond à une frustration très concrète : shadcn/ui donne des primitives solides, mais construire une interface complète demande encore de relier beaucoup de pièces. Shadcn Space propose des sections déjà composées pour les pages marketing, les dashboards, l’e-commerce, l’authentification et les applications SaaS. Vous partez d’un bloc lisible, récupérez le code, puis l’adaptez à votre produit au lieu de chercher l’inspiration dans une galerie d’images.
La collection annoncée regroupe plus de 350 blocs, une dizaine de templates, plus de 350 composants et une vingtaine de pages. On y trouve des shells de dashboard, des tableaux, des statistiques, des sidebars, des formulaires, des sections de pricing, des portfolios et des pages de connexion. Le catalogue est assez large pour couvrir la structure d’un produit, pas seulement son hero.
L’intérêt principal est la continuité entre design et développement. Shadcn Space s’appuie sur React, Next.js, TypeScript, Tailwind CSS et les conventions CVA de shadcn/ui. Les primitives peuvent fonctionner avec Radix UI ou Base UI. Le projet fournit aussi un kit Figma, ce qui donne une chance de conserver les mêmes composants entre la maquette et le code, plutôt que de reconstruire chaque détail à la main.
Le workflow ne s’arrête pas au copier-coller. Une CLI permet d’installer et de gérer les composants, blocs et templates dans un projet existant. Le serveur MCP peut quant à lui être utilisé depuis l’IDE pour explorer ou générer des layouts en tenant compte de la structure du code. Les variantes animées basées sur Motion restent optionnelles, ce qui évite de transformer chaque interface en démonstration de motion design.
Quelques usages visibles :
- 🧱 Assembler une landing page avec des sections prêtes à personnaliser
- 📊 Poser rapidement la structure d’un dashboard ou d’une application SaaS
- 🧩 Installer des composants via la CLI dans un projet shadcn/ui
- 🎨 Maintenir une continuité entre le kit Figma et le code React
- 🤖 Explorer des layouts depuis l’IDE avec le serveur MCP
- ✨ Ajouter des variantes animées sans réécrire toute l’interface
Je trouve cette approche plus saine que les bibliothèques qui vendent uniquement des écrans parfaits en capture. La valeur de Shadcn Space dépend du code que l’on peut reprendre et maintenir. Une grille de cartes ou un dashboard n’est intéressant que si ses composants restent compréhensibles après l’intégration. Le fait de proposer Base UI et Radix UI, ainsi qu’un workflow CLI, va dans ce sens.
Il faut néanmoins garder un peu de recul sur les chiffres du catalogue. Beaucoup de variantes ne remplacent pas les décisions produit, l’accessibilité testée dans le contexte réel ou le travail de connexion avec l’authentification, les données et les états vides. Shadcn Space fournit une base d’interface ; il ne livre pas une application finie. Les ressources gratuites et open source cohabitent avec des templates, blocs avancés et kits Figma Pro, avec des conditions différentes selon le plan.
SHADCN SPACE me semble donc particulièrement adapté aux équipes qui veulent aller vite sans enfermer leur interface dans un framework propriétaire. Vous gagnez un point de départ visuel et du code que vous pouvez modifier. Le vrai test ne sera pas la beauté de la page de démonstration, mais la facilité avec laquelle un composant survivra à trois mois d’évolution produit. C’est précisément là que cette collection, avec sa structure et ses outils de développement, peut faire la différence.
