We stellen RetroUI 2.0 voor - groter, gedurfder, beter

We bouwen al maanden in het donker. Vandaag doen we het licht aan.

RetroUI 2.0 is er, en het is de grootste update die we ooit hebben uitgebracht. Dit is geen simpele versieverhoging, het is een volledige evolutie van wat RetroUI kan en hoe je ermee omgaat.

Toen we RetroUI lanceerden, was het doel simpel: ontwikkelaars een UI-bibliotheek geven die niet op al het andere lijkt. Gedurfde ontwerpen, neobrutalistische esthetiek en componenten die je projecten laten opvallen. Die visie is niet veranderd. Maar hoe we haar waarmaken? Dat is drastisch geëvolueerd.

Laten we in de nieuwigheden duiken.

🎨 Base UI-ondersteuning - het fundament waar je om vroeg

Een van de meest gevraagde features vanaf dag één was Base UI-ondersteuning, en eindelijk is die er.

Wat is Base UI?

Base UI is een bibliotheek van ongestylde, toegankelijke React-componenten, gebouwd door het MUI-team. Zie het als het headless, framework-agnostische alternatief voor Material UI: je krijgt al het gedrag en alle toegankelijkheidslogica zonder enige opgelegde visuele keuze.

Waarom dit belangrijk is voor RetroUI

Tot nu toe waren de componenten van RetroUI gebouwd op de primitives van Radix UI (die uitstekend zijn, begrijp ons niet verkeerd). Maar Base UI opent nieuwe mogelijkheden:

• Framework-flexibiliteit: Base UI werkt wrijvingsloos in React, Next.js en andere moderne frameworks
• Betere tree-shaking: kleinere bundles dankzij een fijngeslepen optimalisatie
• Versterkte toegankelijkheid: de toegankelijkheidsprimitives van Base UI zijn grondig beproefd en meteen WCAG-conform
• Toekomstbestendige architectuur: gebouwd voor React Server Components en het moderne React-ecosysteem

Wat betekent dit voor jou? De componenten van RetroUI zijn nu sneller, toegankelijker en flexibeler dan ooit. En dat alles zonder de gedurfde, kenmerkende designtaal op te geven waar je van houdt.

Kopiëren// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 Eén website, één visie - OS en Pro verenigd

Iets zat ons dwars: aparte websites hebben voor RetroUI OS (gratis) en RetroUI Pro voelde… gefragmenteerd. Alsof we onze community opdeelden in plaats van haar samen te brengen.

Niet meer.

Een volledig herontworpen website

We hebben de hele RetroUI-website vanaf de grond herbouwd en OS en Pro versmolten tot één samenhangende ervaring. Dit is nieuw:

Een verenigde componentenbibliotheek

Blader door alle componenten, gratis en pro, op één plek. Geen heen-en-weer meer tussen websites om te zien wat er is. Alles is duidelijk gemarkeerd, dus je weet wat gratis is en wat premium.

Een strakkere navigatie

Vinden wat je nodig hebt is sneller en intuïtiever. Componenten, blocks, templates, docs: alles heeft zijn logische plek.

Een verfijnder ontwerp

We leven wat we prediken. De nieuwe site is gedurfder, sneller en gepolijster. Het is een etalage van wat RetroUI kan als je je volledig aan de esthetiek verbindt.

Een betere mobiele ervaring

De oude site werkte op mobiel. De nieuwe schittert op mobiel. Responsief ontwerp zoals het hoort, met touch-interacties die native aanvoelen.

Het beste eraan? Alles draait op RetroUI-componenten. We eten ons eigen hondenvoer: elk component dat je op de site ziet, kun je in je eigen projecten gebruiken.

📚 Documentatie die echt helpt

Laten we eerlijk zijn: documentatie belandt vaak op het tweede plan. Deze keer niet.

We hebben de RetroUI-docs volledig herzien met functies die je leven makkelijker maken:

Kopiëren als Markdown

Werk je aan de documentatie van je eigen project? Schrijf je een artikel over RetroUI? Nu kun je de code van een component als Markdown kopiëren, met één klik.

Perfect voor:

