≡En resumen
- Una UI library te da componentes de interfaz listos para usar en tu código, con estilos y comportamiento resueltos.
- Hay librerías con estilos propios, librerías headless sin estilos y modelos de copiar el código, como shadcn/ui.
- No es lo mismo que un sistema de diseño: la librería es la parte de código de ese sistema.
- Elige según tu framework, accesibilidad, personalización, peso y mantenimiento del proyecto.
- Cuanto más se aleja tu diseño del estilo de la librería, más te conviene una headless o una propia.
01 ¿Qué es una UI library?
En diseño se habla también de UI kit: una colección de componentes dibujados en Figma u otra herramienta. La UI library es su equivalente en código. Lo ideal es que ambos estén sincronizados, de modo que lo que se decide en el diseño de interfaz se implemente con las mismas piezas.
02 Tipos de librerías de componentes
| Tipo | Qué te da | Ejemplos | Ideal para |
|---|---|---|---|
| Con estilos propios | Componentes completos con un diseño visual definido y personalizable mediante temas | MUI, Ant Design, Vuetify, PrimeVue, Angular Material | Paneles internos y productos donde prima la rapidez |
| Headless o sin estilos | Lógica, accesibilidad y comportamiento, sin apariencia | Radix UI, Headless UI, React Aria | Productos con marca propia y diseño a medida |
| Copiar el código al proyecto | El código fuente de cada componente dentro de tu repositorio, para modificarlo libremente | shadcn/ui | Equipos que quieren control total sin mantener una librería desde cero |
| Bloques y plantillas | Secciones completas (cabeceras, tablas de precios, formularios) listas para adaptar | Tailwind Plus | Webs de marketing, landing pages y prototipos rápidos |
Conviene no confundir una UI library con un framework de CSS. Bootstrap incluye componentes, pero se basa en clases CSS y algo de JavaScript, sin integración específica con React o Vue. Tailwind CSS ni siquiera trae componentes: son clases utilitarias sobre las que se construyen librerías como shadcn/ui o los bloques de Tailwind Plus.
03 Ejemplos de UI libraries por framework
| Librería | Framework | Desde | Estrellas en GitHub |
|---|---|---|---|
| Bootstrap | HTML, CSS y JavaScript | 2011 | 175.000 |
| shadcn/ui | React | 2023 | 125.000 |
| Ant Design | React | 2015 | 100.000 |
| MUI (Material UI) | React | 2014 | 99.000 |
| Vuetify | Vue | 2016 | 41.000 |
| Chakra UI | React | 2019 | 41.000 |
| Headless UI | React y Vue | 2020 | 29.000 |
| Angular Material | Angular | 2016 | 25.000 |
| Radix UI Primitives | React | 2020 | 19.000 |
| React Aria (React Spectrum) | React | 2019 | 16.000 |
| PrimeVue | Vue | 2018 | 14.000 |
04 UI library vs sistema de diseño vs UI kit vs framework
| Concepto | Qué es | Dónde vive |
|---|---|---|
| UI library | Componentes de interfaz programados y reutilizables | En el código (paquete npm o carpeta del proyecto) |
| UI kit | Los mismos componentes, dibujados | En la herramienta de diseño (Figma, Penpot…) |
| Sistema de diseño | Principios, tokens, componentes, patrones y documentación de uso | En diseño, código y guía, a la vez |
| Framework | La base de la aplicación: rutas, estado, renderizado | En el código, por debajo de la UI library |
Un sistema de diseño incluye una UI library, pero añade las reglas de cuándo y cómo usar cada componente, el tono de los textos y los tokens de color y espacio. Por eso Material Design es un sistema de diseño de Google y MUI, una librería que lo implementa en React. Y la librería, a su vez, depende del framework sobre el que construyes la aplicación.
05 Cómo elegir una UI library para tu proyecto
- ✓Compatible con tu framework y su versión (React, Vue, Angular, Svelte) y con renderizado en servidor si lo usas.
- ✓Accesibilidad documentada: navegación por teclado, roles ARIA y gestión del foco en modales y menús.
- ✓Personalización: temas, design tokens o acceso al código para adaptar la librería a tu marca.
- ✓Peso: que puedas importar solo los componentes que usas sin cargar la librería entera.
- ✓Mantenimiento: lanzamientos recientes, comunidad activa y una hoja de ruta clara.
- ✓Licencia compatible con uso comercial y, si hay versión de pago, qué componentes quedan fuera de la gratuita.
- ✓Cobertura de lo que necesitas: tablas de datos, formularios complejos, gráficos, fechas.
Un panel interno de gestión de pedidos, con tablas y filtros, se monta antes con una librería con estilos como MUI o Ant Design: nadie espera un diseño único y los componentes de datos ya están resueltos. La app de clientes de una marca de moda, en cambio, pide un diseño propio: ahí encaja una base headless como Radix UI o el modelo de shadcn/ui, para controlar cada píxel sin reprogramar la accesibilidad.
06 Accesibilidad: lo que debe resolver una buena UI library
La mayor ventaja de una buena librería no es el aspecto, sino el comportamiento que no se ve. Los patrones de las WAI-ARIA Authoring Practices del W3C describen cómo debe responder cada componente al teclado y a los lectores de pantalla, y programarlo bien a mano lleva mucho más tiempo del que parece.
| Componente | Qué debe hacer |
|---|---|
| Ventana modal | Llevar el foco dentro al abrirse, no dejarlo escapar mientras está abierta, cerrarse con Escape y devolver el foco al botón que la abrió |
| Menú desplegable | Abrirse con Enter o espacio y recorrer las opciones con las flechas |
| Pestañas | Moverse entre pestañas con las flechas e indicar cuál está seleccionada |
| Autocompletado (combobox) | Anunciar el número de resultados y permitir elegir con teclado |
| Avisos y notificaciones | Anunciarse a los lectores de pantalla sin robar el foco |
07 Ventajas y desventajas de usar una UI library
Velocidad
Montas pantallas completas combinando piezas probadas en lugar de programarlas.
Coherencia
Todos los botones, campos y menús comparten estilo y comportamiento.
Accesibilidad resuelta
Las buenas librerías ya gestionan teclado, foco y lectores de pantalla.
Dependencia
Las actualizaciones mayores pueden obligarte a migrar código y romper estilos.
Aspecto genérico
Sin personalización, tu producto se parece a cientos de aplicaciones con la misma librería.
Peso extra
Una librería mal importada puede engordar el JavaScript y ralentizar la carga.
08 Crear tu propia librería de componentes
-
1
Inventario
Recopila todos los componentes que ya existen en tu producto y detecta duplicados.
-
2
Tokens
Define colores, tipografías, espacios y radios como variables compartidas entre diseño y código.
-
3
Base accesible
Parte de primitivas headless o de un modelo como shadcn/ui en lugar de reprogramar la lógica compleja.
-
4
Documentación
Publica cada componente con sus variantes, estados y ejemplos de uso, por ejemplo con Storybook.
-
5
Versionado
Publica versiones con registro de cambios para que los proyectos que la usan actualicen con seguridad.
En appyweb elegimos o construimos la librería de componentes al inicio de cada proyecto de desarrollo de aplicaciones web a medida, alineada con el trabajo de diseño de interfaces web UI y UX para que lo diseñado y lo programado sean exactamente lo mismo.
Preguntas frecuentes sobre UI library
Es un conjunto de componentes de interfaz ya programados, como botones, formularios o menús, que se instalan en un proyecto para construir pantallas sin partir de cero.
La UI library es el código de los componentes. El sistema de diseño es más amplio: incluye esa librería más principios, tokens, patrones y la guía de uso.
Depende del proyecto: MUI y Ant Design para aplicaciones de gestión con muchos datos, Radix UI o React Aria como base headless, y shadcn/ui si quieres el código dentro de tu proyecto.
Técnicamente no: no se instala como dependencia, sino que su herramienta copia el código de cada componente en tu proyecto para que lo modifiques libremente.
No. Tailwind CSS es un framework de clases utilitarias sin componentes. Tailwind Plus, antes llamado Tailwind UI, sí vende componentes y plantillas construidos con Tailwind.
La mayoría de las populares son de código abierto con licencia MIT. Algunas venden componentes avanzados o plantillas, como MUI con sus componentes de pago o Tailwind Plus con un pago único.
Entre las más usadas están Vuetify, basada en Material Design, y PrimeVue. Headless UI también ofrece componentes sin estilos para Vue.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