Feedback-Komponenten
Komponenten, die zeigen, was gerade passiert: Toasts, Inline-Hinweise, Fortschrittsbalken und -kreise, Spinner, Skeletons und Leerzustände.
Spinner warten, bevor sie erscheinen, und bleiben dann lange genug, um gelesen zu werden, sodass schnelle Arbeit nie flackert, und jede Änderung wird Screenreadern angesagt.
- AlertInline-Meldungen für Status und Feedback, mit neutraler Fläche, farbigem Icon und einem Schließen, das sanft zusammenklappt.
- EmptyEin Platzhalter für Ansichten, in denen es noch nichts zu zeigen gibt, mit Icon, Nachricht und der nächsten Aktion.
- ProgressEin Balken oder Ring, der zeigt, wie weit eine Aufgabe fortgeschritten ist, sanft zwischen Aktualisierungen wechselt und gleitet, solange die Gesamtmenge unbekannt ist.
- SkeletonPlatzhalter, die 150 ms warten, bevor sie erscheinen, exakt die Größe des umschlossenen Inhalts annehmen und ihn einblenden, ohne etwas zu verschieben.
- SpinnerEin Ladeindikator mit Ticks im Apple-Stil oder einem atmenden Ring, der vor dem Anzeigen warten und lange genug sichtbar bleiben kann, um nicht zu flackern.
- ToastKurze Nachrichten, die sich sauber stapeln, bei Hover aufklappen, weggewischt werden können und einen Ladezustand an Ort und Stelle in Erfolg oder Fehler verwandeln.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- MarkdownMarkdown-Rendering für KI-Antworten. Deckt Streaming ohne halb getippte Syntax, kopierbare Tabellen und Inline-Zitate ab.
- BillingDie Plan- und Nutzungsseite eines KI-Produkts. Deckt Guthaben, das mitten im Zyklus ausgeht, Planwechsel mit anteiliger Abrechnung und Kartenfehler ab.
- Diff ReviewEine Prüfung der Dateiänderungen eines Agenten, bevor sie landen. Deckt Annehmen oder Ablehnen pro Änderung, Kommentare zurück an den Agenten und noch streamende Änderungen ab.
- API keysDie API-Schlüssel-Seite eines KI-Produkts. Deckt ein nur einmal gezeigtes Secret, Widerrufen mit Rückgängig und Rotation mit Übergangsfrist ab.
- SecurityDer Bereich Sicherheit in den Einstellungen eines KI-Produkts. Deckt Sitzungen, Zwei-Faktor mit Wiederherstellungscodes und Löschung hinter einer getippten Bestätigung ab.
- SettingsDie Einstellungsseite eines KI-Produkts. Deckt eine Speicherleiste, die nur bei Änderungen erscheint, Feldfehler und Ladezustände ab.