Layout-Komponenten
Komponenten, die Inhalte anordnen und aufdecken: Accordions und Collapsibles mit Höhenanimation, die sich mittendrin umkehren lässt, ein Scroll-Snap-Karussell, größenveränderbare geteilte Panels, Scrollbereiche mit Randverläufen, Seitenverhältnis-Boxen und Trenner.
Geschlossene Panels bleiben mit der Suche des Browsers auffindbar, und nichts springt, wenn Inhalte nachladen.
- AccordionGestapelte Überschriften, die jeweils ein Panel aufklappen, mit einer Höhenbewegung, die sich mittendrin umkehren lässt, und Panels, die auch geschlossen durchsuchbar bleiben.
- Aspect ratioEine Box, die ihre Form behält, bevor Medien geladen sind, beim Laden schimmert, das Medium einblendet und bei einem Fehler auf einen Fallback zurückfällt.
- CarouselNative Scroll-Snap-Slides mit Momentum auf Touch, Maus-Ziehen, Pfeiltasten, Punkten, Thumbnails und einem Autoplay, das pausiert, wenn es soll.
- CollapsibleEin Panel, das mit einer Höhenbewegung ein- und ausgeblendet wird, die sich mittendrin umkehren lässt, ohne das Layout springen zu lassen.
- ResizablePanels, die du auseinanderziehen kannst, mit einem dezenten Trenner, der beim Hover aufwacht, Größen, die beim Zurücksetzen oder Einklappen gleiten, und Layouts, die erhalten bleiben.
- Scroll areaNatives Scrollen mit minimaler Scrollbar, Kanten, die nur dort ausblenden, wo es mehr zu sehen gibt, und einem optionalen Anschnitt, der das letzte Element halbiert.
- SeparatorEine Haarlinie, die Inhalte horizontal oder vertikal trennt, mit optionalem Label und einem dekorativen Modus für rein visuelle Linien.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- Agent TodosDer Plan, den ein Agent während der Arbeit führt, eine Zeile pro Schritt. Deckt laufende Schritte, fehlgeschlagene Schritte und Planänderungen mitten im Lauf ab.
- Chat SidebarDie Seitenleiste einer Chat-App mit angehefteten Chats, Projekten und Verlauf. Deckt Umbenennen vor Ort, Löschen mit Rückgängig und noch antwortende Chats ab.
- Stack TraceEin Absturz, gezeigt wie Entwickler ihn lesen. Dein Code kommt zuerst, Framework-Frames klappen zu und jede Ursache steht der Reihe nach.
- SubagentsDie Läufe, die ein Agent an andere Agenten übergibt, eine Zeile pro Lauf. Deckt parallele Läufe, Stoppen und Wiederholen sowie eine Zusammenfassung nach jedem Lauf ab.
- Test ResultsDer Testlauf eines Agenten, gezeigt während er läuft. Tests streamen herein und klappen zu einer Zusammenfassung zusammen, jeder Fehlschlag bleibt offen mit seinem Diff.
- ThinkingDie Denkansicht eines KI-Chats. Ein Live-Label folgt jedem Schritt, Suchen und Quellen klappen zu einer Spur zusammen und Zitate stehen neben der Antwort.