Componentes de React UI: 15 bibliotecas populares

React existe desde hace más de una década. Lo cual es una locura pensar. Pero, a pesar de su antigüedad, la biblioteca React obtiene más de 14 millones de descargas semanales. También hay más de 80 000 otros proyectos de código abierto que dependen de React para funcionar.

Muchos de esos proyectos amplían React ampliamente. Específicamente, los desarrolladores crean elementos y componentes personalizados que se pueden reutilizar durante el desarrollo de la aplicación. De hecho, trabajar con React se trata casi exclusivamente de componentes. Si desea armar un MVP o crear un diseño de aplicación rápidamente, los componentes hacen que el proceso sea rápido y accesible.

Si desea actualizar su comprensión de React, consulte este artículo de Linton Ye.

¿Debería usar una biblioteca de componentes React UI?

React es, por naturaleza, una biblioteca para crear interfaces de usuario. Los componentes en este contexto son elementos de interfaz de usuario preconstruidos que puede reutilizar en su proceso de desarrollo. Los componentes de React (o cualquier otro marco) tienen como objetivo acelerar el ritmo al que crea aplicaciones.

Pero, también hay algunos beneficios sustanciales al usar una biblioteca de componentes:

• Ritmo de desarrollo. Debido a que los componentes están preconstruidos, puede armar rápidamente un prototipo de trabajo de cómo planea que se vea su aplicación al final.
• Productividad. Cada biblioteca de componentes individuales cubre elementos de diseño como formularios, botones y secciones. Como tal, puede evitar tener que diseñar esos elementos usted mismo.
• Familiaridad con el diseño. La creatividad tiene su lugar, pero brindar una experiencia de diseño familiar a sus usuarios es esencial si desea brindar una experiencia sin fricciones.
• Últimos estándares. En particular, la mayoría de las bibliotecas modernas se desarrollan para que los componentes cumplan con los últimos estándares de accesibilidad.

En cuanto a la desventaja potencial, bueno, en la mayoría de los casos, dependerá del soporte del desarrollador/comunidad. Y, también es una pequeña curva de aprendizaje dominar una nueva biblioteca, pero definitivamente es un problema pequeño en el panorama general.

¿Qué es un Sistema de Diseño?

Los componentes de React se dividen en una variedad de categorías. Puede seleccionar y elegir entre componentes "individuales" o una biblioteca de componentes de interfaz de usuario completa. Y, en muchos casos, estas bibliotecas completas incluyen un sistema de diseño completo .

En términos simples, un sistema de diseño es un conjunto completo de componentes que se pueden usar para crear aplicaciones a escala. Probablemente hayas oído hablar de Material UI de Google, el sistema de diseño Polaris de Shopify y muchos otros.

En todo caso, un sistema de diseño ayuda a crear una experiencia de usuario coherente mediante la reutilización de los mismos componentes de la interfaz de usuario. Afortunadamente, cada biblioteca presenta un concepto de diseño único.

Criterios simples

Al armar este resumen, seguí criterios simples para garantizar que esta lista siga siendo relevante y esté actualizada:

• Completo. Como en, cada biblioteca está completamente extendida y cubre una amplia gama de elementos de la interfaz de usuario.
• Accesibilidad. Esto es específico de la experiencia de desarrollo. Mi principal preocupación es que la biblioteca de componentes dada debería ser fácil de trabajar desde la perspectiva de un desarrollador.
• Activo. Como en, la biblioteca tiene seguidores activos y se actualiza con frecuencia.

También tomé en cuenta cosas como la popularidad de GitHub y la tracción general entre los tutoriales de desarrollo web, etc. Si aparece una nueva biblioteca de componentes React y se muestra prometedora, haré todo lo posible para incluirla en esta lista.

Miremos más de cerca.

Mantina

Mantine es una extensa biblioteca de componentes de interfaz de usuario que cubre varios elementos e incluye ganchos para cada uno. Creada por Vitaly Rtishchev, la biblioteca ha atraído a muchos seguidores desde su primer lanzamiento en 2021. Mantine incluye un tema oscuro nativo y todos los componentes están disponibles en los estilos claro y oscuro.

En total, hay más de 120 componentes personalizados.

La documentación cubre una amplia gama de casos de uso, incluido cómo usar Mantine con Next.js y Gatsby. El proyecto está en pleno desarrollo activo. Y, como han dicho algunos desarrolladores, "La documentación no tiene paralelo". .

Chakra

