Представляємо RetroUI 2.0 - більше, сміливіше, краще

Місяцями ми будували в темряві. Сьогодні вмикаємо світло.

RetroUI 2.0 тут — і це найбільше оновлення, яке ми будь-коли випускали. Це не просто зміна номера версії, а повна еволюція того, що вміє RetroUI і як ви з ним взаємодієте.

Коли ми запускали RetroUI, мета була проста: дати розробникам UI-бібліотеку, яка не схожа на все інше. Сміливі дизайни, необруталістська естетика й компоненти, завдяки яким ваші проєкти вирізняються. Це бачення не змінилося. А от те, як ми його втілюємо, змінилося кардинально.

Розберемо, що нового.

🎨 Підтримка Base UI - фундамент, про який ви просили

Однією з найбільш запитуваних можливостей із першого дня була підтримка Base UI — і ось вона нарешті тут.

Що таке Base UI?

Base UI — це бібліотека нестилізованих, доступних React-компонентів від команди MUI. Вважайте її headless-альтернативою Material UI, не прив'язаною до фреймворку: ви отримуєте всю поведінку й усю логіку доступності без жодного нав'язаного візуального рішення.

Чому це важливо для RetroUI

Досі компоненти RetroUI будувалися на примітивах Radix UI (які чудові, зрозумійте правильно). Але Base UI відкриває нові можливості:

• Гнучкість фреймворку: Base UI без тертя працює в React, Next.js та інших сучасних фреймворках
• Кращий tree-shaking: легші бандли завдяки відточеній оптимізації
• Посилена доступність: примітиви доступності Base UI багаторазово перевірені й відповідають WCAG з коробки
• Архітектура, готова до майбутнього: створена під React Server Components і сучасну екосистему React

Що це означає для вас? Компоненти RetroUI тепер швидші, доступніші й гнучкіші, ніж будь-коли. І все це без відмови від сміливої, впізнаваної дизайн-мови, яка вам подобається.

Скопіювати// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 Один сайт, одне бачення - OS і Pro разом

Ось що нас непокоїло: тримати окремі сайти для RetroUI OS (безкоштовної) і RetroUI Pro відчувалося... розрізнено. Наче ми ділимо спільноту замість того, щоб її об'єднувати.

Тепер — ні.

Повністю перероблений сайт

Ми перебудували весь сайт RetroUI з нуля, об'єднавши OS і Pro в єдиний цілісний досвід. Ось що нового:

Єдина бібліотека компонентів

Переглядайте всі компоненти, безкоштовні й pro, в одному місці. Більше жодних стрибків між сайтами, щоб дізнатися, що доступно. Усе чітко позначено, тож ви розумієте, що безкоштовно, а що преміум.

Чистіша навігація

Знаходити потрібне тепер швидше й інтуїтивніше. Компоненти, blocks, шаблони, документація — у кожного своє логічне місце.

Відточеніший дизайн

Ми діємо за тим, що проповідуємо. Новий сайт сміливіший, швидший і відточеніший. Це вітрина того, на що здатен RetroUI, коли ви віддаєтеся естетиці цілком.

Кращий досвід на мобільних

Старий сайт працював на мобільних. Новий на мобільних сяє. Адаптивний дизайн як слід, із сенсорними взаємодіями, що відчуваються нативними.

Найкраще? Усе це працює на компонентах RetroUI. Ми їмо власну їжу: кожен компонент, який ви бачите на сайті, — це те, що ви можете використати у своїх проєктах.

📚 Документація, яка справді допомагає

Будьмо чесні: документацію часто лишають на потім. Але не цього разу.

Ми повністю переробили документацію RetroUI, додавши можливості, що спрощують вам життя:

Копіювання в Markdown

Працюєте над документацією власного проєкту? Пишете статтю про RetroUI? Тепер ви можете скопіювати код компонента як Markdown в один клік.

Ідеально для:

