HeroUI: biblioteca de UI React moderna, rápida y bonita basada en Tailwind CSS 217

¿Qué es HeroUI?

HeroUI (antes NextUI) es una biblioteca de UI para React, atractiva, rápida y moderna, basada en Tailwind CSS. Soporta personalización de temas, cambio automático entre modo claro y oscuro, ofrece alta accesibilidad gracias a React Aria, proporciona una experiencia de desarrollo con tipos seguros y una estructura multi-paquete. Incluye una versión Pro con más de 210 componentes prefabricados y es compatible con la nueva estructura de directorios de Next.js.

Características principales de HeroUI

• Basado en Tailwind CSS: utiliza Tailwind CSS como motor de estilos, sin estilos en tiempo de ejecución y sin generar clases innecesarias en tu paquete.

• Detección automática del modo oscuro: capaz de detectar automáticamente los cambios en el atributo de tema del HTML, alternando el tema de forma automática.

• Totalmente tipado: ofrece una API completamente tipada, reduciendo la curva de aprendizaje y ayudando a los desarrolladores a comenzar rápidamente.

• Componentes desacoplados: los componentes se dividen en varios paquetes, por lo que puedes instalar solo los que necesites.

• Sigue las pautas WAI-ARIA: los componentes cumplen con las pautas WAI-ARIA, ofreciendo soporte de teclado y una gestión adecuada del foco.

• Plantillas prediseñadas abundantes: proporciona más de 210+ componentes responsivos y atractivos.

Funciones principales de HeroUI

Sistema de temas

• Proporciona un plugin para Tailwind CSS que permite modificar las etiquetas semánticas del tema predeterminado (como colores o fondos) o crear temas completamente nuevos. El código de ejemplo muestra la configuración del color principal de diferentes temas (como primary: "#0072f5").

• Soporta el cambio automático entre modo claro y oscuro, detectando el atributo dark del HTML para alternar el tema automáticamente. Basta con añadir el atributo en la etiqueta raíz para activar el tema oscuro por defecto.

Rendimiento

• Basado en Tailwind CSS, sin estilos en tiempo de ejecución, eliminando las clases no utilizadas durante el empaquetado para garantizar ligereza y rapidez.

• API completamente tipada (con soporte para TypeScript), reduciendo la curva de aprendizaje y compatible con React Server Components (los componentes incluyen la directiva "use client" y pueden usarse directamente en RSC).

• Diseño con estructura multi-paquete que permite a los desarrolladores instalar los componentes bajo demanda, reduciendo dependencias innecesarias.

Accesibilidad (Accessibility)

• Construido sobre React Aria, sigue el estándar WAI-ARIA e incorpora navegación por teclado, gestión del foco, compatibilidad con lectores de pantalla y más. El anillo de enfoque solo se muestra durante la navegación con teclado o lector de pantalla.

Capacidad de personalización de componentes

• Basado en Tailwind Variants, permite personalizar los estilos de los componentes mediante slots para evitar conflictos de clases. El código de ejemplo muestra la configuración de estilos de un botón personalizado (como animaciones al pasar el cursor y efectos de sombra).

• Los componentes admiten **polymorphic as prop**, lo que permite sobrescribir la etiqueta del componente (por ejemplo, renderizar un botón como un enlace).

Preguntas frecuentes sobre HeroUI

¿Cómo personalizar los temas en HeroUI?

Respuesta: A través del plugin integrado de Tailwind CSS, configura el plugin de heroui en tailwind.config.js para modificar las etiquetas semánticas de los temas light y dark (como colores y fondos), o incluso crear temas completamente nuevos.

¿En qué aspectos se refleja la accesibilidad de HeroUI?

Respuesta: Construido sobre React Aria, sigue el estándar WAI-ARIA y ofrece navegación por teclado, gestión del foco, compatibilidad con lectores de pantalla, detección de colisiones y control de alineación. El anillo de enfoque solo se muestra durante la navegación con teclado o lector de pantalla, permitiendo que los usuarios con discapacidad también puedan usarlo sin barreras.

¿Qué recursos principales ofrece la versión HeroUI Pro?

Respuesta: HeroUI Pro incluye más de 210 componentes responsivos prefabricados, acceso de por vida, actualizaciones gratuitas y archivos de diseño de Figma, lo que ayuda a los desarrolladores a construir proyectos rápidamente.