Composants de mise en page
Des composants qui organisent et révèlent le contenu : accordéons et collapsibles avec une animation de hauteur réversible à mi-course, un carrousel en scroll-snap, des panneaux redimensionnables, des zones de défilement avec fondus sur les bords, des boîtes de ratio et des séparateurs.
Les panneaux fermés restent trouvables avec la recherche du navigateur, et rien ne saute quand le contenu se charge.
- AccordionDes titres empilés qui révèlent chacun un panneau, avec un mouvement de hauteur réversible en cours de route et des panneaux qui restent consultables par la recherche une fois fermés.
- Aspect ratioUne boîte qui garde sa forme avant le chargement du média, scintille pendant le chargement, fait apparaître le média en fondu et bascule sur un repli en cas d’échec.
- CarouselDes slides à scroll-snap natif avec inertie au toucher, glisser à la souris, flèches du clavier, points, miniatures et une lecture automatique qui se met en pause au bon moment.
- CollapsibleUn panneau qui s’affiche et se masque avec un mouvement de hauteur réversible en cours de route, sans faire sauter la mise en page.
- ResizableDes panneaux que l’on peut écarter à la main, avec un séparateur discret qui s’éveille au survol, des tailles qui glissent à la réinitialisation ou au repli, et des mises en page persistantes.
- Scroll areaUn défilement natif avec une barre de défilement minimale, des bords qui s’estompent seulement là où il y a plus à voir, et un aperçu facultatif qui coupe le dernier élément en deux.
- SeparatorUn trait fin qui sépare le contenu horizontalement ou verticalement, avec un libellé facultatif et un mode décoratif pour les lignes purement visuelles.
Utilisés dans les blocs Pro
Des blocs pour produits d’IA construits avec ces composants.
- Agent TodosLe plan qu’un agent tient pendant qu’il travaille, une ligne par étape. Gère les étapes en cours, les étapes échouées et les changements de plan en pleine exécution.
- 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.
- Stack TraceUn plantage affiché comme un développeur le lit. Votre code vient en premier, les frames du framework se replient et chaque cause est listée dans l’ordre.
- SubagentsLes exécutions qu’un agent confie à d’autres agents, une ligne par exécution. Gère les exécutions en parallèle, l’arrêt et la relance, et un résumé une fois chacune terminée.
- Test ResultsL’exécution des tests d’un agent, affichée en direct. Les tests arrivent en streaming et se replient en résumé, chaque échec restant ouvert avec son diff.
- 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.