Blocks.so : des blocs React et Tailwind CSS prêts à copier-coller
⏱️ Temps de lecture estimé : 4 minutes
📌 BLOCKS.SO est une collection open source de blocs React et Tailwind CSS modernes, gratuits à vie, copier-coller dans n’importe quel framework React.
Construire une interface moderne prend du temps. Il faut créer des composants réutilisables, gérer les états, assurer l’accessibilité, et tout rendre cohérent visuellement. Blocks.so propose une alternative directe : des blocs pré-construits, testés, accessibles, prêts à être intégrés. Le projet est créé par Ephraim Duncan et utilise Next.js, React, Tailwind CSS, Server Components, Radix UI et shadcn/ui comme base technique.
La collection contient aujourd’hui 46 blocs répartis en 7 catégories : Dialogs (12 blocs), File Upload (5 blocs), Form Layout (5 blocs), Grid List (3 blocs), Login and Signup (9 blocs), Stats (10 blocs) et Sidebar (2 blocs). Chaque bloc est conçu pour être moderne, propre et immédiatement utilisable. On copie, on colle, ça marche.
- 🎨 Blocs modernes et propres avec Tailwind CSS
- 📦 Compatible avec tous les frameworks React (Next.js, Remix, Vite+React, etc.)
- 🔓 Open source et gratuit à vie
- ♿ Accessible via Radix UI et shadcn/ui
- 🚀 Server Components ready (Next.js App Router)
- 📋 Copy-paste : pas d’installation npm, pas de dépendances complexes
- 🎯 Composants complets : Dialogs, Forms, Login, Stats, Sidebar, etc.
- 💻 Code inspectable et modifiable
L’approche est radicalement simple. Pas de CLI, pas d’installation complexe, pas de nouvelles dépendances à gérer. On navigue sur blocks.so, on trouve le bloc qui correspond à son besoin, on copie le code, on le colle dans son projet. C’est particulièrement efficace pour les prototypes, les MVP, ou quand on veut accélérer le développement sans sacrifier la qualité visuelle.
Les blocs utilisent Radix UI et shadcn/ui comme base, ce qui garantit une accessibilité native et des composants éprouvés. Radix UI fournit les primitives non stylées accessibles, shadcn/ui ajoute le styling Tailwind, et Blocks.assemble le tout en composants complets. Le résultat est à la fois beau et fonctionnel, sans avoir à réinventer la roue.
Côté technique, les blocs sont conçus pour fonctionner avec Server Components de Next.js. Cela permet d’optimiser les performances en déplaçant la logique côté serveur quand c’est possible, tout en gardant l’interactivité nécessaire via Client Components quand c’est requis. Les blocs sont suffisamment modulaires pour s’adapter à différentes architectures.
Le projet est en version alpha (v0.0.0-alpha au moment du tweet de décembre 2025), mais déjà utilisable. Les 46 blocs couvrent les cas d’usage les plus courants : modals, formulaires d’inscription, tableaux de bord, uploads de fichiers, statistiques, sidebars de navigation. Chaque bloc peut être personnalisé en modifiant le Tailwind classes ou la structure React.
Blocks.so s’adresse aux développeurs qui veulent aller vite sans compromis sur la qualité. Au lieu de passer des heures à créer un modal ou un formulaire d’inscription, on copie un bloc existant, on l’adapte à ses couleurs et son contenu, et on passe à la suite. C’est particulièrement pertinent pour les projets qui utilisent déjà Tailwind CSS et React, car l’intégration est transparente.
Le code est entièrement open source, ce qui permet de comprendre comment chaque bloc fonctionne, de le modifier selon ses besoins, ou même d’apprendre des patterns utilisés. C’est aussi une ressource pédagogique pour voir comment combiner React, Tailwind et Radix UI de manière efficace.
Au final, Blocks.so est la boîte à outils qui manque aux développeurs React : des composants prêts à l’emploi, libres de droits, maintenus, et qui respectent les standards modernes d’accessibilité et de performance.
À retenir : Blocks.so offre 46 blocs React/Tailwind CSS gratuits et open source. Compatible avec tous les frameworks React, accès par copier-coller. Accès garanti via Radix UI et shadcn/ui.