Chakra es una de las bibliotecas React UI de más rápido crecimiento. La premisa de componentes simples y accesibles significa que puede comenzar a arrancar sus aplicaciones al instante. Además de eso, Chakra sigue un estricto espíritu de principios de diseño. Cada componente viene con un accesorio de estilo único, lo que significa que puede personalizar los estilos de los componentes individualmente.

Si se compara Chakra con bibliotecas de componentes más rígidas, es evidente que Chakra funciona en un entorno sin opiniones. Como tal, escalar aplicaciones e interfaces se vuelve más fácil ya que no necesitará depender de especificaciones de propiedad estrictas.

Otras características notables incluyen compatibilidad con TypeScript, accesibilidad a través de WAI-ARIA y a11y, y Styled System para estilo de utilería.

Interfaz de usuario de materiales

¿Material Design ya necesita una presentación? La biblioteca MUI implementa todo el sistema de diseño de Google en una biblioteca React extendida. MUI es también una de las bibliotecas más queridas en esta rama. Con casi 75 000 estrellas en GitHub, la popularidad de MUI es bastante clara. Entonces, ¿qué lo hace tan exitoso?

En primer lugar, MUI se ejecuta como una marca en lugar de únicamente como un proyecto de código abierto. Esto significa que, para proteger la integridad de su marca, los componentes tienen un estilo perfecto. Lo mismo ocurre con la documentación, que no es el tipo promedio de "aquí hay un ejemplo" .

Sin embargo, la mejor parte es la cantidad de personas que dependen de MUI. Debido a que el proyecto es tan popular, existen innumerables recursos gratuitos para ayudarlo a comenzar. Plantillas de página de destino, una maqueta de diseño de blog y estilos de cartera. Piense en un proyecto, y es probable que alguien ya haya publicado un modelo para algo similar.

gestalt

Gestalt es " Un conjunto de componentes React UI que admite el lenguaje de diseño de Pinterest" . En otras palabras, es el sistema de diseño utilizado por los equipos de desarrolladores y diseñadores de Pinterest.

Echando un vistazo más de cerca, Gestalt se diferencia de otros sistemas de diseño al ofrecer una base sólida basada en estándares web modernos. Esos estándares incluyen accesibilidad, opciones de color persistentes y optimización variable en profundidad.

Y debido a que Pinterest usa React en la producción, cada componente de esta biblioteca tiene un componente React prefabricado disponible.

PrimeReaccionar

Es posible que PrimeReact no tenga el presupuesto de marketing de los gigantes, pero no obstante es una biblioteca excepcional. Debido a su naturaleza agnóstica, PrimeReact es independiente del estilo.

Como tal, puede usarlo con guías de estilo populares como Tailwind, Material, Bootstrap, Arya y otras. Puede elegir el tema base usando su función de diseñador.

Los componentes en sí mismos cubren todo lo que esperaría de una extensa biblioteca. Menús, variedad de paneles, tablas de datos y mucho más. PrimeReact es parte del proyecto PrimeFaces. Esto le permite acceder rápidamente a sus otros recursos como Temas y Bloques.

Oreja

¿Puede incluso llamarse desarrollador front-end si nunca ha probado Bootstrap? El conjunto de herramientas front-end favorito de todos los tiempos ( subjetivo ) también tiene una biblioteca React. Y se ha construido desde cero para ser React-first. Cada componente se ha diseñado a medida para incluir funciones de Bootstrap, pero es independiente de jQuery.

Una característica notable de esta biblioteca es que utiliza exclusivamente la guía de estilo Bootstrap.

Como tal, es posible usar React Bootstrap con diseños basados ​​en la hoja de estilo original. Por ejemplo, puede tomar un tema de WordPress basado en Bootstrap y reestructurarlo rápidamente como un diseño basado en React.

Hojas perennes

Evergreen es la primera biblioteca de esta lista que también es un sistema de diseño. Y es proporcionado generosamente por Segment. Entonces, si observa el sitio web de Segment y su producto, sabrá que está construido sobre la base de Evergreen. Dicho esto, esta biblioteca no lo encerrará en una configuración específica ni requerirá una integración poco ortodoxa.

En sus propias palabras, “En lugar de crear configuraciones fijas que funcionen hoy, Evergreen promueve sistemas de construcción que anticipan nuevos y cambiantes requisitos de diseño”.

Todos los componentes también están disponibles como archivo Figma.

La biblioteca se envía con 2 temas personalizados: clásico y predeterminado . Y tienes la opción de definir estilos personalizados para cada tema, o simplemente crear uno nuevo desde cero.

Arco Diseño

La comunidad de desarrolladores chinos ha hecho algunas contribuciones impecables al código abierto. Y, Arco no es una excepción. Esta biblioteca de componentes de nivel empresarial transformará el proceso de creación de interfaces modernas. También es un sistema de diseño que garantiza que toda su base de diseño siga una rutina estricta.