• Створення документації до власних компонентів
• Написання туторіалів і посібників
• Обміну прикладами коду в інструментах на основі Markdown (Notion, GitHub тощо)

Документація з підтримкою ШІ

Ми вбудували допомогу ШІ прямо в документацію. Є запитання, як налаштувати компонент? Треба розібратися в API? ШІ допоможе знайти відповіді швидше, ніж перекопування сторінок документації.

Приклади того, що можна запитати:

• «Як змусити компонент Button використовувати кастомні кольори?»
• «Які props приймає компонент Card?»
• «Покажи приклади використання Modal із формами»

Це наче мати експерта з RetroUI під рукою цілодобово.

Покращені приклади коду

Тепер у кожного компонента є:

• Живі прев'ю, з якими можна взаємодіяти
• Кілька варіантів, що показують різні сценарії використання
• Готовий до копіювання код із коректними імпортами
• Приклади на TypeScript для надійнішої типізації
• Нотатки про доступність, що пояснюють, як кожен компонент працює з a11y

Жодних більше здогадок. Жодного більше перекопування вихідників. Лише зрозумілі, корисні приклади, що допомагають будувати швидше.

🧱 Понад 100 нових blocks - будуйте швидше, ніж будь-коли

Компоненти — це чудово. Але іноді потрібні цілі секції, а не лише кнопки й картки.

Ось тут і вступають blocks.

Що таке blocks?

Blocks — це готові секції, які можна кинути в проєкт: hero-секції, таблиці цін, сітки можливостей, відгуки, CTA та інше. Вони повністю адаптивні, доступні й готові до налаштування.

Що нового у 2.0?

Ми додали понад 100 нових blocks у всіх категоріях, які тільки можна уявити:

Hero-секції

• Понад 15 нових варіантів hero — від мінімалістичних до на весь екран
• Зокрема анімовані фони, макети з розділеним екраном і hero з відео

Можливості й переваги

• Сітки можливостей на основі іконок
• Вітрини зі скріншотами
• Покрокові посібники
• Порівняльні таблиці

Таблиці цін

• Від простих макетів на 2 колонки до складних тарифів із 4 рівнів
• Перемикач оплати (щомісяця/щороку)
• Матриці порівняння можливостей

Відгуки

• Сітки, каруселі й кладкові (masonry) макети
• Відеовідгуки
• Стіни логотипів як соціальний доказ

CTA й конверсії

• Підписки на розсилку
• Форми списку очікування
• Секції завантаження застосунку
• Форми зворотного зв'язку з характером

Шапки й навігація

• Мегаменю
• Патерни навігації в підході mobile-first
• Липкі шапки з ефектами при прокручуванні

Підвали

• Багатоколонкові підвали
• Мінімалістичні однорядкові підвали
• Підвали з вбудованою розсилкою

Кожен block виконаний у тій самій сміливій естетиці RetroUI — товсті рамки, жорсткі тіні, яскраві кольори й асиметричні макети. Вони створені, щоб вирізнятися, а не зливатися з тлом.

Скопіювати// 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"
/>

🌙 Новий шаблон: темний дашборд для dev-інструментів

Шаблони — це місце, де все сходиться: компоненти, blocks і філософія дизайну, об'єднані в завершений застосунок.

Представляємо наш найновіший шаблон — Dark Mode Dev Tool Dashboard.

Що це?

Повнофункціональний дашборд, побудований із пріоритетом темного режиму, для інструментів розробників, SaaS-платформ і адмінпанелей. Це все, що потрібно, щоб зібрати готовий до продакшену застосунок у сміливій естетиці RetroUI.

Що входить?

Повний макет дашборда

• Бічна навігація зі згортуваним меню
• Верхня шапка з пошуком і профілем користувача
• Адаптивний дизайн, що працює на мобільних, планшетах і десктопі

Готові сторінки

