Przedstawiamy RetroUI 2.0 - większe, odważniejsze, lepsze

Od miesięcy budujemy po ciemku. Dziś zapalamy światło.

RetroUI 2.0 jest już tutaj i to największa aktualizacja, jaką kiedykolwiek wypuściliśmy. To nie jest zwykła zmiana numeru wersji, to pełna ewolucja tego, co RetroUI potrafi i jak z nim wchodzisz w interakcję.

Gdy uruchamialiśmy RetroUI, cel był prosty: dać programistom bibliotekę UI, która nie wygląda jak wszystko inne. Odważne projekty, neobrutalistyczna estetyka i komponenty, które sprawiają, że twoje projekty się wyróżniają. Ta wizja się nie zmieniła. A to, jak ją realizujemy? To ewoluowało drastycznie.

Zanurzmy się w nowości.

🎨 Wsparcie Base UI - fundament, o który prosiłeś

Jedną z najczęściej proszonych funkcji od pierwszego dnia było wsparcie Base UI i wreszcie jest.

Czym jest Base UI?

Base UI to biblioteka niestylowanych, dostępnych komponentów React stworzona przez zespół MUI. Pomyśl o niej jak o headlessowej, niezależnej od frameworka alternatywie dla Material UI: dostajesz całe zachowanie i całą logikę dostępności bez żadnych narzuconych decyzji wizualnych.

Dlaczego to ważne dla RetroUI

Dotąd komponenty RetroUI budowane były na prymitywach Radix UI (które są znakomite, nie zrozum nas źle). Ale Base UI otwiera nowe możliwości:

• Elastyczność frameworkowa: Base UI działa bez tarć w React, Next.js i innych nowoczesnych frameworkach
• Lepszy tree-shaking: mniejsze bundle dzięki dopracowanej optymalizacji
• Wzmocniona dostępność: prymitywy dostępności Base UI są dobrze sprawdzone i zgodne z WCAG od razu
• Architektura odporna na przyszłość: stworzona pod React Server Components i nowoczesny ekosystem React

Co to oznacza dla ciebie? Komponenty RetroUI są teraz wydajniejsze, bardziej dostępne i bardziej elastyczne niż kiedykolwiek. A wszystko to bez rezygnacji z odważnego, charakterystycznego języka projektowego, który uwielbiasz.

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

🌐 Jedna strona, jedna wizja - OS i Pro zjednoczone

Oto coś, co nam przeszkadzało: utrzymywanie osobnych stron dla RetroUI OS (darmowe) i RetroUI Pro sprawiało wrażenie… rozdrobnienia. Jakbyśmy dzielili naszą społeczność, zamiast ją łączyć.

Już nie.

Całkowicie przeprojektowana strona

Przebudowaliśmy całą stronę RetroUI od zera, zlewając OS i Pro w jedno spójne doświadczenie. Oto co nowego:

Ujednolicona biblioteka komponentów

Przeglądaj wszystkie komponenty, darmowe i pro, w jednym miejscu. Koniec skakania między stronami, by zobaczyć, co jest dostępne. Wszystko jest wyraźnie oznaczone, więc wiesz, co jest darmowe, a co premium.

Czystsza nawigacja

Znalezienie tego, czego potrzebujesz, jest szybsze i bardziej intuicyjne. Komponenty, blocks, szablony, dokumentacja: każda rzecz ma swoje logiczne miejsce.

Bardziej dopracowany projekt

Praktykujemy to, co głosimy. Nowa strona jest odważniejsza, szybsza i bardziej dopieszczona. To witryna tego, co RetroUI potrafi, gdy w pełni zaangażujesz się w estetykę.

Lepsze doświadczenie mobilne

Stara strona działała na mobilnych. Nowa błyszczy na mobilnych. Responsywny projekt zrobiony jak trzeba, z dotykowymi interakcjami, które sprawiają wrażenie natywnych.

Najlepsza część? Wszystko napędzają komponenty RetroUI. Jemy własną karmę: każdy komponent, który widzisz na stronie, to coś, czego możesz użyć we własnych projektach.

📚 Dokumentacja, która naprawdę pomaga

Bądźmy szczerzy: dokumentacja często ląduje na drugim planie. Tym razem nie.

Gruntownie przerobiliśmy dokumentację RetroUI, dodając funkcje, które ułatwiają ci życie:

Kopiuj jako Markdown

Pracujesz nad dokumentacją własnego projektu? Piszesz artykuł o RetroUI? Teraz możesz skopiować kod komponentu jako Markdown jednym kliknięciem.

