Facundo Uferer
Cuando programás con ayuda de IA —ya sea pidiéndole a un asistente que te arme una pantalla, un formulario o un dashboard— el cuello de botella casi nunca es la lógica: es el frontend. Necesitás que algo se vea bien, sea accesible y no te haga perder una tarde ajustando CSS. Ahí es donde entran las librerías de componentes: le dan a la IA (y a vos) piezas ya resueltas —botones, modales, tablas, primitivos accesibles— sobre las que construir rápido en lugar de reinventar cada elemento desde cero.
Esta es una selección de 11 herramientas gratuitas y open source, ordenadas por importancia, con qué resuelve cada una y cómo se integra en un flujo de trabajo asistido por IA.
1. shadcn/ui
Qué es: no es una librería tradicional, es un generador de componentes. En vez de instalar un paquete, copiás el código fuente del componente a tu proyecto (botón, modal, dropdown, etc.), construido sobre Radix UI y Tailwind CSS.
Para qué sirve: te da componentes accesibles y con buen diseño base, pero el código queda 100% en tu repo, así que podés modificarlo sin pelear contra una API cerrada.
Por qué importa en un flujo con IA: es el estándar de facto que reconocen los asistentes de código —Claude, v0, Lovable, Bolt— porque su estructura es simple y predecible. Cuando le pedís a una IA “hazme un formulario de login”, lo más probable es que genere código pensado para encajar con shadcn.
2. Radix UI
Qué es: la capa de primitivos accesibles sobre la que está construido shadcn/ui. Sin estilos propios: maneja el foco, el teclado, los roles ARIA y el comportamiento de cada componente.
Para qué sirve: resuelve la parte más tediosa y propensa a errores de la accesibilidad —que un modal atrape el foco, que un combobox funcione con teclado— sin que tengas que programarlo vos.
Por qué importa en un flujo con IA: cuando le pedís a la IA un componente custom “desde cero”, apoyarlo en primitivos de Radix evita que termine con un <div> con onClick que no es accesible ni funciona con lectores de pantalla. Vale la pena saber que su desarrollo se enlenteció tras la adquisición por WorkOS, así que para componentes nuevos es cada vez más común mirar también Base UI.
3. Base UI
Qué es: la nueva capa de primitivos headless del equipo de MUI, pensada como alternativa activamente mantenida a Radix.
Para qué sirve: mismo problema que Radix —accesibilidad y comportamiento sin imponer estilos— pero con desarrollo más activo hoy en día.
Por qué importa en un flujo con IA: si vas a armar un sistema de diseño propio y le vas a pedir a la IA que genere componentes “desde los primitivos”, Base UI es una apuesta más segura a mediano plazo que Radix.
4. MUI (Material UI) Core
Qué es: una librería de componentes completa, instalable como dependencia npm, que implementa Material Design con un sistema de theming propio.
Para qué sirve: te ahorra semanas de trabajo cuando necesitás componentes complejos ya resueltos —tablas de datos, date pickers, autocomplete— sin armarlos pieza por pieza.
Por qué importa en un flujo con IA: en proyectos enterprise o dashboards con mucha data, pedirle a la IA que use MUI en vez de construir todo con primitivos acelera mucho la iteración, aunque el resultado va a requerir más trabajo si querés que no se vea “a lo Material Design”.
5. Mantine
Qué es: librería “todo incluido” con más de 100 componentes y 50 hooks, open source bajo licencia MIT.
Para qué sirve: cubre tanto componentes visuales como lógica común (manejo de formularios, notificaciones, fechas) en un solo paquete coherente.
Por qué importa en un flujo con IA: al tener también los hooks resueltos, cuando la IA genera lógica de formulario o estado no tenés que ir a buscar tres librerías distintas para completar el trabajo.
6. Ant Design
Qué es: librería de componentes orientada a aplicaciones data-heavy, muy usada en dashboards internos y herramientas de gestión.
Para qué sirve: trae resueltos los componentes más pesados de construir a mano: tablas con filtros y paginación, formularios complejos, layouts de administración.
Por qué importa en un flujo con IA: si le pedís a la IA un panel de administración o CRUD completo, Ant Design suele darle un punto de partida más cercano al resultado final que armar todo desde cero.
7. Chakra UI
Qué es: librería de componentes con foco fuerte en accesibilidad y una API de estilos simple basada en props.
Para qué sirve: te da un set de componentes con buenos defaults visuales sin necesidad de mucho ajuste extra.
Por qué importa en un flujo con IA: su sintaxis basada en props (<Button colorScheme="blue">) es fácil de predecir para un modelo, lo que reduce errores cuando la IA genera código sobre esta librería.
8. React Aria Components
Qué es: librería headless de Adobe, considerada una referencia en accesibilidad.
Para qué sirve: igual que Radix o Base UI, resuelve comportamiento y accesibilidad sin estilos propios, pero con un enfoque todavía más exhaustivo en casos límite (lectores de pantalla, internacionalización).
Por qué importa en un flujo con IA: cuando la accesibilidad es un requisito no negociable (sector público, por ejemplo), pedirle a la IA que construya sobre React Aria da más garantías que dejarla resolver el comportamiento por su cuenta.
9. Magic UI
Qué es: más de 150 componentes animados que se instalan con el mismo CLI que usa shadcn/ui.
Para qué sirve: agrega la capa de animación y microinteracciones que shadcn no cubre por defecto —textos animados, fondos con efectos, transiciones.
Por qué importa en un flujo con IA: cuando necesitás que una landing o pantalla de producto “impacte” visualmente y no solo funcione, es más rápido pedirle a la IA que tome un componente de Magic UI que describirle una animación desde cero.
10. Aceternity UI
Qué es: librería enfocada en efectos visuales y microinteracciones para landing pages y sitios de producto.
Para qué sirve: resuelve ese tipo de detalle visual de alto impacto —efectos de spotlight, scroll parallax, tarjetas 3D— manteniendo consistencia visual entre componentes.
Por qué importa en un flujo con IA: es útil como referencia para pedirle a la IA “un hero como el de Aceternity” cuando necesitás una primera impresión fuerte, sin construir el efecto a mano.
11. Kibo UI
Qué es: registro open source de componentes de aplicación más avanzados, pensado para integrarse directo con shadcn/ui.
Para qué sirve: cubre componentes que ni shadcn ni sus extensiones de animación resuelven: Gantt charts, tableros Kanban, selector de color, generador de QR, bloques de código con syntax highlighting.
Por qué importa en un flujo con IA: cuando el pedido es algo más específico de producto —“agregame un Kanban” o “necesito un Gantt”— tener Kibo UI como opción evita que la IA tenga que inventar ese componente desde cero.
Cómo pensar esto en el flujo de trabajo con IA
Ninguna de estas herramientas compite entre sí: todas vuelcan código fuente a tu proyecto, así que conviven sin conflicto. La lógica práctica es:
- Base: shadcn/ui + Radix (o Base UI si priorizás mantenimiento activo) para la estructura general.
- Componentes pesados ya resueltos: MUI, Mantine o Ant Design si el proyecto es data-heavy o enterprise.
- Animación y primera impresión: Magic UI o Aceternity UI para landings y detalles visuales.
- Componentes de producto específicos: Kibo UI para lo que no cubre el resto.
Cuando le pedís a un asistente de IA que resuelva frontend, decirle explícitamente qué librería usar (en vez de dejarlo “inventar” un componente desde cero) achica muchísimo el margen de error y te acerca más rápido a algo que realmente puedas llevar a producción.