Bibliothèque de composants2024

Étude de cas

Shuriken UI

Une bibliothèque de composants open source pour Nuxt et Tailwind. La page de documentation défend la bibliothèque de la seule manière honnête : en l’affichant — une vingtaine de widgets vivants dès le premier scroll, sans illustration ni marketing.

Bibliothèque de composantsDesign systemInterface de documentation

ClientOpen source

Année2024

RôleDesign UI

DuréeEn cours

Demander un audit ↗Parler d’un projet similaire

La page de docs : la promesse, puis la vitrine elle-même — cartes, graphiques, formulaires, tableaux et annuaires dans une seule mosaïque.

Détails du projet

TypeBibliothèque de composants · site de documentation

SecteurOpen source · outils pour développeurs

ClientProjet open source

RôleDesign UI et spécifications de composants

Année2024

DuréeEn cours

StatutPublic · v4 bêta

LivrablesJeu de composants, vitrine à onglets, thèmes clair et sombre

Polices

InterJetBrains Mono

Couleurs

Réalisé avec

Nuxt

Vue

TypeScript

Tailwind CSS

Figma

Chaque composant est un contrat de thème Tailwind plutôt qu’un style figé : on le restyle en changeant les tokens, pas en écrasant du CSS.

Le besoin

Une bibliothèque qui doit faire ses preuves en un écran.

Un développeur choisit une bibliothèque en une minute. Il survole la page, cherche les composants, et juge la qualité sur des détails — anneaux de focus, lignes vides, un graphique à une taille ingrate, un mode sombre traité après coup. Une page qui décrit la bibliothèque au lieu de l’afficher perd cette minute, et les composants devaient survivre au fait d’être posés côte à côte, sans rien derrière quoi se cacher.

Ce que j’ai fait

Argument

Quatre lignes de promesse, deux boutons, puis la vitrine. Tout ce qu’une landing page ajoute d’habitude — témoignages, logos, grilles de fonctionnalités — a été coupé.

Vitrine

Six onglets de compositions réelles : widgets, dashboard, messagerie, kanban, réglages, musique. Chacun est un écran assemblé, pas une galerie, parce que la question est de savoir si les pièces tiennent ensemble.

Densité

Une mosaïque de cartes sur trois largeurs, pour qu’un bloc de chiffres, un graphique, un formulaire et un tableau apparaissent à la taille où ils seront vraiment utilisés.

Retenue

Monochrome par choix. Sans couleur d’accent sur laquelle s’appuyer, la hiérarchie vient du poids, de l’espacement et des filets — et tout composant qui ne fonctionnait qu’en couleur a été corrigé.

États

Champs remplis, pagination, interrupteurs, sélecteurs vides et badges en ligne sont dessinés dans la vitrine : les états sont documentés par le fait d’être visibles.

Ce qui a été livré

3 captures

Shuriken UI — l’onglet vitrine musique — Musique : barre latérale, onglets, cartes de couverture et lignes de titres — tout en monochrome, tout issu du même jeu.

Shuriken UI — l’onglet vitrine kanban — Kanban : cartes de tâches, compteurs de colonnes, et un état vide dessiné avec autant de soin que l’état plein.

Ce que ça change

6onglets de vitrine — widgets, dashboard, messagerie, kanban, réglages, musique

0illustration sur la page ; les composants sont l’image

2thèmes issus d’un seul jeu de tokens, dessinés avant la sortie

L’étape suivante

Vous publiez une bibliothèque de composants ou un kit interne ? Je dessine le jeu et la page qui le prouve, dans la même passe.

Design system · à partir de 2 900 $ · 4–6 semaines

Parler d’un projet similaire ↗

D’autres projets

Toutes les réalisations ↗

Koder UInterface produit

VirtuozoSite web + produit