• Het maken van documentatie voor je eigen componenten
• Het schrijven van tutorials en handleidingen
• Het delen van codevoorbeelden in Markdown-gebaseerde tools (Notion, GitHub enz.)

AI-gestuurde documentatie

We hebben AI-hulp direct in de docs geïntegreerd. Heb je een vraag over hoe je een component aanpast? Moet je de API begrijpen? De AI helpt je sneller antwoorden te vinden dan door pagina's documentatie te spitten.

Voorbeelden van wat je kunt vragen:

• „Hoe laat ik het Button-component eigen kleuren gebruiken?”
• „Welke props accepteert het Card-component?”
• „Toon me voorbeelden van de Modal met formulieren”

Het is alsof je 24/7 een RetroUI-expert bij de hand hebt.

Verbeterde codevoorbeelden

Elk component heeft nu:

• Live previews waarmee je kunt interacteren
• Meerdere varianten die verschillende gebruiksscenario's tonen
• Kant-en-klare copy-paste-code met de juiste imports
• TypeScript-voorbeelden voor betere typeveiligheid
• Toegankelijkheidsnotities die uitleggen hoe elk component a11y afhandelt

Geen giswerk meer. Geen gespit meer door broncode. Alleen heldere, nuttige voorbeelden die je sneller laten bouwen.

🧱 Meer dan 100 nieuwe blocks - bouw sneller dan ooit

Componenten zijn geweldig. Maar soms heb je hele secties nodig, niet alleen knoppen en cards.

Daar komen blocks in beeld.

Wat zijn blocks?

Blocks zijn kant-en-klare secties die je in je project laat vallen: hero-secties, prijstabellen, feature-grids, testimonials, CTA's en meer. Ze zijn volledig responsief, toegankelijk en klaar om aan te passen.

Wat is er nieuw in 2.0?

We hebben meer dan 100 nieuwe blocks toegevoegd in elke categorie die je maar kunt bedenken:

Hero-secties

• Meer dan 15 nieuwe hero-varianten, van minimalistisch tot full-bleed
• Waaronder geanimeerde achtergronden, split-screen-lay-outs en video-hero's

Features en voordelen

• Op iconen gebaseerde feature-grids
• Screenshot-showcases
• Stapsgewijze handleidingen
• Vergelijkingstabellen

Prijstabellen

• Van simpele 2-kolomslay-outs tot complexe 4-niveauprijzen
• Facturatieschakelaar (maandelijks/jaarlijks)
• Feature-vergelijkingsmatrixen

Testimonials

• Grid-lay-outs, carrousels en masonry-ontwerpen
• Video-testimonials
• Logomuren als sociaal bewijs

CTA's en conversies

• Nieuwsbriefaanmeldingen
• Wachtlijstformulieren
• App-downloadsecties
• Contactformulieren met karakter

Headers en navigatie

• Megamenu's
• Mobile-first-navigatiepatronen
• Sticky headers met scroll-effecten

Footers

• Meerkolomsfooters
• Minimale footers met één rij
• Footers met geïntegreerde nieuwsbrief

Elk block is gebouwd in dezelfde gedurfde RetroUI-esthetiek: dikke randen, harde schaduwen, levendige kleuren en asymmetrische lay-outs. Ze zijn ontworpen om op te vallen, niet om op te gaan in de massa.

Kopiëren// 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"
/>

🌙 Nieuwe template: Dark Mode Dev Tool Dashboard

Templates zijn waar alles samenkomt: componenten, blocks en designfilosofie verenigd in een complete applicatie.

We stellen onze nieuwste template voor: het Dark Mode Dev Tool Dashboard.

Wat is het?

Een volledig uitgerust, dark-mode-first dashboard, gebouwd voor developertools, SaaS-platforms en adminpanels. Het is alles wat je nodig hebt om een productieklare applicatie te bouwen met de gedurfde esthetiek van RetroUI.

Wat zit erin?

Een complete dashboardlay-out

• Zijnavigatie met inklapbaar menu
• Bovenste header met zoekfunctie en gebruikersprofiel
• Responsief ontwerp dat werkt op mobiel, tablet en desktop

Kant-en-klare pagina's

