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 alert

Fü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.

Neu: Wir haben unsere Komponentenbibliothek überarbeitet.

Badge & Chip

Kleine Status-Labels sowie entfernbare Chips mit Icon-Slot.

npx hunjy-ui add badge

Badge 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.

DefaultSecondaryOutlineSuccessWarningDestructiveFavoritEntfernbar

Progress

Fortschrittsbalken mit Varianten und optionalem Prozent-Label.

npx hunjy-ui add progress

Zeigt einen bekannten Fortschritt (z.B. Datei-Upload bei 70%). Für unbekannte Wartezeiten ohne konkreten Prozentwert nimm stattdessen Spinner.

35%
70%
90%

Spinner

Ladeindikator in vier Größen.

npx hunjy-ui add spinner

Der 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 skeleton

Graue 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 toast

Eine 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.