Kit UI

Une personne en cinq tailles, ronde ou carrée, avec une pastille d’état facultative. À défaut d’image, une initiale.

Un petit libellé qui porte un sens plutôt qu’une teinte : neutre, accent, surlignage ou contour.

Quatre fonds, cinq tailles, avec ou sans icône. Ombre, angle et appui appartiennent à la palette.

Des boutons fondus en une barre. La palette décide de l’angle, donc seuls les deux bouts le portent.

Un menu sur un bouton, ouvert par le navigateur via Tailwind Plus Elements et non par un script à nous.

Un message sur place, dans l’un de quatre tons, avec des actions en dessous si besoin.

Ce que dit une liste qui n’a encore rien. En pointillés quand on pourrait y déposer quelque chose.

Un panneau dont toute la raison d’être est la commande à son extrémité.

La case native, peinte par accent-color, avec une étiquette et une aide facultative.

Un champ texte avec datalist : on tape pour filtrer, ou on ouvre la liste. Sans script, et dégradé en champ simple.

Une ou deux colonnes de champs dans un panneau, les actions sur un filet en pied.

Un champ étiqueté, avec aide, erreur et complément en tête ou en queue.

Un choix parmi plusieurs, en liste de pastilles ou en panneau par option.

Un select natif. Le listbox du kit demande un script et un popover pour ce que le navigateur fait déjà.

La colonne étroite de champs, dans un panneau ou à même la page.

Le même appareillage que le champ, avec la place d’un paragraphe.

Une case qui dessine un rail : il part avec le formulaire et garde le clavier que le navigateur lui donne.

Une grille de mois, calculée et non recopiée, avec un jour choisi et des jours marqués.

Des termes et des valeurs en lignes, rayées si on veut.

Un chiffre, son libellé et sa variation. Le chiffre prend le pas d’affichage de la palette.

Une chronologie, le filet passant derrière les marqueurs plutôt qu’entre les lignes.

Des cartes sur deux, trois ou quatre colonnes, chacune avec un avatar.

Des lignes dans un panneau, ou un panneau par ligne.

Colonnes et lignes avec bandeau d’en‑tête, titre et action, défilant de côté s’il le faut.

Le chemin de retour, la dernière entrée étant la page elle‑même.

Le champ de recherche et ses résultats, montrés ouverts — un dialogue fermé ne montre rien.

La barre seule, pour une page qui n’est pas la coque de l’application.

Précédent et suivant, avec les numéros entre eux ou un simple compte.

Un rail rempli, ou la même valeur en une rangée d’étapes.

La colonne à gauche de cette page. Deux fonds, icônes et compteurs facultatifs, et elle trouve seule la ligne courante.

Une rangée de sections, soulignées ou en pastilles.

La navigation latérale sans le panneau, pour une colonne qui a déjà une surface.

Le panneau du dialogue épinglé à un bord, sur toute la hauteur. Dialogue natif, montré ici sur place.

Un dialogue natif : couche supérieure, voile, touche Échap et piège de focus sont au navigateur.

Un panneau soulevé, pour le coin où une région live les empile.

Le bandeau d’un panneau, avec le filet qui le sépare du corps.

Le titre d’une page, son fil d’Ariane, ses métadonnées et ses actions.

Un filet sous un titre, avec une action ou une rangée d’onglets dessus.