ValyroUI — компоненты React в 19 темах

ValyroUI — UI-кит для React с темами: бесплатное ядро под MIT и Pro-компоненты, которые ставятся исходным кодом через CLI, shadcn или MCP.

340 компонентов и 19 тем; бесплатное ядро — 77 компонентов и темы vercel, glass, high-contrast. Начать · Все компоненты

Основа

Из этого собран любой интерфейс

• Базовые элементы — Кнопки, бейджи, аватары, подсказки и индикаторы загрузки (11)
• Навигация и каркас — Каркас приложения, шапка, сайдбар, вкладки, меню и палитра команд (13)
• Окна и уведомления — Алерты, тосты, диалоги, шторки, поповеры и онбординг-туры (11)

Формы и данные

Ввод, таблицы, показатели и графики

• Формы и ввод — Поля, выбор из списка, даты, маски, цвета, файлы и фильтры (40)
• Данные и показатели — Таблицы, гриды, списки, деревья, карточки и виджеты дашборда (24)
• Графики и аналитика — Графики, диаграммы, карты, схемы и сценарии «что если» (24)

Приложения

Готовые экраны SaaS, ИИ и инструментов

• Работа и команды — Календарь, планировщик, канбан, CRM, согласования и редактор текста (14)
• Аккаунт и доступ — 2FA, сессии и токены, профиль, настройки, права и журнал действий (12)
• ИИ: чат и агенты — Чат с ИИ, промпт, выбор модели, рассуждения, инструменты и агенты (25)
• Изображения и генерация — Промпт и параметры генерации, результаты, инпейнтинг и нод-граф (17)
• Разработчикам — Код, логи, диффы, API-ключи, вебхуки, статус сервисов и фичефлаги (12)

Сайты и магазины

Лендинги, магазины и медиа

• Лендинги и бренд — Hero, тарифы, отзывы, FAQ, подвал и витрина дизайн-системы (17)
• Магазин и платежи — Каталог, корзина, оформление заказа, карты, кошелёк и подписки (23)
• Контент и соцсети — Статьи, новости, факты и источники, посты, комментарии и медиа (24)
• Игры — Тир-листы, мета, контрпики, турнирные сетки и патчноуты для игровых сайтов (5)

Анимация

Движение, фоны, 3D и WebGL

• Анимированные компоненты — Пружинные кнопки, списки с перестройкой, радиальные меню и раскрытие слоёв (18)
• Эффекты — Жидкое стекло, фоны, эффекты текста, чисел и курсора (24)
• 3D и моушн — Моушн для любых компонентов, сцены на прокрутке, 3D-объекты и кнопки, WebGL (26)

Вопросы

Можно ли бесплатно в коммерческом проекте?

Да. Ядро — 77 компонентов и 3 темы — под лицензией MIT, в том числе для коммерческих проектов. Pro — платная лицензия на всё остальное.

Нужен ли Tailwind?

Нет: компоненты стилизованы CSS-переменными и работают без него. Если в проекте Tailwind v4, valyro-ui/tailwind.css превращает каждый токен темы в утилиту.

Работает ли с Next.js и рендером на сервере?

Да, на React 17, 18 и 19. Каждый компонент рендерится в HTML из пропсов; в React Server Components используйте именованные экспорты частей (DialogTrigger, TabsTab, …).

Насколько это доступно?

Клавиатура, фокус и ARIA-паттерны встроены, axe проверяет каждую историю Storybook, а High Contrast — отдельная тема. Поведение доводим до уровня React Aria — это есть в дорожной карте.

Можно ли сделать свою тему?

Да. Тема — это набор CSS-переменных --ui-* под атрибутом data-theme: переопределите нужные на своём селекторе или возьмите за основу ближайшую из 19 тем.

Можно ли без React?

Стили — да: Vue, Nuxt, SvelteKit, Angular, SolidStart и обычный HTML используют тот же CSS, а гайды дают разметку. Поведение вроде меню и диалогов есть в React-компонентах.

Что добавляет Pro?

Все 340 компонентов и все 19 тем со шрифтами, Pro-реестр для CLI, шаблоны, SwiftUI и WordPress.