Idealne do:

• Tworzenia dokumentacji własnych komponentów
• Pisania poradników i przewodników
• Dzielenia się przykładami kodu w narzędziach opartych na Markdownie (Notion, GitHub itd.)

Dokumentacja wspierana AI

Zintegrowaliśmy pomoc AI bezpośrednio w dokumentacji. Masz pytanie, jak dostosować komponent? Musisz zrozumieć API? AI pomaga ci znaleźć odpowiedzi szybciej niż przekopywanie się przez strony dokumentacji.

Przykłady tego, o co możesz zapytać:

• „Jak sprawić, by komponent Button używał niestandardowych kolorów?”
• „Jakie props przyjmuje komponent Card?”
• „Pokaż mi przykłady użycia Modal z formularzami”

To jak mieć eksperta RetroUI pod ręką, przez całą dobę.

Ulepszone przykłady kodu

Każdy komponent ma teraz:

• Podglądy na żywo, z którymi możesz wchodzić w interakcję
• Wiele wariantów pokazujących różne przypadki użycia
• Kod gotowy do skopiowania z poprawnymi importami
• Przykłady w TypeScript dla większego bezpieczeństwa typów
• Notatki o dostępności wyjaśniające, jak każdy komponent obsługuje a11y

Koniec zgadywania. Koniec przekopywania się przez kod źródłowy. Tylko jasne, pomocne przykłady, które pozwalają ci budować szybciej.

🧱 Ponad 100 nowych blocks - buduj szybciej niż kiedykolwiek

Komponenty są świetne. Ale czasem potrzebujesz całych sekcji, nie tylko przycisków i kart.

Tu wkraczają blocks.

Czym są blocks?

Blocks to gotowe sekcje, które wrzucasz do projektu: sekcje hero, tabele cenowe, siatki funkcji, opinie, CTA i więcej. Są w pełni responsywne, dostępne i gotowe do dostosowania.

Co nowego w 2.0?

Dodaliśmy ponad 100 nowych blocks w każdej kategorii, jaką sobie wyobrazisz:

Sekcje hero

• Ponad 15 nowych wariantów hero, od minimalistycznych po full-bleed
• Zawierają animowane tła, układy split-screen i hero z wideo

Funkcje i korzyści

• Siatki funkcji oparte na ikonach
• Prezentacje ze zrzutami ekranu
• Przewodniki krok po kroku
• Tabele porównawcze

Tabele cenowe

• Od prostych układów 2-kolumnowych po złożone cenniki 4-poziomowe
• Przełącznik rozliczeń (miesięcznie/rocznie)
• Macierze porównania funkcji

Opinie

• Układy siatkowe, karuzele i projekty typu masonry
• Opinie wideo
• Ściany logo jako dowód społeczny

CTA i konwersje

• Zapisy na newsletter
• Formularze listy oczekujących
• Sekcje pobierania aplikacji
• Formularze kontaktowe z charakterem

Nagłówki i nawigacja

• Mega menu
• Wzorce nawigacji mobile-first
• Przyklejone nagłówki z efektami przy przewijaniu

Stopki

• Stopki wielokolumnowe
• Minimalistyczne stopki jednowierszowe
• Stopki ze zintegrowanym newsletterem

Każdy block jest zbudowany w tej samej odważnej estetyce RetroUI: grube obramowania, twarde cienie, żywe kolory i asymetryczne układy. Są zaprojektowane, by się wyróżniać, a nie wtapiać.

Kopiuj// 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"
/>

🌙 Nowy szablon: Dashboard narzędzia dev w trybie ciemnym

Szablony to miejsce, gdzie wszystko się schodzi: komponenty, blocks i filozofia projektowa zjednoczone w kompletną aplikację.

Przedstawiamy nasz najnowszy szablon: Dark Mode Dev Tool Dashboard.

Co to jest?

W pełni wyposażony dashboard w podejściu dark-mode-first, zbudowany pod narzędzia deweloperskie, platformy SaaS i panele administracyjne. To wszystko, czego potrzebujesz, by zbudować aplikację gotową do produkcji w odważnej estetyce RetroUI.

Co zawiera?

Kompletny układ dashboardu

• Nawigacja boczna ze zwijanym menu
• Górny nagłówek z wyszukiwaniem i profilem użytkownika
• Responsywny projekt działający na mobilnych, tabletach i desktopie

Gotowe strony