• Оглядова панель із метриками й графіками
• Керування користувачами (список, деталі, редагування)
• Сторінка налаштувань із прикладами форм
• Сторінка документації API
• Керування оплатою й підписками

Темний режим як слід

• Не просто інвертовані кольори, а осмислений дизайн під темні фони
• Високий контраст заради читабельності
• Яскраві акцентні кольори, що б'ють по очах на темному тлі

Можливості, готові до продакшену

• Екрани автентифікації (вхід, реєстрація, відновлення пароля)
• Стани помилок і порожні стани
• Скелетони завантаження
• Toast-сповіщення
• Модальні діалоги й підтвердження

Зручно для розробників

• Написаний на TypeScript
• Задокументована структура компонентів
• Легко налаштовувати й розширювати
• Дотримується угод App Router із Next.js

Це не іграшковий шаблон. Це основа, на якій можна будувати реальні продукти. Хоч ви запускаєте новий SaaS, збираєте внутрішній інструмент чи створюєте платформу для розробників — цей шаблон дає вам фору.

І так, він зовсім не схожий на всі інші шаблони дашбордів. У цьому й суть.

Чому це важливо

RetroUI 2.0 — це не лише про додавання можливостей. Це про те, щоб зробити RetroUI потужнішим, гнучкішим і кориснішим для реальних проєктів.

Підтримка Base UI означає кращу продуктивність і доступність.

Єдиний сайт означає простіший пошук і кращий досвід для всіх.

Покращена документація означає менше часу на пошук і більше — на розробку.

Понад 100 нових blocks означають, що ви можете випускати цілі сторінки за хвилини, а не дні.

Шаблон у темному режимі означає, що у вас є міцна основа для наступного проєкту.

Разом ці оновлення роблять RetroUI 2.0 найповнішою, готовою до продакшену UI-бібліотекою для розробників, які відмовляються будувати нудні інтерфейси.

Що далі?

Це великий реліз, але ми на цьому не зупиняємося. Ось що в дорожній карті:

• Більше шаблонів (варіанти у світлому режимі, лендинги, e-commerce)
• Інтеграція Figma-у-код для швидшого шляху від дизайну до розробки
• Нові компоненти Base UI у міру розширення бібліотеки
• Вітрина спільноти з проєктами, побудованими на RetroUI
• Відеотуторіали, що розбирають часті патерни й сценарії використання

І ми дослухаємося. Якщо вам потрібен якийсь компонент, ви хочете певну можливість або зіткнулися з проблемою — дайте нам знати. RetroUI створений для розробників розробниками. Ваші відгуки визначають, що ми побудуємо далі.

Спробуйте RetroUI 2.0 сьогодні

Готові поринути? Ось із чого почати:

Якщо ви новачок

Скопіювати# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Переглядайте компоненти, вивчайте blocks і забирайте новий шаблон. Усе готове до використання у вашому проєкті на Next.js, React чи Vite.

Якщо ви вже використовуєте RetroUI

Якщо ви вже використовуєте RetroUI, перехід на 2.0 простий:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Скопіювати

Зазирніть у changelog щодо змін, які ламають сумісність (їх зовсім небагато, і для кожної ми задокументували обхідний шлях).

Дякуємо

RetroUI існує тому, що розробники на кшталт вас втомилися від безликих дизайнів. Ви хочете будувати те, що вирізняється, що має характер, що відчувається інакше.

Ми тут, щоб зробити це простіше.

Версія 2.0 — результат місяців роботи, сотень комітів, незліченних ітерацій дизайну й відгуків від приголомшливої спільноти. Дякуємо, що ви частина цього шляху.

А тепер ідіть і побудуйте щось сміливе. 🚀

Вивчіть RetroUI 2.0:

• Переглянути компоненти
• Подивитися blocks
• Забрати шаблон
• Прочитати документацію
• Приєднатися до спільноти

Запитання? Відгуки? Знайшли баг? Відкрийте issue на GitHub або напишіть у Twitter/X.