Arco se destaca por su refinada filosofía de diseño. Su sistema de diseño enfatiza la accesibilidad pero también la experiencia del usuario. Un ejemplo de esto es su enfoque para el diseño de formularios.

Los formularios intentan en gran medida completar una acción de forma sincrónica. En lugar de proporcionar un modal externo, Arco se especializa en comentarios en tiempo real basados ​​en la entrada del usuario. Sus componentes también se pueden descargar para usar dentro de Figma y Sketch, respectivamente.

Geist

Geist UI se creó bifurcando el sistema de diseño proporcionado por Vercel. Mi primera impresión de Geist es que es bastante minimalista. Lo que lo hace perfecto para crear páginas de destino y sitios web de cartera.

Aunque, evidentemente, se ha utilizado tanto en aplicaciones web como en implementaciones de proyectos más complejos. En actualizaciones recientes, Geist ha implementado la capacidad de agregar temas .

Entonces, si le gusta la estructura y la variedad de componentes, implementar un estilo personalizado es sencillo. También puede llamar a estilos personalizados para componentes individuales.

Interfaz de usuario fluida

React es una tecnología tan innovadora que todo el paquete Microsoft 365 se basa en ella.

Bueno, a través de Fluent UI, por supuesto.

Fluent es la versión de Microsoft de cómo debería ser una biblioteca de componentes React.

Y, sinceramente, aunque proporciona componentes de interfaz de usuario, hace mucho más.

El paquete Fluent UI Utilities incluye muchas clases, funciones e interfaces. Estos le ayudarán a crear experiencias de usuario ricas e interactivas. Más que crear aplicaciones, Fluent lo ayuda a crear verdaderas experiencias empresariales.

También es administrado por Microsoft. Por lo tanto, cosas como los problemas de confiabilidad están fuera de discusión.

Base

Uno de los principales atractivos de cualquier tipo de biblioteca de componentes es el estilo. ¿Es ordenado, geek o de aspecto profesional? ¿Replica una aplicación web popular? Todas estas son preguntas válidas.

Sin embargo, Radix UI se especializa en un enfoque diferente.

Radix, que es una biblioteca de componentes de bajo nivel, enfatiza la accesibilidad y el potencial para un estilo personalizado. Lo hace introduciendo los componentes como una base barebone.

Debido a que los componentes se envían sin procesar , puede profundizar en la libertad creativa para diseñarlos usted mismo. A cambio, Radix proporciona una implementación de accesibilidad nativa. Además, los componentes están diseñados para ser granulares, lo que permite una integración de guía de estilo personalizada.

Reiki

Reakit es un extenso conjunto de herramientas para mantener aplicaciones web ricas. Es accesible por diseño e implementa una estructura estilo paquete. Esto significa que puede usar componentes individuales y deshabilitar otros. Como resultado, el tamaño del paquete puede dividirse inmensamente.

Importante tener en cuenta que Reakit no viene con un estilo predeterminado. Esto también la convierte en una biblioteca de componentes de "bajo nivel". La interfaz de usuario de bienvenida, utilizando Reakit, es un ejemplo de cómo puede crear estilos personalizados. Sin embargo, no debería ser difícil de usar con algo como Tailwind.

Semi

El sistema Semi Design alimenta todo el front-end de TikTok. Está construido como una biblioteca de interfaz de usuario integral de primera empresa. En particular, además de los componentes modulares, Semi también publica su kit de interfaz de usuario en Figma. Esto ayuda a acelerar el proceso de diseño de sus aplicaciones y la incorporación de los desarrolladores.

En cuanto a la tematización, Semi tiene una plataforma personalizada de "hágalo usted mismo" creada para ese propósito. El objetivo es acelerar el ritmo al que define un sistema y luego ponerlo en producción.

Diseño de hormigas

La influencia de lo moderno y accesible del Lejano Oriente es difícil de pasar por alto. Ant Design es la biblioteca de componentes más popular en GitHub. Al menos para React. No solo proporciona componentes de interfaz de usuario, sino que también es un lenguaje de diseño. Ver detalles aquí.

Una de las cosas que hacen que Ant sea tan popular son los recursos disponibles. El equipo central que mantiene Ant ha realizado un trabajo excepcional en esta área. Puede elegir entre plantillas prediseñadas, experiencias móviles personalizadas o profundizar en la documentación.