• Przegląd dashboardu z metrykami i wykresami
• Zarządzanie użytkownikami (lista, szczegóły, edycja)
• Strona ustawień z przykładami formularzy
• Strona dokumentacji API
• Zarządzanie rozliczeniami i subskrypcjami

Tryb ciemny zrobiony jak trzeba

• Nie tylko odwrócone kolory, lecz świadomie zaprojektowany pod ciemne tła
• Wysoki kontrast dla czytelności
• Żywe kolory akcentowe, które błyszczą na ciemnych tłach

Funkcje gotowe do produkcji

• Ekrany uwierzytelniania (logowanie, rejestracja, zapomniane hasło)
• Stany błędów i stany puste
• Szkielety ładowania
• Powiadomienia toast
• Okna modalne i potwierdzenia

Przyjazny programistom

• Zbudowany w TypeScript
• Udokumentowana struktura komponentów
• Łatwy do dostosowania i rozbudowy
• Zgodny z konwencjami App Router w Next.js

To nie jest szablon-zabawka. To fundament, na którym możesz budować prawdziwe produkty. Niezależnie od tego, czy uruchamiasz nowy SaaS, budujesz wewnętrzne narzędzie, czy tworzysz platformę deweloperską, ten szablon daje ci przewagę na starcie.

I tak, nie przypomina żadnego innego szablonu dashboardu tam na rynku. O to właśnie chodzi.

Dlaczego to ważne

RetroUI 2.0 to nie tylko dodawanie funkcji. To uczynienie RetroUI potężniejszym, bardziej elastycznym i bardziej użytecznym w projektach ze świata rzeczywistego.

Wsparcie Base UI oznacza lepszą wydajność i dostępność.

Ujednolicona strona oznacza łatwiejsze odkrywanie i lepsze doświadczenie dla wszystkich.

Ulepszona dokumentacja oznacza mniej czasu na szukanie, więcej na budowanie.

Ponad 100 nowych blocks oznacza, że możesz wypuszczać kompletne strony w minuty, a nie dni.

Szablon w trybie ciemnym oznacza, że masz solidny fundament pod kolejny projekt.

Razem te nowości czynią RetroUI 2.0 najbardziej kompletną, gotową do produkcji biblioteką UI dla programistów, którzy odmawiają budowania nudnych interfejsów.

Co dalej?

To duże wydanie, ale na tym nie kończymy. Oto co jest na mapie drogowej:

• Więcej szablonów (warianty w trybie jasnym, landing page, e-commerce)
• Integracja Figma do kodu dla szybszego przepływu od projektu do wdrożenia
• Dodatkowe komponenty Base UI w miarę rozbudowy biblioteki
• Witryna społeczności prezentująca projekty zbudowane w RetroUI
• Poradniki wideo przechodzące przez typowe wzorce i przypadki użycia

Słuchamy też. Jeśli jest komponent, którego potrzebujesz, funkcja, której chcesz, albo problem, na który trafiasz, daj nam znać. RetroUI jest budowane dla programistów, przez programistów. Twoja opinia kształtuje to, co zbudujemy dalej.

Wypróbuj RetroUI 2.0 już dziś

Gotowy zanurzyć się? Oto jak zacząć:

Dla nowych użytkowników

Kopiuj# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Przeglądaj komponenty, poznaj blocks i chwyć nowy szablon. Wszystko jest gotowe do użycia w twoim projekcie Next.js, React albo Vite.

Dla obecnych użytkowników

Jeśli już używasz RetroUI, przejście na 2.0 jest proste:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Kopiuj

Sprawdź changelog pod kątem ewentualnych zmian łamiących zgodność (jest ich bardzo niewiele, a dla wszystkich udokumentowaliśmy obejścia).

Dziękujemy

RetroUI istnieje, bo programiści tacy jak ty mają dość generycznych projektów. Chcesz budować rzeczy, które się wyróżniają, które mają charakter, które sprawiają wrażenie innych.

Jesteśmy tu, by ci to ułatwić.

Wersja 2.0 to owoc miesięcy pracy, setek commitów, niezliczonych iteracji projektowych i opinii niesamowitej społeczności. Dziękujemy, że jesteś częścią tej podróży.

Teraz idź i zbuduj coś odważnego. 🚀

Poznaj RetroUI 2.0:

• Przeglądaj komponenty
• Zobacz blocks
• Chwyć szablon
• Przeczytaj dokumentację
• Dołącz do społeczności

Pytania? Opinie? Znalazłeś buga? Otwórz issue na GitHubie albo odezwij się na Twitterze/X.