Feedback

Alert

Statusmeldungen in vier Varianten mit optionalem Schließen-Button.

Vorschau
Konfiguration
import { Alert } from "@repo/ui/alert"

<Alert variant="info" title="Hinweis">
  Eine neue Fortbildung ist verfügbar.
</Alert>

ProgressBar

Fortschrittsbalken mit Größen und Farbvarianten.

Vorschau
Kursfortschritt65%
Konfiguration
import { ProgressBar } from "@repo/ui/ProgressBar"

<ProgressBar
  value={65}
  label="Kursfortschritt"
  showValue
/>

Skeleton

Shimmer-Platzhalter für Ladezustände.

Vorschau
Konfiguration
import { Skeleton } from "@repo/ui/skeleton"

<Skeleton variant="line" width={200} height={14} />
Weitere Beispiele
Zusammengesetztes Beispiel (Karten-Platzhalter)

EmptyState

Leerzustand mit Icon, Titel, Beschreibung und Aktionen.

Vorschau
Keine Ergebnisse
Versuchen Sie einen anderen Suchbegriff.
Konfiguration
import { EmptyState } from "@repo/ui/EmptyState"

<EmptyState
  icon={<SearchIcon />}
  title="Keine Ergebnisse"
  description="Versuchen Sie einen anderen Suchbegriff."
  actions={
    <>
      <Button variant="outline" size="sm">Zurücksetzen</Button>
      <Button variant="primary" size="sm">Alle anzeigen</Button>
    </>
  }
/>