Ressources design3 min de lecture
Les 13 sites derrière mes composants React et mon inspiration design
Ma liste de travail, avec captures d'écran — où je trouve du code de composants prêt à livrer, l'inspiration de sites complets, les références de blocs uniques et les idées de mouvement. Organisée en carte de recherche, pas en dépotoir de favoris.
Les dossiers de favoris, c'est là que le goût va mourir. Ce qui fonctionne, c'est une carte de recherche : j'ai besoin de X, donc j'ouvre Y — une destination par besoin. Voici la mienne, captures d'écran incluses, dans les catégories exactes où je l'utilise. La règle sans éclat qui la rend précieuse : pour le code, vérifier la licence; pour l'inspiration, voler le principe, jamais les pixels.
Du code de composants prêt à livrer
shadcn/ui (ui.shadcn.com) — la fondation. Des composants à copier dans le projet, bâtis sur les primitives accessibles Radix : vous possédez le code dès qu'il entre dans votre dépôt. Tout le reste de cette section le présuppose.
React Bits (reactbits.dev) — composants animés et créatifs : effets de texte, arrière-plans, cartes interactives. MIT avec Commons Clause — libre en travail client, interdiction de revendre les composants eux-mêmes. Deux d'entre eux tournent sur ce site même, adaptés à nos jetons.
blocks.so (blocks.so) — blocs d'application gratuits à copier-coller selon les conventions shadcn : formulaires, écrans d'authentification, tableaux, barres latérales. Mon premier arrêt quand un écran d'application doit exister avant ce soir.
21st.dev (21st.dev) — un registre communautaire interrogeable de composants de style shadcn, avec de la génération IA par-dessus. Cherchez-y avant d'écrire quoi que ce soit de nouveau à la main; quelqu'un a probablement déjà construit le widget.
Kibo UI (kibo-ui.com) — l'artillerie lourde : diagrammes de Gantt, tableaux Kanban, éditeurs, tableaux avancés. Gratuit, installable par le CLI shadcn. Ce sont les composants qu'on ne devrait presque jamais construire de zéro.
SmoothUI (smoothui.dev) — composants animés basés sur Motion et micro-interactions, compatibles avec le registre shadcn. Quand un écran fonctionne mais semble mort, c'est le catalogue.
Inspiration de sites complets
Landing Love (landing.love) — des milliers de pages d'atterrissage enregistrées en vidéo pleine page, filtrables par GSAP, WebGL, Three.js. La vidéo compte : le mouvement est la partie sur laquelle une capture statique ment.
Saaspo (saaspo.com) — design web SaaS, filtrable par type de page. Quand un client a besoin d'une page de tarifs, j'étudie dix grandes pages de tarifs, pas dix grandes pages d'accueil.
Galeries de blocs uniques
Navbar Gallery (navbar.gallery) — uniquement la navigation : barres collantes, méga-menus, barres latérales. La portée parfaite pour le bloc dont chaque site a besoin et que la plupart ratent.
CTA Gallery (cta.gallery) — appels à l'action, blocs d'inscription et boîtes d'infolettre par industrie. Le dernier bloc que les visiteurs voient avant de décider — il mérite sa propre bibliothèque de références.
Mouvement et détail
60fps.design (60fps.design) — un fil de mouvement d'interface dont il vaut la peine de copier le rythme : durées, courbes d'accélération, chorégraphie.
Design Spells (designspells.com) — des détails enchanteurs pris un à la fois, chacun avec le pourquoi : easter eggs, transitions, états vides. L'endroit où trouver la touche qui rend une interface mémorable.
Interfaces de vrais produits
Refero (refero.design) — des écrans de produits réellement livrés, filtrables par type de page, parcours et patron UX. Les galeries marketing montrent ce qui gagne des prix; Refero montre ce dans quoi les utilisateurs vivent vraiment — pages de réglages, intégration, facturation.
Comment utiliser une liste comme celle-ci
- Entrez avec une seule question — une barre de navigation, un tableau de tarifs, un état vide. Naviguer sans question, c'est du divertissement.
- Rassemblez trois exemples, puis écrivez en une phrase ce qu'ils partagent. Cette phrase est le principe transférable; les captures n'étaient que des preuves.
- Fermez l'onglet avant de construire. Travailler avec une référence ouverte transforme l'inspiration en copie, et un design copié s'ajuste toujours mieux au contenu de l'original qu'au vôtre.
Pour les icônes, polices, photos et ressources 3D, le guide compagnon sur les ressources design gratuites couvre les sources aux licences vérifiées.
Recevez le prochain guide par courriel
Un court courriel quand un nouveau guide paraît. Pas de bruit, pas de pourriel, désabonnement en tout temps.