React Form Components mit einer Anatomie (Label, Hinweis, Fehler, Zähler), angebunden an react-hook-form und zod und fürs Smartphone gebaut, mit vollem Code.
Bau mit Embla Carousel React ein Karussell für Fotos, Inserate, Testimonials und Onboarding, mit Tastatursteuerung, pausierbarem Autoplay und ohne Layout Shift.
Bau einen React Animated Counter, der jede Ziffer wie ein Kilometerzähler rollt, Trennzeichen aus Intl holt, seine Breite hält und Reduced Motion beachtet.
Bau einen React Audio Player mit Waveform für Podcasts, Sprachnachrichten und Anruflisten: Spulen per Tastatur, vorberechnete Peaks, keine Layout-Sprünge.
React Charts Tailwind-konform: Area, Bar, Line und Donut Chart plus ein Chart Kit auf d3-scale und d3-shape, lesbar in Light und Dark Mode und am Smartphone.
Bau einen React Countdown Timer als rollende Ziffernblöcke, im Fließtext oder in Worten, und behandle Zeitzonen, schlafende Tabs, Hydration und das Ende sauber.
Ein React Cron Generator, mit dem Nutzer einen Zeitplan über Frequenz-Tabs und Wochentag-Chips wählen. Er liest ihn als Satz vor und listet die nächsten Läufe.
Bau eine React Empty State Komponente für erste Nutzung, keine Treffer und Fehler, mit Texten, die sagen, was passiert ist, und einer Aktion, die weiterhilft.
Bau ein React Gantt Chart mit ziehbaren Balken, Fortschritt und Abhängigkeitspfeilen, speichere Änderungen auf dem Server und sieh, wann sich eine Lizenz lohnt.
Bau ein React Gauge Chart, das einen Wert mit Zonen und Zielwert zeigt, seine Texte auch bei 120px lesbar hält und sich bei Screenreadern als Meter meldet.
Bau einen React GitHub Contribution Graph aus einem Username oder eigenen Daten, dazu eine Activity Heatmap mit Tastaturbedienung und Farben für beide Themes.
Bau einen React Image Cropper mit Pinch-Zoom und Drehung, der vor dem Upload zuschneidet, ein WebP in Zielgröße liefert und Avatare mit Fortschritt hochlädt.
Bau eine React Image Lightbox mit Code: Sie wächst aus dem Thumbnail, blättert per Wisch, zoomt per Pinch und schließt sich am Smartphone per Wisch nach unten.
Ein React Kalender mit Terminen: Monats-, Wochen-, Tages- und Agenda-Ansicht, Verschieben per Drag, Rollback beim Speichern und Agenda-Liste am Smartphone.
Bau einen React Location Picker auf einer echten Karte: Pin zum Ziehen, Radius mit Slider, Adresssuche, Sheet am Smartphone und statischer Fallback.
React Mentions richtig gebaut: @Personen und #Tags als Markup mit ID, das Umbenennungen übersteht, Vorschläge am Cursor und eine Liste, die am Smartphone passt.
Ein React Month Picker für Abrechnung und Reports: Wähl einen Monat, ein Quartal oder einen Zeitraum im Jahresraster, mit Presets, Limits und Bottom Sheet.
Bau ein React Notification Center mit Ungelesen-Badge, Filter-Tabs, Tagesgruppen und Swipe to Dismiss und lerne, was in die Inbox und was in einen Toast gehört.
Bau einen React PDF Viewer auf PDFium mit Suche, Thumbnails und Highlights, exportierbar als echte PDF-Annotationen, plus Vergleich mit react-pdf und pdf.js.
Bau eine React Product Tour, die die echte UI per Spotlight zeigt, am Smartphone unten andockt und weiß, wer sie beendet hat. Plus: wann ein Hotspot besser ist.
Bau einen React QR Code mit Logo, der trotzdem scannt: runde oder gepunktete Module, ein freies Feld in der Mitte, die richtige Fehlerkorrektur, PNG und SVG.
Bau React Rating Stars mit halben Sternen, Hover-Vorschau, Tastatur und Touch, schreibgeschützten Durchschnittswerten und der passenden Review-Übersicht.
Bau einen React Rich Text Editor auf Tiptap mit Markdown-Shortcuts, @Mentions und Bild-Uploads, der HTML, JSON oder Markdown speichert und am Handy gut läuft.
Bau einen React Skeleton Loader in der Form des echten Inhalts, nimm einen Spinner, wo ein Skeleton nicht passt, und tausch die Daten ohne Layout Shift ein.
React Sparkline für Tabellenzellen und KPI-Kacheln: eine Skala für alle Zeilen, ein Delta-Chip, der gut von schlecht trennt, Scrubben per Tastatur und Touch.
Bau einen React Time Picker, der Eingaben wie 1430 oder 2p versteht, 12 oder 24 Stunden nach Locale zeigt, belegte Zeiten sperrt und am Handy iOS-Räder öffnet.
Bau eine React Tree View mit Tri-State-Checkboxen, Lazy Loading, einem Filter, der Elternknoten behält, Drag and Drop und voller Tastaturbedienung, auch mobil.
So baust du einen React Color Picker mit HEX-, RGB- und HSL-Feldern, Swatches, Deckkraft und EyeDropper API und nutzt den Wert für OKLCH-Tokens in Tailwind v4.
So baust du eine React Combobox, die ohne Race Conditions am Server sucht, Akzente ignoriert, die ARIA-Tasten kennt und auf dem Handy ein Such-Sheet öffnet.
Bau einen React CSV Importer in vier Schritten: CSV oder Excel hochladen, Spalten zuordnen, fehlerhafte Zeilen direkt korrigieren, mit Fortschritt importieren.
So baust du einen React Currency Input, der beim Tippen mit Intl formatiert, den Cursor stehen lässt, das Symbol nach Locale setzt und eine reine Zahl sendet.
Wie ein React Diff Viewer arbeitet, welche Pakete unter React 19 laufen und wie du KI-Änderungen, Verträge und Configs mit Split-Ansicht und Wort-Diff prüfst.
Bau einen React DOCX Viewer mit echten Seiten, Kopfzeilen, Kommentaren und Änderungen direkt im Browser, und erfahre, wann Editor oder PDF besser passen.
Ein React Excel Viewer, der Schriften, Füllungen, Zahlenformate, fixierte Bereiche und Blattregister einer .xlsx behält, im Browser liest und flüssig scrollt.
So baust du einen React File Upload mit Drag and Drop, Einfügen und Handykamera, der Typ und Größe prüft und jede Datei mit Vorschau und Fortschritt zeigt.
Ein React JSON Viewer für Webhooks und Admin-Screens: Suche, die passende Zweige öffnet, Werte und Pfade kopieren, Handy-Layout und Arrays mit 10.000 Einträgen.
Bau ein React Kanban Board mit Drag per Maus, Touch und Tastatur, WIP-Limits und Inline-Anlegen von Karten, das am Smartphone immer nur eine Spalte zeigt.
Bau einen React Log Viewer, der 100.000 Zeilen streamt: Virtualisierung, Level-Filter, Regex-Suche und ein Follow-Modus, der beim Hochscrollen sofort pausiert.
So baust du einen React Multi Select, der echte Daten aushält: Chips mit +N-Überlauf, Suche, Alle auswählen nur für Treffer, ein Limit und ein Bottom Sheet.
So baust du einen React Resource Scheduler für Räume, Autos und Personen: per Drag buchen und verschieben, Doppelbuchungen in Postgres sperren, Agenda am Handy.
So baust du ein React Signature Pad, das die Drehung des Handys übersteht, die Seite scrollen lässt, einen Tippmodus hat und sauberes PNG oder SVG exportiert.
Bau eine React Virtualized Table mit TanStack Virtual, die 100.000 Zeilen scrollt, den Header sticky hält und Fokus und Auswahl beim Unmounten nicht verliert.
Vier Framer Motion Spring Presets mit echten Werten für Stiffness und Damping: wofür sich jedes eignet und wie du sie in deiner React-Bibliothek teilst.
Ein React Date Range Picker für Reports und Buchungen: Presets, zwei Monate, Apply und Cancel am Desktop, ein Bottom Sheet am Handy und Wochen nach Locale.
Bau eine React Multi Step Form: zod-Validierung pro Schritt, async Check, Fortschritt, der Reloads übersteht, Slides in Navigationsrichtung und fertiger Code.
React Phone Input, der beim Tippen pro Land formatiert, das Land aus einer eingefügten +Vorwahl erkennt, mit libphonenumber-js prüft und sauberes E.164 liefert.
Ein React Stepper für Checkout, Onboarding und KYC: Kreise, Balken oder Punkte, was jeder Schrittzustand bedeutet und wie er auf dem Handy kompakt wird.
Ein React Tag Input macht aus getipptem und eingefügtem Text Chips, mit Vorschlägen, Limits und Duplikatprüfung. Dazu: wann ein Multi-Select besser passt.
So nutzt du die shadcn Registry einer fremden Bibliothek in shadcn/ui: Namespaces, Auth-Header, Vorschau per Dry Run und die Dateien, die dabei kollidieren.
CNP prüfen in TypeScript: die gewichtete Prüfziffer, echte Geburtsdaten, der neue Kreiscode 70, eine zod-Regel, ein React-Feld und sicheres Speichern.
CUI prüfen in TypeScript: die Prüfziffer mit dem Schlüssel 753217532 Schritt für Schritt, das Präfix RO, eine zod-Regel, ein React-Feld und die ANAF-Abfrage.
dnd kit mobile reparieren: TouchSensor mit Long Press, bei dem die Seite weiter scrollt, touch-action pro Element, Resize-Abbruch in iOS Safari und ein Tap-Weg.
IBAN prüfen JavaScript: Mod 97 in TypeScript fängt Tippfehler, die ein Regex durchlässt. Dazu ein React-Feld, das beim Tippen formatiert, und rumänische Banken.
So baust du eine React Command Palette: Cmd+K auf dem Mac, Ctrl+K überall sonst, dazu Unterseiten, Async-Ergebnisse, Recents und ein Vollbild-Sheet am Handy.
So baust du einen React OTP Input für Einfügen und SMS-Autofill, warum autocomplete one-time-code still scheitert und wie du zod und einen Resend-Timer ergänzt.
shadcn Komponenten updaten, ohne Änderungen zu verlieren: was shadcn diff und add --diff zeigen, was ein 2-Wege-Diff verschweigt und wie der 3-Wege-Merge geht.
Bau eine Admin-Datentabelle auf TanStack Table v9: tableFeatures, Spaltenfilter, Bulk Actions, Pinning mit start/end, Server-Pagination, Smartphone-Karten.
Jeder Guide erklärt, wann die Komponente die richtige Wahl ist und wann eine andere besser passt, welche Props du wirklich änderst, wie sie sich mit Tastatur und Screenreader verhält, was sie auf dem Smartphone tut und welche Fehler in Produktion auftauchen. Der Code nutzt die echte API der beschriebenen Wingo UI Komponente, geschrieben in TypeScript für React 19 und Tailwind CSS v4. Du kannst ihn also in ein Next.js-Projekt kopieren und direkt ausführen.
Die meisten Guides enthalten eine Live-Demo auf der Seite. Viele Komponenten sind kostenlos, und jeder Guide sagt klar, ob die Komponente einen Pro-Plan braucht. So weißt du vorher, was du installieren kannst.
So baust du React-Oberflächen, die sich auf dem Smartphone nativ anfühlen: Bottom Sheets, Touch-Ziele, Safe Areas und Tabellen, die zu Karten werden.
23 Artikel
Praxisnahe Guides für React-UI mit Claude Code, Cursor und Codex: MCP-Server, Rules-Dateien, llms.txt und Komponenten-Registries.
13 Artikel
Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.
14 Artikel
Guides zu Next.js App Router, React 19 und Tailwind CSS v4 für alle, die UI-Komponenten und Designsysteme bauen und pflegen.
11 Artikel
Schritt-für-Schritt-Tutorials für echte React-Screens und Apps, von Anmeldung und Einstellungen bis zum Admin-Dashboard, jeder Screen auch auf dem Smartphone.
17 Artikel
Kein Spam. Du kannst dich jederzeit abmelden.