24. Januar 2026
Wir stellen RetroUI 2.0 vor - größer, kühner, besser
Nach Monaten der Arbeit ist RetroUI 2.0 da. Base-UI-Unterstützung, vereinte Website, verbesserte Docs, über 100 neue blocks und ein brandneues Template. Das ist unser bislang größtes Update.
Dov Azencot
@DovAzencotMonatelang haben wir im Dunkeln gebaut. Heute machen wir das Licht an.
RetroUI 2.0 ist da, und es ist das größte Update, das wir je veröffentlicht haben. Das ist keine bloße Versionserhöhung, sondern eine vollständige Weiterentwicklung dessen, was RetroUI kann und wie du damit interagierst.
Als wir RetroUI gelauncht haben, war das Ziel einfach: Entwicklern eine UI-Bibliothek zu geben, die nicht aussieht wie alles andere. Kühne Designs, neobrutalistische Ästhetik und Komponenten, die deine Projekte hervorstechen lassen. Diese Vision hat sich nicht geändert. Aber wie wir sie einlösen? Das hat sich drastisch weiterentwickelt.
Tauchen wir ein in das, was neu ist.
🎨 Base-UI-Unterstützung - das Fundament, um das du gebeten hast
Eines der meistgewünschten Features seit dem ersten Tag war die Base-UI-Unterstützung, und endlich ist sie da.
Was ist Base UI?
Base UI ist eine Bibliothek ungestylter, barrierefreier React-Komponenten vom MUI-Team. Stell sie dir als die headless, framework-agnostische Alternative zu Material UI vor: Du bekommst das gesamte Verhalten und die gesamte Barrierefreiheitslogik, ohne jede gestalterische Vorgabe.
Warum das für RetroUI wichtig ist
Bislang wurden die Komponenten von RetroUI auf den Primitives von Radix UI gebaut (die exzellent sind, keine Frage). Aber Base UI eröffnet neue Möglichkeiten:
- Framework-Flexibilität: Base UI funktioniert reibungslos über React, Next.js und andere moderne Frameworks
- Besseres Tree-Shaking: kleinere Bundles dank verfeinerter Optimierung
- Verstärkte Barrierefreiheit: die Barrierefreiheits-Primitives von Base UI sind erprobt und von Haus aus WCAG-konform
- Zukunftssichere Architektur: gebaut für React Server Components und das moderne React-Ökosystem
Was heißt das für dich? Die Komponenten von RetroUI sind jetzt performanter, barrierefreier und flexibler als je zuvor. Und das alles, ohne die kühne, unverwechselbare Designsprache aufzugeben, die du liebst.
// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
<Button variant="primary">
Still bold. Still RetroUI. Now even better.
</Button>🌐 Eine Website, eine Vision - OS und Pro vereint
Etwas hat uns gestört: getrennte Websites für RetroUI OS (kostenlos) und RetroUI Pro zu haben, fühlte sich … zersplittert an. Als würden wir unsere Community teilen, statt sie zusammenzubringen.
Nicht mehr.
Eine vollständig neu gestaltete Website
Wir haben die gesamte RetroUI-Website von Grund auf neu gebaut und OS und Pro zu einem stimmigen Erlebnis verschmolzen. Das ist neu:
Eine vereinte Komponenten-Bibliothek
Durchstöbere alle Komponenten, kostenlos und pro, an einem Ort. Kein Hin- und Herspringen zwischen Websites mehr, um zu sehen, was verfügbar ist. Alles ist klar gekennzeichnet, sodass du weißt, was kostenlos und was premium ist.
Eine übersichtlichere Navigation
Zu finden, was du brauchst, ist schneller und intuitiver. Komponenten, blocks, Templates, Docs: Alles hat seinen logischen Platz.
Ein feiner ausgearbeitetes Design
Wir leben, was wir predigen. Die neue Seite ist kühner, schneller und ausgefeilter. Sie ist ein Schaufenster dessen, was RetroUI kann, wenn du dich der Ästhetik voll verschreibst.
Ein besseres Mobile-Erlebnis
Die alte Seite funktionierte auf Mobilgeräten. Die neue glänzt auf Mobilgeräten. Responsives Design, richtig gemacht, mit Touch-Interaktionen, die sich nativ anfühlen.
Das Beste daran? Alles läuft mit RetroUI-Komponenten. Wir essen unser eigenes Hundefutter: Jede Komponente, die du auf der Seite siehst, kannst du in deinen Projekten einsetzen.
📚 Dokumentation, die wirklich hilft
Seien wir ehrlich: Dokumentation gerät oft in den Hintergrund. Diesmal nicht.
Wir haben die RetroUI-Docs komplett überarbeitet, mit Funktionen, die dir das Leben erleichtern:
Als Markdown kopieren
Arbeitest du an der Dokumentation deines eigenen Projekts? Schreibst du einen Artikel über RetroUI? Jetzt kannst du den Code einer Komponente als Markdown kopieren, mit einem einzigen Klick.
Perfekt für:
- Das Erstellen der Dokumentation deiner eigenen Komponenten
- Das Schreiben von Tutorials und Guides
- Das Teilen von Code-Beispielen in Markdown-basierten Tools (Notion, GitHub usw.)
KI-gestützte Dokumentation
Wir haben KI-Unterstützung direkt in die Docs integriert. Hast du eine Frage, wie du eine Komponente anpasst? Musst du die API verstehen? Die KI hilft dir, Antworten schneller zu finden, als dich durch Seiten von Dokumentation zu wühlen.
Beispiele, was du fragen kannst:
- „Wie bringe ich die Button-Komponente dazu, eigene Farben zu nutzen?“
- „Welche Props akzeptiert die Card-Komponente?“
- „Zeig mir Beispiele für die Modal mit Formularen“
Es ist, als hättest du rund um die Uhr einen RetroUI-Experten zur Hand.
Verbesserte Code-Beispiele
Jede Komponente hat jetzt:
- Live-Vorschauen, mit denen du interagieren kannst
- Mehrere Varianten, die verschiedene Anwendungsfälle zeigen
- Copy-and-paste-fertigen Code mit den richtigen Imports
- TypeScript-Beispiele für mehr Typsicherheit
- Barrierefreiheits-Hinweise, die erklären, wie jede Komponente mit a11y umgeht
Kein Raten mehr. Kein Wühlen im Quellcode mehr. Nur klare, hilfreiche Beispiele, die dich schneller bauen lassen.
🧱 Über 100 neue blocks - schneller bauen als je zuvor
Komponenten sind großartig. Aber manchmal brauchst du ganze Sektionen, nicht nur Buttons und Cards.
Hier kommen die blocks ins Spiel.
Was sind blocks?
Blocks sind vorgefertigte Sektionen, die du in dein Projekt fallen lässt: Hero-Sektionen, Preistabellen, Feature-Grids, Testimonials, CTAs und mehr. Sie sind voll responsiv, barrierefrei und bereit zur Anpassung.
Was ist neu in 2.0?
Wir haben über 100 neue blocks in jeder erdenklichen Kategorie hinzugefügt:
Hero-Sektionen
- Über 15 neue Hero-Varianten, von minimalistisch bis Full-Bleed
- Darunter animierte Hintergründe, Split-Screen-Layouts und Video-Heros
Features und Vorteile
- Icon-basierte Feature-Grids
- Screenshot-Showcases
- Schritt-für-Schritt-Anleitungen
- Vergleichstabellen
Preistabellen
- Von einfachen 2-Spalten-Layouts bis zu komplexen 4-Stufen-Preisen
- Abrechnungs-Umschalter (monatlich/jährlich)
- Feature-Vergleichsmatrizen
Testimonials
- Grid-Layouts, Karussells und Masonry-Designs
- Video-Testimonials
- Logo-Wände als Social Proof
CTAs und Conversions
- Newsletter-Anmeldungen
- Warteliste-Formulare
- App-Download-Sektionen
- Kontaktformulare mit Charakter
Header und Navigation
- Mega-Menüs
- Mobile-First-Navigationsmuster
- Sticky-Header mit Scroll-Effekten
Footer
- Mehrspaltige Footer
- Minimale einzeilige Footer
- Footer mit integriertem Newsletter
Jeder block ist in derselben kühnen RetroUI-Ästhetik gebaut: dicke Ränder, harte Schatten, lebendige Farben und asymmetrische Layouts. Sie sind darauf ausgelegt, aufzufallen, nicht sich einzufügen.
// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
<HeroBold
title="Your Product Name"
subtitle="Ship faster with bold design"
cta="Get Started"
/>🌙 Neues Template: Dark-Mode-Dev-Tool-Dashboard
Templates sind der Ort, an dem alles zusammenkommt: Komponenten, blocks und Designphilosophie, vereint in einer vollständigen Anwendung.
Wir stellen unser neuestes Template vor: das Dark Mode Dev Tool Dashboard.
Was ist das?
Ein voll ausgestattetes, auf Dark Mode ausgelegtes Dashboard, gebaut für Entwickler-Tools, SaaS-Plattformen und Admin-Panels. Es ist alles, was du brauchst, um mit der kühnen Ästhetik von RetroUI eine produktionsreife Anwendung zu bauen.
Was ist enthalten?
Ein vollständiges Dashboard-Layout
- Seitliche Navigation mit einklappbarem Menü
- Kopfzeile oben mit Suche und Nutzerprofil
- Responsives Design, das auf Mobil, Tablet und Desktop funktioniert
Vorgefertigte Seiten
- Dashboard-Übersicht mit Metriken und Charts
- Nutzerverwaltung (Liste, Detail, Bearbeiten)
- Einstellungsseite mit Formularbeispielen
- API-Dokumentationsseite
- Verwaltung von Abrechnung und Abonnements
Dark Mode richtig gemacht
- Keine bloß invertierten Farben, sondern bewusst für dunkle Hintergründe gestaltet
- Hoher Kontrast für Lesbarkeit
- Lebendige Akzentfarben, die auf dunklen Hintergründen knallen
Produktionsreife Funktionen
- Authentifizierungs-Screens (Login, Registrierung, Passwort vergessen)
- Fehler- und Leerzustände
- Lade-Skeletons
- Toast-Benachrichtigungen
- Modale Dialoge und Bestätigungen
Entwicklerfreundlich
- Mit TypeScript gebaut
- Dokumentierte Komponentenstruktur
- Leicht anzupassen und zu erweitern
- Folgt den App-Router-Konventionen von Next.js
Das ist kein Spielzeug-Template. Es ist ein Fundament, auf dem du echte Produkte aufbauen kannst. Ob du ein neues SaaS launchst, ein internes Tool baust oder eine Entwicklerplattform erstellst, dieses Template gibt dir einen Vorsprung.
Und ja, es sieht keinem anderen Dashboard-Template da draußen ähnlich. Genau das ist der Punkt.
Warum das wichtig ist
Bei RetroUI 2.0 geht es nicht nur ums Hinzufügen von Features. Es geht darum, RetroUI kraftvoller, flexibler und nützlicher für reale Projekte zu machen.
Base-UI-Unterstützung bedeutet bessere Performance und Barrierefreiheit.
Die vereinte Website bedeutet leichteres Entdecken und ein besseres Erlebnis für alle.
Verbesserte Docs bedeuten weniger Zeit fürs Suchen und mehr Zeit fürs Bauen.
Über 100 neue blocks bedeuten, dass du ganze Seiten in Minuten statt in Tagen veröffentlichen kannst.
Das Dark-Mode-Template bedeutet, dass du ein solides Fundament für dein nächstes Projekt hast.
Zusammen machen diese Neuerungen RetroUI 2.0 zur vollständigsten, produktionsreifen UI-Bibliothek für Entwickler, die sich weigern, langweilige Interfaces zu bauen.
Was kommt als Nächstes?
Das ist ein großes Release, aber wir hören hier nicht auf. Das steht auf der Roadmap:
- Mehr Templates (Light-Mode-Varianten, Landingpages, E-Commerce)
- Figma-to-Code-Integration für einen schnelleren Workflow von Design zu Entwicklung
- Weitere Base-UI-Komponenten, während wir die Bibliothek ausbauen
- Ein Community-Showcase mit Projekten, die mit RetroUI gebaut wurden
- Video-Tutorials, die gängige Muster und Anwendungsfälle durchgehen
Und wir hören zu. Wenn es eine Komponente gibt, die du brauchst, ein Feature, das du willst, oder ein Problem, das dich blockiert, sag uns Bescheid. RetroUI ist von Entwicklern für Entwickler gebaut. Dein Feedback formt, was wir als Nächstes bauen.
Probier RetroUI 2.0 noch heute
Bereit einzutauchen? So legst du los:
Für neue Nutzer
# Install RetroUI
npx retroui-cli init
# Or install via npm
npm install @retroui/reactDurchstöbere die Komponenten, erkunde die blocks und schnapp dir das neue Template. Alles ist bereit zum Einsatz in deinem Next.js-, React- oder Vite-Projekt.
Für bestehende Nutzer
Wenn du RetroUI bereits nutzt, ist das Upgrade auf 2.0 unkompliziert:
Wirf einen Blick ins Changelog für etwaige Breaking Changes (es gibt sehr wenige, und für alle haben wir Workarounds dokumentiert).
Danke
RetroUI existiert, weil Entwickler wie du generische Designs satthaben. Du willst Dinge bauen, die hervorstechen, die Persönlichkeit haben, die sich anders anfühlen.
Wir sind hier, um dir das leichter zu machen.
Version 2.0 ist das Ergebnis von Monaten der Arbeit, Hunderten von Commits, unzähligen Design-Iterationen und dem Feedback einer großartigen Community. Danke, dass du Teil dieser Reise bist.
Jetzt geh und bau etwas Kühnes. 🚀
Entdecke RetroUI 2.0:
Fragen? Feedback? Einen Bug gefunden? Öffne ein Issue auf GitHub oder melde dich auf Twitter/X.