GAUGE UI : vos jauges et cadrans SVG en primitives React
⏱️ Temps de lecture estimé : 4 minutes
📌 GAUGE UI est un registre shadcn de primitives SVG pour React : arcs, zones colorées, graduations, aiguilles, anneaux imbriqués. Vous récupérez le code dans votre projet, vous composez le cadran pièce par pièce, et un studio en ligne génère le composant à copier. Aucune librairie de graphiques ne s’invite dans votre bundle.
Le studio, à essayer : https://www.gauge-ui.dev/studio
Vous n’ajoutez pas une dépendance, vous récupérez des fichiers. npx shadcn@latest add https://www.gauge-ui.dev/r/gauge.json dépose un dossier components/gauge/ dans votre dépôt, et le manifeste ne déclare qu’une dépendance de registre, le helper cn de shadcn. Hors React, le composant n’a rien à charger.
La liste est plus longue qu’elle n’en a l’air. GaugeArc se remplit depuis from jusqu’à la valeur, ou à l’envers avec reverse. GaugeStack découpe cet arc en parts qui balayent ensemble, pondérées par weight ou calées sur des seuils fixes : c’est ainsi qu’un anneau de mémoire garde le filaire, les applications et le cache en proportion image par image. GaugeZones pose des bandes colorées entre des coupures, GaugeTicks et GaugeMarks les graduations, GaugeTickLabels les chiffres, la rose des vents ou l’heure. GaugeNeedle accepte quatre silhouettes — trait, pointeur, losange de compas, flèche.
Trois détails que j’ai aimés tout de suite. L’aiguille accepte un gap qui évide le centre par un masque, pour loger la valeur entre ses deux moitiés. GaugeDot pose un disque sur l’arc, avec un halo pour le décaler de la bande. Et wrap traite le domaine comme circulaire : une rose des vents qui franchit le nord ne refait pas le tour par l’arrière.
L’animation est là aussi, et sans librairie. transition sur visualDuration, bounce, ou la physique brute (stiffness, damping, mass). Le tween accepte une courbe nommée, un tableau cubic-bezier ou votre propre fonction. Si la personne a demandé moins de mouvement, le raccord se cale net.
Le studio n’est pas une démo, c’est l’outil. On y règle min, max, angles, padding, largeur d’arc, couleur par zone, aiguille, disque, texte — puis on copie le composant généré. Les 26 préréglages couvrent le compteur de voiture, la jauge de débit, le thermostat, l’anneau de progression, la boussole, l’horloge, la montre chrono, et les deux tableaux de bord du site, celui du serveur et celui du poste de pilotage. Sur la page d’accueil, quatre prompts sont prêts à être collés dans un agent, dont celui-ci : « build a monochrome speedometer from 0 to 240 km/h with a single red zone ».
GaugeInset dessine un cadran entier dans un autre, avec son propre domaine et une scale qui rétrécit l’ensemble d’un coup, traits et texte compris. GaugeControl va plus loin et enveloppe un cadran dans un slider accessible : on fait tourner la valeur autour de l’anneau à la souris, ou au clavier.
- 📦 Le code atterrit dans
components/gauge/, sans dépendance runtime hors React - 🧩 14 primitives combinables : arc, stack, zones, graduations, aiguille, texte, anneaux
- 🎚 Le studio génère le composant, vous n’avez plus qu’à le copier dans votre projet
- 🌀
transitionanime tout d’un bloc, et cale net si mouvement réduit - ♿
GaugeControltransforme un cadran en slider accessible au clavier
Mon avis : c’est la bonne réponse à un problème que les librairies de graphiques traitent mal. Un composant « jauge » fermé est rapide le premier jour et impossible à ajuster le deuxième, puisque tout ce qui n’était pas prévu reste inaccessible. Ici, chaque élément est une pièce que vous possédez, réordonnez ou supprimez. Le revers, c’est qu’il faut accepter de raisonner en coordonnées polaires et lire les primitives avant de savoir d’où vient un pixel mal placé. Et le projet est jeune — créé fin septembre, treize étoiles, MIT — donc je l’utiliserais sans hésiter pour un tableau de bord interne, et je mettrais le repo de côté avant de le glisser dans une interface client.
Sources
