Design · 4 min
Composants
Quinze blocs à copier, une poignée de composants qui portent un comportement, et aucune bibliothèque configurable.
Deux choses vivent dans src/components. Les blocs sont des sections de
page entières que vous copiez et modifiez. Les composants sont les quelques
petites pièces qui portent un comportement plutôt que des styles, et ceux-là,
vous les importez.
Ni les uns ni les autres ne forment une bibliothèque configurable. Pas de prop
variant, pas d'objet de thème : le jour où un bloc demande six props pour
avoir la bonne allure, modifier le fichier aurait été plus rapide.
Les blocs
Quinze, dans src/components/blocks. Ouvrez /blocks dans votre application
pour les voir tous rendus avec du contenu d'exemple, trouvez le plus proche,
copiez le fichier dans votre page et modifiez-le. Ils lisent les mêmes tokens de
design que le reste, ils arrivent donc à vos couleurs.
| Bloc | Pour |
|---|---|
Hero | Le premier écran : surtitre, titre, deux actions |
LogoCloud | La rangée de noms sous le hero |
FeatureGrid | Trois à six choses que fait votre produit |
Steps | Un « comment ça marche » numéroté |
Stats | Quatre chiffres qui méritent d'être dits |
Pricing | Des cartes de plans, une mise en avant |
Faq | Du <details> natif, donc utilisable avant l'hydratation |
Testimonials | Des citations avec leur attribution |
Cta | La demande finale |
Footer | Colonnes de liens et mentions |
Banner | Un bandeau qu'on peut fermer, retenu en local storage |
EmptyState | Le premier écran d'un tableau sans lignes |
DataTable | Un tableau sur ordinateur, des cartes sur téléphone |
SettingsForm | Un formulaire avec erreurs par champ et état d'envoi |
Pagination | Précédent et suivant, en liens, pour qu'une page soit une URL |
Les composants
Onze, et la plupart existent parce qu'ils portent un comportement, pas parce qu'ils portent des styles.
Les deux que vous réutiliserez
ui/Card est la forme du panneau : bordure sur une surface surélevée,
espacement cohérent, titre et chapeau facultatifs. Tout dans le tableau de bord
en est un.
<Card title="Facturation" lead="Vos achats et les clés qu'ils ont générées.">
<Receipts rows={orders} />
</Card>ui/Field est un champ étiqueté, avec son indication et son erreur au bon
endroit et le label réellement associé au contrôle, ce que tout le monde saute.
<Field label="Nom d'utilisateur GitHub" note="Les invitations vont à ce compte.">
<input name="github_login" />
</Field>Ceux qui portent un comportement
| Composant | Ce qu'il sait |
|---|---|
SignInForm | L'aller-retour du lien magique et ses trois états |
SignOutButton | Rafraîchir avant de pousser, pour que le serveur voie le cookie effacé |
LocaleSwitcher | Écrit le cookie que le serveur lira au rendu suivant |
CopyField | Le presse-papiers, plus la confirmation que le clic est censé donner |
Logo, Icons | Du SVG au trait, dimensionné en em pour suivre le texte |
Pourquoi pas davantage
Une base de code qui livre deux cents composants livre deux cents opinions que vous devrez contredire. Ceux qui sont ici sont ceux qui seraient sinon copiés-collés avec un bug dans la troisième copie.
Quand vous aurez besoin d'une vraie primitive, une boîte de dialogue avec piège de focus, une combobox, un sélecteur de date, installez Radix ou Base UI et habillez-les avec vos tokens. N'écrivez pas votre propre dialogue. La gestion accessible du focus est réellement difficile et entièrement résolue.
En ajouter un
Composant serveur par défaut. Ajoutez "use client" seulement s'il vous faut de
l'état, un effet ou un gestionnaire d'événement, et poussez-le aussi bas que
possible dans l'arbre : un composant client rend client tout ce qu'il contient.
Une erreur ou un manque sur cette page ? Dites-le-nous.