Bibliothèque
Les primitives, rendues par elles-mêmes
Aucun composant de cette page n'est une reproduction : ce sont les primitives du produit. Modifier Card change cette page au même commit, et une variante retirée casse le build ici avant de casser un écran.
Carte
La coque était retapée cent dix fois, avec assez de variations pour qu'aucune ne soit tout à fait la même. overflow-hidden est désormais toujours posé : c'est lui qui empêche la première ligne d'un tableau de déborder du coin arrondi, et l'oubli ne se voit que sur la ligne survolée.
Exposition
Lue au moment où le code lit la valeur, pas au chargement de la carte.
- control1 28462 %
- test78738 %
corps p-4 · p-3 · p-5
pied px-4 py-2
Boutons
Quatre variantes, et pas une de plus. Toutes à px-3.5 py-2, donc trente-six pixels de haut — la même hauteur qu'un champ, pour qu'ils s'alignent dans une rangée sans qu'on y pense.
champ 36 px
alignés
Badges
Trois grammaires de couleur cohabitaient, écrites le même jour : les flags coloraient « actif » en vert, les cohortes coloraient « dynamique » en violet de marque, les alertes coloraient « normale » en vert. Le lecteur devait réapprendre à chaque page ce que la couleur voulait dire.
La couleur ne porte jamais l'information seule : le libellé la dit aussi. C'est la règle d'accessibilité du dépôt, et c'est aussi ce qui rend le badge lisible dans une capture en noir et blanc.
taille 11 px
nowrap
Messages
L'icône se pose sur la première ligne du texte, pas au centre du bloc. Deux des quinze copies inline avaient items-center : sur un message de trois lignes, l'icône atterrit au milieu de nulle part.
items-center
items-start + mt-0.5
Neuf formulaires répétaient le même bloc d'erreur — et pas tout à fait : quatre portaient role="alert", cinq non. La différence est invisible à l'œil et décisive au lecteur d'écran, qui n'annonce l'erreur que dans le premier cas.
icône 16 px
mt-0.5 · shrink-0
rolealert imposé
Tableau
Le défaut d'alignement le plus courant : un en-tête cadré à gauche au-dessus de nombres cadrés à droite. La prop numeric règle les deux d'un coup — c'est l'intérêt d'une primitive plutôt qu'une convention : on ne peut plus n'en faire que la moitié.
| Company | Personnes | Events | Vu |
|---|---|---|---|
| acme | 42 | 1 284 | il y a 3 min |
| beta-corp | 7 | 96 | il y a 2 h |
| globex | 1 | 3 | hier |
numeric tabular
trailingsans tabular
une date n'est pas une colonne à comparer
Carte-lien
Le lien enveloppe toute la carte, pas seulement le titre : une carte dont quatre mots sont cliquables est une cible minuscule, et l'utilisateur clique à côté. Titre et badge s'alignent sur la même ligne de base, ce qu'items-center ne fait pas quand les deux n'ont pas la même taille.
Champs
C'est la primitive qui manquait le plus, et on peut dater le manque : inputClass portait un w-full codé en dur, qui fait s'effondrer une rangée flex. Trois éditeurs ont donc redéclaré chacun leur rowClass, le même jour.
auto → flex-1
hauteur 36 px
input = select
Icônes de répartition
Les trois tableaux voisins du dashboard racontaient trois histoires : des drapeaux pour les pays, des pictogrammes pour les appareils, et pour les sources une pastille grise portant la première lettre — donc le même signe pour Direct et pour Discord. Les systèmes et les navigateurs n'avaient rien du tout. Une seule table couvre désormais les quatre dimensions, et tout ce qui est une marque porte son logo — y compris les six que simple-icons ne distribue plus. Le pictogramme est réservé à ce qui n'a pas d'enseigne. Les couleurs sont recalées pour tenir sur les deux surfaces sans qu'aucune n'ait été choisie à la main.
Sources
- Direct
- Discord
- X
- YouTube
- TikTok
- Bing
- DuckDuckGo
- Yahoo
- Ecosia
- Qwant
- Brave
- GitHub
- Twitch
- Telegram
- Bluesky
- Mastodon
- ChatGPT
- Perplexity
- Claude
Systèmes
- Android
- iOS
- Windows
- macOS
- ChromeOS
- Linux
Navigateurs
- Edge
- Opera
- Samsung Internet
- Firefox
- Chrome
- Safari
contraste 4.08:1
les deux thèmes
Libellés et valeurs
mt-0.5 entre l'intitulé et sa valeur : les deux forment un seul objet. Un écart plus grand les ferait lire comme deux.
- Fraîcheur
- il y a 8 minutes
- Coût du dernier calcul
- 412 ms
- Consommée par
- insights et flags
entre couples gap-3
truncate
État vide
Sobre et sans mascotte : on le croise dix fois par écran, et dix mascottes font du bruit. L'Éclaireuse est réservée aux grands vides qui occupent une page entière.
Aucune instance de ce type.
centré
Ce que ces primitives ne font pas
- Aucune n'accepte de className arbitraire. C'est la porte par laquelle une bibliothèque se vide de son sens : six mois plus tard, la moitié des appels portent une exception et plus rien n'est garanti. Un besoin qui ne rentre pas est une variante à ajouter, discutée une fois.
- Aucune n'est un composant client si elle n'a pas d'état — le rendu serveur reste le défaut du dépôt.
- Aucune n'invente de couleur. Elles ne consomment que les tokens, ce qui leur donne le mode sombre sans une ligne de plus.