Представляем 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.