HeroUI: красивая, быстрая и современная React UI-библиотека на базе Tailwind CSS 220

Что такое HeroUI?

HeroUI (ранее NextUI) — красивая, быстрая и современная библиотека компонентов React UI на основе Tailwind CSS, поддерживающая настройку тем, автоматическое переключение между светлым и тёмным режимами, обеспечивающая высокую доступность благодаря React Aria, типобезопасный опыт разработки и мультипакетную структуру, включая Pro-версию с более чем 210 готовыми компонентами, а также совместимая с новой структурой каталогов Next.js.

Основные особенности HeroUI

• На базе Tailwind CSS: использует Tailwind CSS в качестве движка стилей, без стилей во время выполнения, не создаёт ненужных классов в вашем пакете.

• Автоматическое распознавание тёмного режима: способен автоматически определять изменения атрибута темы HTML, автоматически переключая тему.

• Полная типизация: предоставляет полностью типизированный API, минимизируя кривую обучения и помогая разработчикам быстро приступить к работе.

• Декаплинг компонентов: компоненты разделены на несколько пакетов, можно установить только необходимые компоненты.

• Соответствие рекомендациям WAI-ARIA: компоненты соответствуют рекомендациям WAI-ARIA, обеспечивают поддержку клавиатуры и разумное управление фокусом.

• Богатая коллекция готовых шаблонов: более 210+ красивых адаптивных компонентов.

Ключевые функции HeroUI

Система тем

• Предоставляет плагин Tailwind CSS, поддерживающий изменение семантических меток темы по умолчанию (таких как цвета, фон) или создание совершенно новых тем; пример кода демонстрирует конфигурацию основных цветов для разных тем (например, primary: "#0072f5").

• Поддерживает автоматическое переключение между светлым и тёмным режимами, обнаруживая атрибут dark в HTML и автоматически переключая тему; для активации тёмной темы по умолчанию достаточно добавить атрибут в корневой тег.

Производительность

• На базе Tailwind CSS, без стилей во время выполнения; неиспользуемые классы удаляются при сборке, что обеспечивает лёгкость и скорость.

• Полностью типизированный API (поддержка TypeScript), снижает кривую обучения, поддерживает React Server Components (компоненты содержат директиву "use client" и могут напрямую использоваться в RSC).

• Мультипакетная архитектура позволяет разработчикам устанавливать компоненты по мере необходимости, уменьшая избыточные зависимости.

Доступность (Accessibility)

• Построена на базе React Aria, соответствует стандарту WAI-ARIA, включает навигацию с клавиатуры, управление фокусом, поддержку экранных читалок и другие функции; кольцо фокуса отображается только при навигации с клавиатуры или через экранную читалку.

Возможности кастомизации компонентов

• На базе Tailwind Variants поддерживается настройка стилей компонентов через слоты, что позволяет избежать конфликтов классов. Пример кода демонстрирует конфигурацию стилей пользовательской кнопки (например, анимация при наведении, эффекты тени).

• Компоненты поддерживают ** polymorphic as prop**, позволяющий переопределять тег компонента (например, отображать кнопку как ссылку).

Часто задаваемые вопросы о HeroUI

Как настроить тему в HeroUI?

Ответ:С помощью встроенного плагина Tailwind CSS. Настройте плагин heroui в tailwind.config.js, чтобы изменить семантические метки тем light и dark (например, цвета, фон) или даже создать совершенно новую тему.

В чём проявляется доступность HeroUI?

Ответ:Построена на базе React Aria, соответствует стандарту WAI-ARIA, поддерживает навигацию с клавиатуры, управление фокусом, поддержку экранных читалок, обнаружение коллизий и управление выравниванием. Кольцо фокуса отображается только при навигации с клавиатуры или через экранную читалку, что позволяет пользователям с ограниченными возможностями беспрепятственно работать с интерфейсом.

Какие ключевые ресурсы предоставляет версия HeroUI Pro?

Ответ:HeroUI Pro включает 210+ адаптивных готовых компонентов, пожизненный доступ, бесплатные обновления и файлы дизайна Figma, что помогает разработчикам быстро создавать проекты.