Librerias de UI para React

No cabe duda que react es una de las librerías más populares para el desarrollo de aplicaciones web, y siempre es un lío cuando se trata de dar un buen diseño a nuestra página web, en este artículo te muestro algunas librerías de UI para React que te ayudarán a darle un buen diseño a tu página web. Cabe resaltar que me enfocaré en librerías que brindes componentes de react y no en librerías de CSS para maquetar como tal, a sí que tailwind css quedará descartado, o no?. 🤔

Material UI

Empezando por una de las Librerias de diseño más populares, Material UI es una librería de componentes de React que implementa el lenguaje de diseño de Google, Material Design, para la web. Material UI es una librería de código abierto que se puede utilizar de forma gratuita y que cuenta con una gran comunidad de desarrolladores que la utilizan y la mantienen.

Chakra UI

Esta es una de mis favoritas hoy en día, con unos componentes minimalistas y muy fáciles de usar, Chakra UI es una librería de componentes de interfaz de usuario simple, modular y accesible que proporciona los bloques de construcción de tu aplicación React. Construye tu propia librería de componentes con composición, accesibilidad y theming.

Ant Design

Recientemente Ant Design se ha actualizado a su versión 5 y tiene buena pinta, aunque no he tenido la oportunidad de utilizar su última versión, esta libraría nos ofrece una gran variedad de componentes que podemos utilizar en nuestros proyectos de react, desde un simple botón hasta componentes más complejos como un calendario, sliders y tablas para el manejo de datos.

Mantine

Recientemente utilicé esta libraría para estilar uno de mis proyectos y me agradó bastante la gran variedad de componentes que ofrece y como maneja los temas de estilos, Mantine es una librería de componentes React con un enfoque en la accesibilidad y la usabilidad. Si quieres desarrollar un sitio de manera rápida sin tener que preocuparte de como implementar los componentes, mantine también cuenta con mas de 100 componentes responsivos listos para usar. Los pudes encontrar aquí.

Next UI

Next UI es una librería de componentes de React de código abierto, cuenta con una gran variedad de componentes muy interesantes, pero no se recomienda utilizarlo para producción todavía debido a que se encuentra en Beta.

Librerias para el directorio app de Nextjs

Sabías que apartir de Nextjs 13 con el directorio app perdemos la posibilidad de usar la mayoría de librerías que te mencioné aquí, esto se debe a que ahora Next maneja el cliente y el servidor de una manera diferente, más adelante te traeré un artículo sobre esto. Si quieres utilizar las librerías que te mencioné aquí, te recomiendo que utilices el directorio pages, pero si quieres utilizar el directorio app, y utilizar las últimas características de Nextjs, te recomiendo las siguientes librerías:

Daisy UI

Daisy UI es una librería de componentes de código abierto para Tailwind CSS. Daisy UI es un complemento para Tailwind CSS que agrega componentes de IU personalizables y accesibles a tu sitio web. Como datos curioso, esta página está hecha con daisy ui.

Headless UI

Headless UI es una librería de componentes completamente accesibles que no tienen estilos por defecto. Cada componente está construido con accesibilidad, composición y personalización en mente. Si quieres crear tus propios componentes de UI, esta librería te brinda los componentes básicos para que puedas crear tus propios componentes de UI.

Material Tailwind

Patrocinada por la misma Vercel Material Tailwind es una librería de componentes de UI para Tailwind CSS, esta librería te brinda componentes de UI con el estilo de Material Design, con una gran variedad de componentes que puedes utilizar en tus proyectos y en mi opinión, es un reemplazo de Material UI si quieres usar el nuevo directorio app de Nextjs.

Este artículo fue un poco largo, pero quería traerte la información más completa posible, espero que te animes a porobarlas en alguno de tus proyectos 🧑‍💻n