Feedback
Status- und Rückmeldeelemente: Hinweise, Labels, Ladezustände und Benachrichtigungen.
Alert & Banner
Hinweis-Boxen mit Icon-Varianten sowie ein schmales Seiten-Banner.
npx hunjy-ui add alertFür Hinweise, die im Fließtext stehen bleiben sollen (nicht wie Toast von selbst verschwinden) – z.B. eine Fehlermeldung über einem Formular. Banner ist die schmale Variante für eine ganze Seite, etwa eine Wartungsmeldung.
Badge & Chip
Kleine Status-Labels sowie entfernbare Chips mit Icon-Slot.
npx hunjy-ui add badgeBadge für einen kurzen Status-Text neben etwas (z.B. „Neu“, „Beta“, ein Zähler). Chip ist dieselbe Optik, aber mit einem Entfernen-Button – typisch für ausgewählte Filter oder Tags, die man wieder loswerden kann.
Progress
Fortschrittsbalken mit Varianten und optionalem Prozent-Label.
npx hunjy-ui add progressZeigt einen bekannten Fortschritt (z.B. Datei-Upload bei 70%). Für unbekannte Wartezeiten ohne konkreten Prozentwert nimm stattdessen Spinner.
Spinner
Ladeindikator in vier Größen.
npx hunjy-ui add spinnerDer klassische Lade-Kreis für „läuft gerade, Dauer unbekannt“ – z.B. während eine Anfrage zum Server unterwegs ist. Für bekannten Fortschritt (z.B. Prozentzahl) nimm stattdessen Progress.
Skeleton
Platzhalter-Blöcke für Ladezustände.
npx hunjy-ui add skeletonGraue Platzhalter-Boxen, die schon mal die spätere Form des Inhalts andeuten (z.B. eine Karte, ein Avatar), während die echten Daten noch laden – fühlt sich schneller an als ein leerer Bildschirm oder ein einzelner Spinner.
Toast
Kurze Benachrichtigungen über eine kleine toast()-API und einen globalen Toaster.
npx hunjy-ui add toastEine kurz eingeblendete Benachrichtigung in der Ecke des Bildschirms, die von selbst wieder verschwindet – ideal, um eine abgeschlossene Aktion zu bestätigen ('Gespeichert'), ohne den Nutzer zu unterbrechen. Ruf einfach toast.success(...)/toast.error(...) irgendwo im Code auf, kein eigener State nötig.