
Tailwind v4 Design Tokens: Farben, Dark Mode, Kontrast
Tailwind v4 Design Tokens aus einer produktiven React-Bibliothek: @theme inline, semantische Flächen, Statusfarben, Dark Mode und ein Kontrast-Check für CI.

Tailwind v4 Design Tokens aus einer produktiven React-Bibliothek: @theme inline, semantische Flächen, Statusfarben, Dark Mode und ein Kontrast-Check für CI.

Ein Next.js Cookie Banner, der der DSGVO standhält: Zustimmen und Ablehnen gleich groß, Schalter je Kategorie, Consent Mode v2 und Embeds erst nach Zustimmung.

Nextjs JSON LD im App Router: eine sichere Script-Komponente, typisierte schema-dts-Builder und ein CI-Check, der anschlägt, sobald Markup und Seite abweichen.

Bau einen React Controllable State Hook, der value oder defaultValue annimmt. Mit komplettem TypeScript-Code, drei echten Fallstricken und dem Radix-Vergleich.

Behebe den next-themes Hydration Error und das Theme-Flackern im Next.js App Router. Plus: ein Theme Toggle, der schon beim ersten Paint richtig aussieht.

Next.js Component Library im App Router einrichten, getestet mit Next.js 16.4: use client, Tokens in globals.css, Dark Mode ohne Flackern, Updates per CLI.

Prefers reduced motion React Guide: Respektier die OS-Einstellung in Next.js ohne Hydration Mismatch und ersetz Springs durch kurze Fades, die Feedback geben.

shadcn Vite Setup, getestet mit Vite 8 und TypeScript 6: Tailwind-v4-Plugin, @-Alias in tsconfig.app.json, Dark Mode ohne Next.js, dann Komponenten hinzufügen.

Tailwind v4 Dark Mode per Klasse: die @custom-variant-Zeile, next-themes in Next.js, warum dark: deinen Toggle ignoriert und Tokens für zwei echte Themes.

React 19 forwardRef Migration in TypeScript: ref als normale Prop, Typen per ComponentProps, Refs samt Cleanup zusammenführen und asChild intakt halten.

Warum ein React Use Mobile Hook auf dem Server false liefert, wann CSS-Breakpoints besser passen und wie useSyncExternalStore den Hydration Mismatch verhindert.
Die Artikel behandeln Design Tokens in Tailwind v4, einen Dark Mode, der gestaltet und nicht einfach invertiert ist, Kontrastprüfungen, Media-Query-Hooks, die beim Server-Rendering sicher sind, Animationen, die reduzierte Bewegung respektieren, und die TypeScript-Muster, die Props streng und gut lesbar halten. Jeder Guide stammt aus Problemen, die wir beim Bau von Wingo UI mit Next.js 16, React 19 und Tailwind CSS v4 gelöst haben. Die Beispiele sind also in einer echten Codebasis getestet.
Wenn du ein Designsystem pflegst, ein älteres shadcn/ui-Setup migrierst oder einfach willst, dass deine Komponenten das nächste Framework-Upgrade überstehen, fang hier an.
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
Guides zu einzelnen React-Komponenten: wann du welche nutzt, die wichtigen Props, Barrierefreiheit, Verhalten auf dem Smartphone und typische Fehler.
57 Artikel
Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.
14 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.