UI Tests · Komponenten-Showcase
Zwei Welten direkt vergleichen: Tab 1 zeigt selbst gebaute Komponenten(nur Tailwind & React, keine Dependencies). Tab 2 nutzt die gleichen Patterns mit den aktuell beliebtesten Bibliotheken aus dem React-Ökosystem.
Buttons & Actions
Klassische und moderne Button-Varianten
Form Controls
Inputs, Selects, Slider, Checkboxen
File Drop-Zone
Drag & Drop Upload
Dateien hierher ziehen
oder klicken zum Auswählen
Drag-Drop
PDF-Tools
Im Browser erzeugen, anzeigen, herunterladen — kein Server-Round-Trip
PDF erstellen & inline anzeigen
Vollständig client-seitig: Vector-PDF mit Header, Body, Footer und Seitenzahlen. Vorschau im iframe, Download und Öffnen im neuen Tab.
Client-sidejsPDFA4VectorBlob URL
Mail-Versand
SMTP-Integration (STARTTLS) – auf dem öffentlichen Server deaktiviert
SMTP-Mail senden
POST /api/mail/send → nodemailer → SMTP. Antwort enthält Message-ID & SMTP-Reply.
SMTP nicht konfiguriert (.env.local prüfen)
Server-ActionSTARTTLSApp-Passwort
Feedback
Alerts, Toasts, Progress, Skeleton
Alert-Banner
Tipp: Klicke auf Run-IDs für Details.
Pipeline erfolgreich abgeschlossen.
Warteschlange enthält pausierte Runs.
Verbindung zu Redis verloren.
InfoSuccessWarningError
Toast Notifications
Klick auf einen Button — Toast erscheint unten rechts
Progress Bar & Spinner
Hochladen…0%
Skeleton Loader
Platzhalter beim Laden
Spinner-Varianten
Empty State
Wenn nichts da ist — leitet zum nächsten Schritt
Keine Daten vorhanden
Sobald ein Workflow gestartet wird, erscheint er hier in der Übersicht.
Overlays
Modal, Drawer, Accordion
Modal / Dialog
Mit Backdrop-Blur und Focus-Trap
Drawer / Slide-Over
Side-Panel von rechts
Accordion
Kollabierbare Sektionen
Eine TypeScript-Library zur Modellierung von Statecharts und Finite State Machines.
Display
Avatare, Badges, Stats, Timeline
Avatare & Badges
Avatare mit Status
A
B
C
D
E
+8
Badges & Pills
InfoSuccessWarningDangerProOutline Featured
Stat-Cards mit Trend
KPI-Karten für Dashboards
+8.2%
€12.4k
Umsatz
+12
247
Bestellungen
-0.3%
2.1%
Fehlerquote
+5ms
142ms
Ø Latenz
Timeline
Zeitleiste für Events
10:42
Bestellung erstellt
10:43
Zahlung autorisiert
10:51
Lager benachrichtigt
11:18
Versand abgeschickt
Animated Counter
requestAnimationFrame mit ease-out
0
Workflow-Runs gesamt
Navigation
Stepper, Breadcrumb, Pagination
Stepper / Wizard
Mehrschrittige Formulare
Daten
2
Adresse
3
Zahlung
4
Bestätigung
Breadcrumbs
Pagination
Hinweis: Diese Showcase nutzt keine der oben verlinkten Bibliotheken — alle Komponenten sind hier direkt in
src/app/ui/page.tsx mit Tailwind und reinem React gebaut. Die Links zeigen dir, welche etablierten Lösungen es für jedes Pattern produktionstauglich gibt.