Además, para minimizar la hinchazón , Ant implementa una estructura de terceros. Si bien su biblioteca cubre muchos elementos y diseños de la interfaz de usuario, es mejor agregar funciones adicionales a través de bibliotecas externas. Muchas de estas bibliotecas ya siguen la especificación de diseño de Ant.

Paquete de reacción

React Suite se especializa en componentes de diseño interactivo de fácil acceso. Está diseñado específicamente para ser utilizado en proyectos de estilo back-end.

Sin embargo, puede implementarlo en cualquier flujo de trabajo front-end.

La biblioteca ofrece una selección de distintos temas: claro, oscuro y de alto contraste. En cuanto al estilo personalizado, usará Less.

Espectro

Adobe será incluido en el salón de la fama por sus contribuciones al diseño. Y no sorprende que hayan puesto a disposición de la comunidad de código abierto su sistema de diseño Spectrum. Es el propio sistema de diseño que utiliza Adobe.

Spectrum usa tanto Flex como Grid para implementar diseños. Y, varios de sus componentes se basan en un diseño de tragamonedas personalizado. Estas "ranuras" le permiten diseñar diseños individuales y asignar elementos específicos a su grupo anidado.

Curiosamente, Adobe desalienta a los desarrolladores y diseñadores a personalizar su estilo preconstruido. La idea es que Spectrum ya está construido teniendo en cuenta la consistencia. Y, en lugar de jugar con el estilo, el objetivo debe ser crear experiencias de usuario perfectas.

En noticias recientes, Adobe también está trabajando en React Aria, una colección de React Hooks que funcionan como primitivos de interfaz de usuario de accesibilidad. En última instancia, el objetivo de React Aria es brindarle la libertad de crear su propia biblioteca de componentes mediante la implementación de las mejores prácticas de accesibilidad desde el primer momento.

Web base

Uno de los principales atractivos de las bibliotecas de componentes es que se han probado en el campo. Y en el caso de Base Web, es el sistema de diseño utilizado por Uber. Sí, la aplicación para compartir viajes.

Base se especializa en la personalización en muchas aplicaciones a la vez. El objetivo es proporcionar una solución simple para reutilizar componentes en diferentes rutas de desarrollo. Entonces, por ejemplo, cuando comienza a trabajar en un nuevo diseño, el entorno temático sigue siendo el mismo.

Todos los temas con Base se pueden hacer en JavaScript, Flow y TypeScript.

Interfaz de usuario del circuito

Es fantástico ver a empresas del sector privado como SumUp hacer contribuciones de código abierto tan significativas. Circuit UI es el sistema de diseño utilizado en la infraestructura de SumUp. Está construido sobre la base de unos pocos principios seleccionados que garantizan la mejor experiencia de usuario posible.

Esos principios incluyen pruebas de código antes de comprometerse, accesibilidad a gran escala, nombres estandarizados y más. Además del paquete principal, también obtiene acceso a sus tokens de diseño (primitivos) y un paquete de iconos.

SiguienteUI

NextUI usa una de las bibliotecas, como base, que vimos anteriormente: Geist. El intrincado enfoque de los detalles de NextUI permite que incluso los diseñadores menos experimentados creen hermosos sitios web y aplicaciones. Y la extensa documentación hace un trabajo fantástico al explicar cómo implementar su primer proyecto NextUI.

Algunas características notables incluyen:

• Representación del lado del servidor con compatibilidad completa entre navegadores.
• Funciones de accesibilidad integradas con pleno cumplimiento de WAI-ARIA.
• Utiliza puntadas para evitar cargar CSS innecesario. Cargue solo lo que necesita.

Y, por último, se está convirtiendo en una opción extremadamente popular entre los usuarios de Next.js.

Interfaz de usuario pequeña

Tiny UI proporciona componentes React Hook que están escritos en TypeScript. El principal atractivo de esta biblioteca de componentes es su tamaño pequeño, pero su naturaleza personalizable.

Específicamente, puede predefinir un tema personalizado antes de comenzar su nuevo proyecto.

Los componentes van desde pequeños elementos de diseño hasta cosas más específicas como formularios de comentarios, modales y administradores de configuración.

Desarrollo web basado en componentes

¡Gracias a todas estas bibliotecas maravillosas, ahora puede liberarse de escribir CSS nuevamente! Bromas aparte, hay muchas opciones excelentes en esta lista.

Si alguna vez se sintió alejado de la construcción de estructuras de diseño complejas, estas bibliotecas aliviarán parte de esa incertidumbre. Aparte de la extensa documentación, muchas de las bibliotecas antes mencionadas cuentan con un fuerte respaldo de la comunidad.

Como tal, siempre puede encontrar extensiones e implementaciones adicionales.