Composants d’affichage de données
Des composants pour afficher l’information : une table de données avec tri, sélection et colonnes épinglées, des graphiques Recharts qui suivent le thème, une arborescence, des cartes, des éléments de liste, des badges, des avatars, des touches et des nombres qui défilent vers leur nouvelle valeur.
Ils gèrent aussi les cas denses, avec des en-têtes de tableau collants, des colonnes épinglées et la navigation au clavier entre les points d’un graphique.
- AvatarDes photos d’utilisateurs avec initiales en repli, badges de statut et groupes empilés qui se réduisent en compteur.
- BadgeDes libellés de statut avec pastilles colorées, des tags amovibles qui se referment en glissant et des compteurs qui défilent vers leur nouvelle valeur.
- CardUne surface pour regrouper du contenu, avec trois variantes, médias bord à bord, rayons concentriques et liens sur toute la carte.
- ChartDes graphiques Recharts aux couleurs du thème, avec une infobulle et une légende qui lisent leurs libellés depuis une seule config, et une navigation au clavier avec anneau de focus visible.
- Data tableUn tableau pour de vraies données, avec tri, recherche, sélection de lignes, colonnes épinglées, en-tête fixe et pagination.
- ItemUne ligne de média, de texte et d’actions pour les listes, réglages et sélecteurs, avec une surface groupée et une surbrillance de survol qui glisse d’une ligne à l’autre.
- KbdDes keycaps pour les raccourcis qui affichent les bons symboles sur chaque plateforme, se lisent correctement à voix haute et s’enfoncent comme de vraies touches.
- Number flowDes nombres animés où seuls les chiffres modifiés tournent, avec n’importe quel format Intl et n’importe quelle locale.
- TableUn tableau responsive avec un style de surface, des cellules à retour à la ligne ou compactes, des en-têtes fixes, des colonnes épinglées et des indications de défilement.
- TreeDes lignes imbriquées et dépliables pour les fichiers et les hiérarchies, avec guides d'indentation, lignes de connexion, cases à cocher en cascade, saisie prédictive et prise en charge complète du clavier.
Utilisés dans les blocs Pro
Des blocs pour produits d’IA construits avec ces composants.
- Chat SidebarLa barre latérale d’une app de chat, avec chats épinglés, projets et récents. Gère le renommage sur place, la suppression avec annulation et les chats qui répondent encore.
- Diff ReviewUne revue des modifications de fichiers d’un agent avant qu’elles n’atterrissent. Gère l’acceptation ou le rejet par changement, les commentaires renvoyés à l’agent et les modifications encore en streaming.
- ThinkingLa vue de réflexion d’un chat IA. Un libellé en direct suit chaque étape, les recherches et les sources se replient en piste et les citations accompagnent la réponse.
- ProfileLa section Profil des réglages d’un produit IA. Gère le recadrage de photo, un nom d’utilisateur vérifié à la saisie et les changements d’e-mail confirmés par code.
- SettingsLa page des réglages d’un produit IA. Gère une barre d’enregistrement qui n’apparaît qu’en cas de changement, les erreurs de champ et les états de chargement.
- TeamLa page d’équipe des réglages d’espace de travail d’un produit IA. Gère les sièges épuisés, les invitations en attente et le transfert de propriété avec confirmation saisie.