• Dashboardoverzicht met metrics en grafieken
• Gebruikersbeheer (lijst, detail, bewerken)
• Instellingenpagina met formuliervoorbeelden
• API-documentatiepagina
• Beheer van facturatie en abonnementen

Dark mode zoals het hoort

• Geen simpelweg omgekeerde kleuren, maar bewust ontworpen voor donkere achtergronden
• Hoog contrast voor leesbaarheid
• Levendige accentkleuren die knallen op donkere achtergronden

Productieklare functies

• Authenticatieschermen (inloggen, registreren, wachtwoord vergeten)
• Foutstatussen en lege statussen
• Laadskeletons
• Toast-meldingen
• Modale dialogen en bevestigingen

Ontwikkelaarvriendelijk

• Gebouwd met TypeScript
• Gedocumenteerde componentstructuur
• Makkelijk aan te passen en uit te breiden
• Volgt de App Router-conventies van Next.js

Dit is geen speelgoedtemplate. Het is een fundament waarop je echte producten kunt bouwen. Of je nu een nieuwe SaaS lanceert, een intern hulpmiddel bouwt of een developerplatform maakt, deze template geeft je een voorsprong.

En ja, hij lijkt op geen enkele andere dashboardtemplate daarbuiten. Dat is precies de bedoeling.

Waarom dit belangrijk is

RetroUI 2.0 gaat niet alleen over het toevoegen van features. Het gaat over RetroUI krachtiger, flexibeler en nuttiger maken voor projecten uit de echte wereld.

Base UI-ondersteuning betekent betere prestaties en toegankelijkheid.

De verenigde website betekent makkelijker ontdekken en een betere ervaring voor iedereen.

Verbeterde docs betekent minder tijd zoeken, meer tijd bouwen.

Meer dan 100 nieuwe blocks betekent dat je complete pagina's in minuten kunt uitbrengen, niet in dagen.

De dark-mode-template betekent dat je een solide fundament hebt voor je volgende project.

Samen maken deze nieuwigheden RetroUI 2.0 tot de meest complete, productieklare UI-bibliotheek voor ontwikkelaars die weigeren saaie interfaces te bouwen.

Wat komt hierna?

Dit is een grote release, maar we stoppen hier niet. Dit staat op de roadmap:

• Meer templates (light-mode-varianten, landingspagina's, e-commerce)
• Figma-to-Code-integratie voor een snellere flow van ontwerp naar ontwikkeling
• Extra Base UI-componenten terwijl we de bibliotheek uitbreiden
• Een community-showcase met projecten gebouwd in RetroUI
• Video-tutorials die gangbare patronen en gebruiksscenario's doorlopen

En we luisteren. Is er een component dat je nodig hebt, een feature die je wilt of een probleem dat je tegenkomt, laat het ons weten. RetroUI is gebouwd voor ontwikkelaars, door ontwikkelaars. Jouw feedback vormt wat we hierna bouwen.

Probeer RetroUI 2.0 vandaag

Klaar om te duiken? Zo begin je:

Voor nieuwe gebruikers

Kopiëren# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Blader door de componenten, verken de blocks en pak de nieuwe template. Alles is klaar om te gebruiken in je Next.js-, React- of Vite-project.

Voor bestaande gebruikers

Als je RetroUI al gebruikt, is upgraden naar 2.0 eenvoudig:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Kopiëren

Bekijk de changelog voor eventuele breaking changes (er zijn er heel weinig, en voor alle hebben we workarounds gedocumenteerd).

Bedankt

RetroUI bestaat omdat ontwikkelaars zoals jij genoeg hebben van generieke ontwerpen. Je wilt dingen bouwen die opvallen, die karakter hebben, die anders aanvoelen.

We zijn er om dat makkelijker te maken.

Versie 2.0 is de vrucht van maanden werk, honderden commits, talloze designiteraties en de feedback van een fantastische community. Bedankt dat je deel uitmaakt van deze reis.

Ga nu iets gedurfds bouwen. 🚀

Verken RetroUI 2.0:

• Bekijk componenten
• Bekijk blocks
• Pak de template
• Lees de docs
• Sluit je aan bij de community

Vragen? Feedback? Een bug gevonden? Open een issue op GitHub of laat van je horen op Twitter/X.