UI/UX

MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react.

Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ».

UI SFX organise 78 événements d’interface en 12 univers sonores, pour comparer le caractère d’un même feedback sans changer sa signification. La bibliothèque rassemble 72 sons ponctuels et six boucles, avec des aperçus interactifs pour les tester dans des parcours de produit.

Le package s’installe avec npm install uisfx et propose une API TypeScript pour déclencher les sons ou arrêter une boucle quand l’état associé se termine. Les fichiers audio sont sous licence CC0 et le runtime sous MIT ; cette séparation facilite leur réutilisation dans des projets web comme natifs.

next-themes applique le thème dès le chargement, prend en compte la préférence système et synchronise le choix entre les onglets. Son ThemeProvider fonctionne avec l’App Router comme avec pages/, et expose un hook pour changer de thème ou gérer plusieurs variantes.

Le point à intégrer dans l’architecture : le thème stocké dans le navigateur est inconnu au rendu serveur. L’interface qui dépend de useTheme doit donc attendre le montage côté client pour éviter les erreurs d’hydratation. La bibliothèque met aussi à jour l’attribut de <html> — avec suppressHydrationWarning recommandé — et reste indépendante de la solution CSS utilisée.

All UtilityCSS rassemble des ressources Tailwind CSS gratuites et payantes, classées par type, usage et technologie. Le catalogue présente notamment des composants copiables, des templates, des starters Next.js et des outils de gestion des couleurs, dont plusieurs prennent en charge les formats OKLCH de Tailwind CSS v4.

Le filtrage facilite la recherche de briques adaptées à un projet, mais le répertoire ne garantit pas à lui seul leur qualité ou leur accessibilité : la page conseille de vérifier ces points auprès de chaque ressource.

Fontastic Space compare des Google Fonts côte à côte, avec superposition anatomique, métriques OpenType et scores de compatibilité. L’exemple Playfair Display + DM Sans met en regard hauteur d’x, hauteur des capitales et largeur des chaînes, puis propose des règles CSS prêtes à reprendre.

Les scores s’appuient sur plusieurs cadres d’analyse typographique, mais restent un repère : l’outil permet aussi de vérifier visuellement le rendu dans un paragraphe ou une bannière avant de choisir une paire.

React Bits 2.0 annonce 216 composants animés : 104 ont été reconstruits ou repensés, et plus de 20 ont supprimé des dépendances supplémentaires. Les démos ajoutent presets et interactions au clic, tandis que Background Studio, Shape Magic et Texture Lab ont été reconstruits pour ajuster des effets en direct et exporter leurs résultats.

La mise à jour refond aussi la documentation et la page d’accueil, qui utiliserait environ cinq fois moins de JavaScript. Le catalogue facilite le prototypage d’interfaces expressives ; la variété des animations invite toutefois à évaluer leur coût et leurs dépendances avant de les intégrer à un produit.

La version 1.22.0 de React Aria introduit le composant Sheet, une surcouche glissable qui s’appuie sur les gestes natifs de scroll pour offrir des transitions fluides et tactiles, idéales pour les panneaux mobiles ou les notifications. Cette release apporte aussi la prise en charge de Turbopack pour l’optimisation des locales, une meilleure gestion des widgets interactifs comme le clavier virtuel, et plusieurs correctifs sur les collections, ComboBox et formulaires.

Navbar Gallery propose une sélection organisée de barres de navigation issues de sites web variés, couvrant des modèles statiques, dropdown, mega menus, sidebars, barres de recherche et annonces. Chaque exemple est consultable par type et renvoie vers le site source, facilitant la veille ou l’inspiration pour concevoir une navigation adaptée à différents contextes d’interface. Une ressource utile pour comparer rapidement des patterns concrets sans se perdre dans des galeries généralistes.

Footer Design propose une galerie organisée de pieds de page de sites web issus de projets variés, avec un tri par style et type. Cette ressource permet de parcourir rapidement des exemples concrets pour s’inspirer lors de la conception ou de la refonte d’interfaces. On y trouve des approches typographiques, illustrées, en grille ou animées, utiles pour enrichir sa veille UI/UX.

Supahero propose une collection organisée de sections hero issues de sites web variés, illustrant des approches de design attractives pour l’en-tête d’une page. Chaque exemple met en avant la diversité des styles, des animations et des compositions, facilitant l’inspiration ou la veille pour la conception d’interfaces. L’absence de filtres avancés limite la recherche, mais la navigation rapide permet d’explorer de nombreux cas concrets.

3dicons.co propose plus de 1400 icônes 3D en open source, utilisables sans attribution pour des projets personnels ou commerciaux. L’interface permet de personnaliser la couleur, l’angle et de télécharger chaque icône individuellement ou en lot, avec des collections thématiques et une intégration Figma. La licence CC0 facilite l’intégration dans tout type d’application ou de design system.

Cette documentation présente plus de 190 composants graphiques prêts à l’emploi pour intégrer des effets WebGPU dans React, Vue, Svelte, Solid et JavaScript natif. Les composants couvrent une large palette : textures, formes, matériaux, filtres, distorsions, transitions, flous, ajustements et effets interactifs, chacun avec une description concrète de son rendu et de ses paramètres. Une ressource à explorer pour enrichir rapidement une interface avec des effets visuels avancés sans écrire de shader bas-niveau.

Prompt Motion est une galerie de vidéos de mouvement accompagnées des prompts et des skills utilisés pour les produire avec Claude Opus 5.5. On peut parcourir des exemples par familles — interface produit, graphiques, typographie ou particules — puis adapter les prompts à un projet, ce qui en fait une source d’expérimentation pour le motion design assisté par IA.

Sh​​adcn Admin Kit fournit des blocs open source pour créer des outils internes, tableaux de bord et applications B2B en React. Il préconfigure notamment tables de données, formulaires, authentification, recherche et internationalisation, avec des capacités avancées comme le CRUD généré, les permissions, les actions groupées et l’annulation.

Penpot est une plateforme de conception et de prototypage open source qui relie les workflows de design, de code et d’IA. Elle propose des interfaces responsives, des composants et tokens partagés, ainsi que des formats ouverts comme CSS, HTML, SVG et JSON pour faciliter le passage entre maquettes et implémentation.

Transitions Pro réunit plus de 43 transitions prêtes pour des applications web en React, TypeScript et Next.js. Les extraits copiables s’accompagnent de skills pour les agents et d’outils de création ou d’audit du mouvement, ce qui aide à passer d’une animation isolée à un système d’interactions cohérent.