Una librería de componentes React te da bloques de UI ya construidos y probados para que dejes de reinventar botones y te concentres en la lógica del producto. La verdadera pregunta no es qué librería elegir, sino qué modelo encaja con tu situación: ¿instalas un paquete y recibes las actualizaciones automáticamente, o copias el código fuente dentro de tu propio repo y eres dueño de cada línea? Ambos enfoques son legítimos, y esta guía expone las ventajas y desventajas con claridad.
Dos modelos, contratos distintos
Las librerías instaladas (MUI, Ant Design, Chakra UI) se distribuyen como paquetes npm. Importas Button desde el paquete, el componente se renderiza, y las nuevas versiones llegan con npm update. La ventaja es que el mantenimiento recae en el equipo de la librería. El inconveniente es que cada píxel queda regido por la API de theming de la librería. Sobrescribir estilos profundos suele significar pelearte con la especificidad o envolver los componentes con apaños que se acumulan con el tiempo.
Las librerías copy-paste (shadcn/ui, Radix Themes, Incubator) te entregan archivos fuente que pegas directamente en tu base de código. El componente pasa a ser tuyo en el mismo momento en que aterriza. No hay ninguna API contra la que luchar. Renombras props, borras lo que no necesitas, y el proyecto se mantiene limpio. El precio es que tú asumes cualquier corrección de bugs futura; no llega de forma automática.
Ninguno de los dos modelos es estrictamente mejor. Una startup que entrega rápido probablemente quiera el control del copy-paste. Un equipo de empresa con políticas de actualización estrictas puede preferir un paquete versionado con garantías de soporte a largo plazo.
Propiedad del código
La propiedad es el diferenciador más claro. Cuando haces npm install @mui/material, estás alquilando el componente. Cuando pegas un HeroCursorMask del catálogo de Incubator en src/components/, pasa a ser totalmente tuyo. Puedes arrancar Framer Motion, cambiar la librería de animación, modificar el markup para que coincida con los patrones HTML de tu sistema de diseño, o borrar el componente por completo sin tocar un lock file.
Para las agencias que construyen sitios de clientes, la propiedad del código suele ser innegociable. A veces los clientes necesitan componentes modificados de formas que la API de una librería nunca previó. El copy-paste absorbe esa realidad sin fricción.
Theming
Las librerías instaladas suelen ofrecer un objeto de tema que configuras a nivel del provider: el createTheme de MUI, el extendTheme de Chakra. Eso funciona bien cuando el diseño encaja en el modelo mental de la librería. Cuando el diseño se aleja de él, acabas con un árbol de overrides profundamente anidado que resulta difícil de entender seis meses después.
Las librerías copy-paste se apoyan en su lugar en propiedades personalizadas de CSS. Las secciones de Incubator consumen tokens como var(--color-accent) y var(--radius-xl). Cambia el preset en el nivel raíz y todos los componentes responden. Hay siete presets en el catálogo, desde lime-light hasta noir-bold, y cada sección de la colección dark o de la colección minimal usa el mismo sistema de tokens. Sin prop drilling, sin gimnasia con theme providers.
El resultado práctico: las librerías copy-paste tienden a producir diseños más predecibles porque la superficie de theming es más pequeña y nativa de CSS.
Accesibilidad
Aquí es donde las librerías instaladas se ganan de verdad su sitio. MUI, Radix y Headless UI invierten muchísimo en roles ARIA, navegación por teclado y gestión del foco. Diálogos, comboboxes, date pickers: son difíciles de hacer bien, y los paquetes consolidados se han puesto a prueba con millones de usuarios.
Los componentes copy-paste varían. shadcn/ui está construido sobre las primitivas de Radix, así que hereda fuertes garantías de accesibilidad. Las secciones de Incubator son principalmente componentes de marketing (heroes, testimonios, grids de precios), no widgets de formulario complejos. Las primitivas interactivas como toggles y modales deberían seguir viniendo de una librería headless como Radix o Ariakit. Para los reveals dirigidos por scroll y los bloques de layout, la preocupación de accesibilidad se reduce sobre todo al movimiento reducido y al contraste, ambos manejables con CSS.
Regla general: usa un paquete headless accesible para los widgets interactivos, usa copy-paste para el layout y las secciones visuales.
Comparando las opciones principales
| Librería | Modelo | Theming | Mejor para | |---|---|---|---| | MUI | paquete npm | Objeto de tema | Apps de empresa con UI densa | | shadcn/ui | Copy-paste (Radix) | Variables CSS | Uso general, buena a11y | | Tailwind UI | Copy-paste | Clases utilitarias | Equipos Tailwind-first | | Aceternity UI | Copy-paste | Framer Motion | Sitios de marketing con muchos efectos | | Incubator | Copy-paste | Tokens CSS + 7 presets | Secciones de marketing, landing pages |
Páginas de comparación completas: Incubator vs shadcn/ui, Incubator vs Tailwind UI, Incubator vs Aceternity UI.
Cuándo combinar ambos
La mayoría de proyectos en producción acaban usando los dos modelos a la vez. Un patrón habitual:
- Radix o shadcn para tablas de datos, dropdowns, diálogos y primitivas de formulario
- Secciones copy-paste para el sitio de marketing, las landing pages y las piezas visuales
No hay ninguna regla que prohíba combinarlos. Lo que rompe a los equipos es aplicar un solo modelo en todas partes por principio. Usa cada uno donde encaje.
Para las secciones interactivas del shell de tu app, instala un paquete con accesibilidad probada. Para el hero de la landing page, el carrusel de testimonios o el contador de estadísticas, pega la sección, hazla tuya y dale el estilo de tu marca sin concesiones. Las colecciones de scroll-animation y hover-effect muestran el tipo de secciones de marketing donde el copy-paste gana con claridad; nada de eso es algo que un objeto de tema configure bien.
Checklist práctico
Antes de elegir una librería, responde a esto:
- ¿Vas a necesitar alejarte de forma significativa del aspecto por defecto? Si es así, inclínate por copy-paste.
- ¿Tienes widgets interactivos (combobox, date picker, diálogo)? Si es así, usa un paquete headless/accesible para esos casos.
- ¿El equipo se siente cómodo leyendo y modificando el código fuente de los componentes? El copy-paste lo exige.
- ¿Necesitas actualizaciones automáticas de seguridad y de bugs sin cambios manuales? Ahí gana el paquete instalado.
- ¿Es un sitio de marketing o el shell de una app? Sitio de marketing: secciones copy-paste. Shell de app con UI densa: librería instalada.
Reflexión final
La "mejor" librería de componentes React es la que se ajusta al flujo de trabajo real de tu equipo y a los requisitos de diseño de tu proyecto, no la que tiene más estrellas en GitHub. Para landing pages y secciones de marketing, el copy-paste te da una libertad de diseño que las APIs de los paquetes rara vez pueden ofrecer. Para UI interactiva compleja, apóyate en librerías que llevan años invirtiendo en accesibilidad. El catálogo de Incubator cubre el lado de marketing con 449 variantes de sección; explora el conjunto completo o ve directo a un componente concreto como el hero cursor mask para ver en la práctica qué se siente al ser dueño de tu código con copy-paste.