Recopilatorio vivo
Pedirle a Claude Code, Codex u otro agente de código “una web moderna” deja demasiadas decisiones en sus manos. La tipografía, las tarjetas, los botones, las animaciones. Y al final acabas discutiendo con una pantalla que se parece demasiado a otras veinte.
8 bibliotecas y 1 recurso de inspiración · Fuentes revisadas el 19 de septiembre de 2026
En mi experiencia gestionando tráfico de pago hacia cientos de landing pages, las que mejor convierten rara vez son las más espectaculares. Son las que tienen el mensaje claro y un botón que no necesitas buscar.
Ese es el criterio de esta selección: encontrar piezas que ayuden a presentar una propuesta sin perder de vista lo que necesita hacer el visitante. Un menú tiene que dejarte navegar. El formulario tiene que funcionar. El fondo puede esperar.
Si aún no has resuelto la oferta y el siguiente paso del usuario, empieza por la estructura, el texto y el CTA de tu landing. Volver a elegir un efecto no va a escribir el titular por ti.
Firmado: Dani
La base de la interfaz aporta controles y formularios. Los componentes visuales añaden secciones y efectos. Un catálogo ayuda a encontrar piezas de distintos autores. Y antes de construir, una biblioteca de referencias reales ayuda a decidir qué merece la pena pedir al agente.
En este artículo
Construir la base de la interfaz
shadcn/ui
Fuentes revisadas: 11 sep 2026
Componentes de interfaz cuyo código puedes adaptar.
Por qué está aquí: El estándar de facto en componentes UI para desarrollo web moderno. Código que copias y adaptas, no una dependencia que te ata.
Su límite: Requiere perfil técnico. Si tu equipo no toca código, no es opción. Y el mantenimiento de cada componente copiado corre de tu cuenta.
Una colección de componentes de interfaz (botones, formularios, tablas, gráficos) que copias en tu proyecto y modificas a tu gusto. No instalas un paquete: el código es tuyo desde el minuto uno.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. Plataforma web. Consulta la documentación oficial en ui.shadcn.com para los requisitos técnicos específicos del entorno de desarrollo.
Coste real y licencia
Coste. La web oficial no muestra planes de pago ni licencias comerciales. Los componentes se copian desde la documentación pública sin coste visible. Consultado en septiembre de 2026.
Ejemplo y alternativa
Ejemplo. Un equipo necesita una landing con formulario, panel de métricas y gráficos. Copia los bloques de shadcn/ui, adapta estilos a la marca del cliente y despliega sin depender de actualizaciones externas.
Alternativa. Para comparar opciones de componentes UI, consulta la guía de bibliotecas de componentes en Marketing Ultra.
Fuentes y revisión
Revisión. Revisado el 21 de septiembre de 2026 a partir de la documentación pública. Sin prueba propia ejecutada por el equipo.
Sirve como punto de partida para botones, formularios, diálogos y otras piezas de una aplicación. Su enfoque consiste en incorporar código a tu proyecto para poder modificarlo. La documentación oficial explica el sistema y el repositorio publica una licencia MIT.
Encaja cuando la tarea pendiente es construir una interfaz consistente. Por ejemplo, una pantalla de registro necesita campos, estados de error y un botón; aquí puedes buscar esas piezas antes de pensar en cómo animar el fondo.
Mejor para: proyectos React donde quieras adaptar la base visual y funcional.
Ficha técnica y fuentes
Coste y formato: código gratuito; componentes que pasan a formar parte de tu proyecto.
Ojo con: tener el código también implica mantener tus cambios. El comportamiento accesible de una pieza puede romperse al modificar su estructura o su foco.
Añadir componentes y animaciones
Magic UI
Fuentes revisadas: 11 sep 2026
Componentes animados para páginas de marketing.
Por qué está aquí: Más de 150 componentes animados gratuitos con licencia MIT, instalación individual con shadcn CLI y servidor MCP oficial que conecta el catálogo directamente a editores con IA.
Su límite: El catálogo documentado utiliza React, Tailwind CSS y Motion. No se ha verificado una integración directa con otros frameworks ni un ahorro concreto de tiempo.
Una colección de piezas animadas (marquees de logos, tarjetas con efecto, textos con transiciones) que añades a tu proyecto React para que las landing pages tengan movimiento profesional sin programar cada animación desde cero.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. Componentes para React, TypeScript, Tailwind CSS y Motion; instalación con shadcn CLI. El repositorio declara Node 22.14+ para su propio entorno de desarrollo. Revisa las dependencias de cada componente en el proyecto de destino.
Coste real y licencia
Coste. Biblioteca MIT: 0 €. Magic UI Pro: aproximadamente 173,65 € por licencia individual, pago único, al cambio BCE del 18-sep-2026. Incluye 50+ secciones y 9+ plantillas, con uso comercial y sin reventa del código. No se ha verificado el importe fiscal final del checkout.
Ejemplo y alternativa
Ejemplo. Añadir un marquee de logos a un proyecto React con npx shadcn@latest add @magicui/marquee y revisar su integración.
MCP. Consultar el catálogo desde un cliente compatible. La documentación oficial ofrece listRegistryItems, searchRegistryItems y getRegistryItem.
Fuentes y revisión
Revisión. Fuentes oficiales consultadas el 21-sep-2026. Conversión aproximada con el tipo BCE del 18-sep-2026. Las citas sociales y el vídeo son ejemplos históricos fechados, no una prueba propia ni un consenso actual.
Web oficial · Repositorio GitHub · Servidor MCP · Magic UI Pro · Cambio BCE
Reúne piezas visuales que puedes incorporar a una página hecha con React y Tailwind CSS. Su catálogo tiene documentación por componente y convive con una oferta Pro. El código del repositorio público lleva licencia MIT; esa licencia no debe extenderse por defecto a todos los productos de pago de la marca.
Una aplicación concreta sería añadir un patrón de fondo a una sección que ya tiene su mensaje y su CTA. Dot Pattern permite empezar por una pieza pequeña y ver cómo encaja con el texto.
Mejor para: dar tratamiento visual a secciones de una web React.
Ficha técnica y fuentes
Coste y formato: componentes públicos gratuitos; oferta Pro separada.
Ojo con: algunas piezas incorporan dependencias de animación. Comprueba cuáles necesita la elegida y cómo se comporta dentro de tu página.
Aceternity UI
Fuentes revisadas: 11 sep 2026
Efectos y secciones visuales para webs con React.
Por qué está aquí: Biblioteca de +200 componentes React con animaciones profesionales integradas y servidor MCP para agentes de IA. Resuelve el cuello de botella de programar efectos visuales para landings.
Su límite: La documentación revisada exige React, Tailwind CSS y Motion. Sin repositorio público visible ni precios verificados. El código copiado no se actualiza automáticamente.
Componentes animados listos para copiar y pegar en proyectos React. En vez de programar cada efecto de desplazamiento o transición, los coges de su catálogo y los adaptas. También puedes conectar un agente de IA mediante MCP y dejar que construya por ti, aunque la documentación revisada no detalla el flujo.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. Requiere React, Tailwind CSS y Motion. La fuente oficial revisada lo presenta para proyectos web con ese conjunto de tecnologías y no documenta versiones equivalentes para Vue, Svelte u otros entornos.
Coste real y licencia
Coste. Existe un plan "All-Access" de pago, pero no hay cifras verificadas en el dossier a fecha de septiembre de 2026. El alcance del acceso gratuito no está documentado en la página principal.
Ejemplo y alternativa
Ejemplo. Copiar una cabecera con desplazamiento animado y una cuadrícula de características para montar una landing de campaña sin programar esos efectos desde cero.
Alternativa. Magic UI ofrece +150 componentes animados React con un enfoque similar. shadcn/ui es más funcional que visual, pero tiene un ecosistema abierto y una comunidad mayor.
Fuentes y revisión
Revisión. Análisis basado en la información pública de la web oficial, consultada en septiembre de 2026.
Es una opción para explorar cabeceras, fondos y tarjetas con un tratamiento visual marcado. La web oficial ofrece componentes y productos de pago diferenciados. Antes de elegir una pieza, entra en su documentación y mira qué necesita para ejecutarse.
Encaja en una sección que requiere una composición visual concreta. Tiene menos sentido recorrer el catálogo sin una necesidad definida e ir añadiendo efectos hasta que toda la página compite por llamar la atención.
Mejor para: secciones de presentación y páginas de marketing.
Ficha técnica y fuentes
Coste y formato: componentes gratuitos y oferta comercial; comprueba el recurso concreto.
Ojo con: la licencia de Aceternity distingue usos permitidos y restricciones de redistribución. No damos por hecho que toda la oferta sea MIT ni que las imágenes de una demo tengan los mismos permisos que su código.
React Bits
Fuentes y código revisados: 19 sep 2026
Más de 200 textos, fondos y efectos interactivos para React.
Permite llevar al proyecto componentes con el código a la vista y variantes en JavaScript, TypeScript, CSS y Tailwind. La review prueba DotGrid desde el código actual y explica qué añade, cuánto ocupa la build aislada y qué debes adaptar antes de publicarlo.
DotGrid responde al ratón y al clic, pero el código revisado no incluye una alternativa para movimiento reducido ni una interacción táctil equivalente. Es una buena pieza para una cabecera si el agente prepara también la versión estática.
Mejor para: añadir un efecto concreto a una web React después de decidir qué función cumple.
Leer la review de React Bits y la prueba de DotGridWeb oficial de React Bits
Prueba, MCP, licencia y límites
Coste y formato: código gratuito con más de 200 componentes y variantes según la pieza. DotGrid añade GSAP.
MCP: React Bits usa el MCP de shadcn con el registro @react-bits. No mantiene un servidor MCP independiente.
Ojo con: MIT con Commons Clause permite usar el código dentro de productos, pero restringe vender o redistribuir los componentes como catálogo. Comprueba movimiento reducido, táctil y rendimiento en la página real.
Animmaster Lib
Fuentes revisadas: 11 sep 2026
Paquete descargable de componentes animados para webs.
Animmaster Lib, que suele buscarse como Animaster, vende un conjunto de piezas para integrar en proyectos web. Su propuesta consiste en elegir un componente y trabajar con sus archivos. La mezcla de tecnologías exige comprobar el formato de la pieza elegida.
Mejor para: quien ha localizado un efecto concreto del catálogo y quiere estudiar su integración.
Leer la review de Animmaster: contenido, precio y uso con IAWeb oficial de Animmaster Lib
Ficha técnica y fuentes
Coste y formato: paquete de pago; condiciones propias. El plan Junior no es el paquete principal de componentes.
Ojo con: no hemos instalado el paquete adquirido. Su ficha no equivale a una prueba de rendimiento ni a una recomendación de calidad del código.
Skiper UI
Fuentes revisadas: 11 sep 2026
Componentes visuales para interfaces React con Tailwind.
Por qué está aquí: 106+ componentes visuales con efectos avanzados que se instalan con una línea del CLI de shadcn/ui. La web afirma que cada componente ocupa un solo archivo y no declara paquetes adicionales, aunque incluye Motion.dev en su pila tecnológica.
Su límite: La documentación revisada no aporta un repositorio, una licencia ni datos sobre el acceso previo al código premium. La web identifica a Gxuri como fundador, pero no detalla el tamaño del equipo de mantenimiento.
Una colección de componentes animados y visualmente llamativos para webs hechas con React, Next.js y shadcn/ui. Se añaden al proyecto mediante el CLI de shadcn y cada componente queda como un archivo local. La documentación identifica ejemplos gratuitos y premium, pero no cuantifica cómo se reparte el catálogo.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. Funciona con Next.js y shadcn/ui. Motion.dev aparece en el apartado oficial de herramientas y tecnología, aunque la web afirma que los componentes no requieren paquetes adicionales. La documentación revisada no permite saber si Motion.dev debe instalarse por separado. Cada componente ocupa un solo archivo.
Coste real y licencia
Coste. La documentación identifica Dynamic Island como componente gratuito. Premium: 129 $ (pago único), todos los componentes premium y actualizaciones de por vida. Exclusive: 549 $ (pago único), añade Figma y plantillas web (próximamente). Precios en USD; sin tarifa oficial en EUR.
Ejemplo y alternativa
Ejemplo. Instala un componente con npx shadcn add @skiper-ui. Se añade como archivo local al proyecto, listo para personalizar.
Alternativa. Magic UI y Aceternity UI son opciones que conviene revisar por separado; la evidencia disponible para esta reseña no permite confirmar sus licencias, precios ni catálogos.
Fuentes y revisión
Revisión. Revisado en septiembre de 2026 a partir de la web oficial y la documentación pública de Skiper UI.
Skiper es una de las opciones que aparecían junto a Animmaster en el artículo original. Su catálogo permite explorar piezas preconstruidas y combina recursos gratuitos con una oferta Premium. La página de precios separa ambas posibilidades.
El caso útil es el mismo que con otras bibliotecas visuales: encontrar una pieza que encaje en la sección pendiente y revisar sus requisitos. Evita empezar la integración suponiendo que todo lo que aparece en el escaparate es gratuito.
Mejor para: incorporar componentes visuales a un proyecto React compatible.
Ficha técnica y fuentes
Coste y formato: selección gratuita y componentes Premium.
Ojo con: revisa los permisos del componente y las condiciones del servicio. No clasificamos el conjunto del catálogo como código abierto.
Vengeance UI
Fuentes revisadas: 11 sep 2026
Componentes visuales con código público para React.
Por qué está aquí: Reúne componentes y bloques centrados en interacciones visuales para proyectos React y Next.js, con instalación documentada mediante la CLI de shadcn.
Su límite: No se han podido verificar la licencia, el precio, una integración MCP oficial ni una prueba independiente de instalación y rendimiento.
Sirve para añadir botones, tooltips, tarjetas y bloques animados a una web sin construir cada interacción desde cero.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. La fuente oficial identifica React y Next.js como entornos compatibles y documenta la instalación mediante npx y la CLI de shadcn. Vercel figura como respaldo a través de su programa OSS, no como integración.
Coste real y licencia
Coste. No hay una tarifa oficial verificable ni una conversión disponible en euros a fecha del 25 de septiembre de 2026. La fuente tampoco identifica una licencia concreta.
Ejemplo y alternativa
Ejemplo. Puede explorarse para incorporar una interacción visual concreta a una landing page y comprobarla primero en una rama separada.
Alternativa. La ficha no proporciona sustitutos verificados; conviene comparar otras bibliotecas de componentes animados antes de decidir.
Fuentes y revisión
Revisión. Ficha y página oficial revisadas el 25 de septiembre de 2026; no se aportó una prueba reproducible ni experiencia aprobada de Dani.
Es la tercera herramienta del artículo que dio origen a esta selección. Su repositorio permite revisar el código y su licencia MIT. Trabaja con React, TypeScript, Tailwind y Motion.
Puede encajar si quieres buscar una pieza visual y examinar su implementación antes de llevarla al proyecto. La disponibilidad del código facilita esa revisión, pero sigue haciendo falta comprobar el componente elegido y sus dependencias.
Mejor para: explorar componentes visuales de React con código público.
Ficha técnica y fuentes
Coste y formato: código gratuito con licencia MIT en el repositorio consultado.
Ojo con: el dominio se escribe “vengenceui.com”. El nombre es fácil de confundir al buscarlo. Usa los enlaces de la ficha y comprueba la documentación de instalación.
Encontrar componentes de distintos autores
21st.dev
Fuentes revisadas: 11 sep 2026
Catálogo para descubrir componentes y otros recursos de interfaz.
Sirve para ampliar la búsqueda cuando aún no has encontrado la pieza adecuada. Agrupa recursos de distintos autores; por eso conviene tratar cada ficha como una decisión propia, con su tecnología, su procedencia y sus condiciones.
Mejor para: explorar alternativas y llegar a una implementación concreta.
Ficha técnica y fuentes
Coste y formato: varían según el recurso y el producto elegido.
Ojo con: las condiciones de 21st.dev distinguen el código de los autores de materiales de la plataforma. Los permisos de un componente no se extienden automáticamente a sus imágenes, vídeos o previsualizaciones.
Inspiración antes de construir
Refero no entrega componentes de código. Lo incluyo porque buscar pantallas y flujos reales antes de pedirle una web a un agente me ayuda a darle una dirección concreta.
Refero
Fuentes revisadas: 18 sep 2026
Referencias de interfaces reales para orientar a Claude Code y Codex.
Por qué está aquí: busco pantallas y flujos reales antes de pedirle código a un agente. Refero me ayuda a salir de la interfaz genérica.
Su límite: no entrega componentes React ni decide la jerarquía, el mensaje o el CTA por mí. El MCP necesita una cuenta con acceso.
En cristiano: es una biblioteca de capturas de productos reales. Buscas una pantalla parecida a la que necesitas, estudias qué funciona y le das al agente instrucciones concretas. Después eliges una biblioteca de componentes para construirla.
Mejor para: investigar patrones de interfaz antes de escribir el prompt o instalar componentes.
Leer mi review de ReferoExplorar Refero
Compatibilidad, coste, ejemplos y fuentes
Compatibilidad e instalación
Navegador. La biblioteca web permite investigar pantallas sin preparar un proyecto de código.
Agentes. El MCP oficial está pensado para consultar referencias desde agentes compatibles, incluidos Claude Code y Codex. Requiere una cuenta habilitada.
Coste real y licencia
Plan. Se puede explorar una parte de la biblioteca gratis. Yo pagué 17 € al mes más impuestos por Pro mensual en agosto de 2026.
Lifetime. Refero ofrecía una compra de por vida al revisar la reseña. Comprueba precio y condiciones actuales en la web oficial.
Ejemplo y alternativa
Ejemplo. Buscar pantallas de onboarding, decidir qué jerarquía sirve a tu producto y construir después los controles con shadcn/ui.
Alternativa. Mobbin permite investigar pantallas; para componentes listos para adaptar, usa las bibliotecas de las secciones anteriores.
Fuentes y revisión
Revisión. Ficha contrastada el 18 de septiembre de 2026 con el producto oficial y la reseña enlazada. La demostración externa de la reseña muestra búsqueda manual, no una prueba del MCP.
MCP oficial · Cómo funciona Refero · Review y límites de la prueba
Mobbin
Pantallas y flujos reales para orientar el diseño antes de escribir código.
Por qué está aquí: Reúne referencias de productos reales y anuncia un catálogo de más de 1.000 aplicaciones iOS y web, además de 200 sitios, con contenido nuevo semanalmente.
Su límite: La evidencia disponible no permite comprobar el funcionamiento interno, los precios de pago ni los requisitos y capacidades de su MCP.
Sirve para mirar cómo otros productos plantean pantallas y flujos antes de diseñar los tuyos, sin tomar esas referencias como prueba de rendimiento.
Leer el análisis completoWeb oficial
Compatibilidad e instalación
Compatibilidad. El catálogo anunciado cubre aplicaciones iOS y web, además de sitios; la fuente no detalla sistemas compatibles con su MCP.
Coste real y licencia
Coste. Hay una cuenta gratuita y planes de pago, pero no se han verificado importes, periodicidad, límites ni tratamiento fiscal en euros.
Ejemplo y alternativa
Ejemplo. Puede utilizarse como punto de partida para investigar referencias antes de diseñar una landing page o un flujo de alta.
Alternativa. La ficha recibida no identifica ninguna alternativa verificada, por lo que no procede inventar una comparación.
Fuentes y revisión
Revisión. Información contrastada con la página principal de Mobbin el 26 de septiembre de 2026; no se realizó una prueba operativa.
Cómo elegir una biblioteca de UI
Empieza por la web que ya tienes. Si utiliza React, busca piezas compatibles con ese entorno. Si estás en WordPress o trabajas con HTML y CSS, confirma cómo vas a integrar el código antes de elegirlo. La IA puede ayudarte a hacer la adaptación, pero no elimina las dependencias.
Después identifica la necesidad:
- Para formularios, diálogos y controles, empieza por la base de la interfaz.
- Para una cabecera, una sección de marketing o un efecto visual, busca un componente concreto.
- Para explorar alternativas de varios autores, usa un catálogo y revisa la ficha de cada recurso.
El coste también incluye integrar, comprobar y mantener. Gratis te puede ahorrar la compra. No te entrega la web terminada.
Cómo pedirle a una IA que use una biblioteca concreta
Si el encargo acaba en “hazlo parecido”, el asistente puede recrear el aspecto sin usar el componente. Para aprovechar el trabajo existente, dale el enlace a su documentación o los archivos que puedes utilizar y pide que compruebe la compatibilidad.
Claude Code y Codex también pueden buscar recursos desde el propio agente: shadcn/ui ofrece un servidor MCP para sus registros y 21st.dev permite buscar e instalar componentes desde su CLI y MCP. En los demás catálogos, proporciona la documentación o el código del componente elegido. Comprueba siempre licencia, dependencias y resultado renderizado.
Por ejemplo:
Revisa la tecnología de este proyecto. Quiero incorporar un único componente de la biblioteca que te indico. Consulta su documentación y utiliza su código real, respetando la licencia. Antes de modificar la página, explica sus dependencias y dónde encaja. Conserva el contenido y el CTA. Comprueba errores, teclado, pantalla táctil, movimiento reducido y desbordamiento móvil. Indica qué has verificado y qué no has podido probar.
Con una pieza funcionando, decide si necesitas otra. Instalar cinco bibliotecas para montar una landing de cuatro secciones puede dejarte más trabajo de mantenimiento del que te has ahorrado.
Qué se ha comprobado en esta selección
Las fuentes oficiales, la documentación y las licencias de las ocho bibliotecas se revisaron inicialmente el 11 de septiembre de 2026. React Bits se volvió a comprobar el 19 de septiembre con el código actual: la build completa del repositorio y una integración aislada de DotGrid terminaron correctamente. Refero se contrastó el 18 de septiembre con su web, la reseña y las fuentes atribuidas en ella.
La prueba de React Bits acredita esas builds y el código revisado, no conversión, FPS en teléfonos físicos ni todo el catálogo. DotGrid no incorpora por sí solo movimiento reducido ni una interacción táctil equivalente al ratón. El paquete de pago de Animmaster sigue sin probarse. Refero aporta referencias visuales; la demostración enlazada en su review no prueba el MCP.
Preguntas frecuentes
¿Qué es una biblioteca de componentes UI?
Es un conjunto de piezas reutilizables para construir una interfaz, como botones, formularios, menús o secciones. En esta selección también hay efectos visuales, un catálogo de varios autores y Refero como recurso de inspiración visual, separado de las bibliotecas de código.
¿Son herramientas de inteligencia artificial?
Su utilidad aquí es proporcionar código y referencias para construir una web con ayuda de un asistente. Cada producto puede ofrecer además integraciones propias; usar sus componentes con IA no demuestra que tenga una integración nativa con tu herramienta.
¿Sirven para WordPress?
Depende del componente y de cómo se integre. Una pieza React necesita un entorno que la ejecute; incluso el HTML, CSS y JavaScript deben convivir con el tema y los scripts existentes. Compruébalo en una copia antes de modificar la web pública.
¿Cuál elijo para empezar?
Si necesitas controles y formularios en React, empieza por revisar shadcn/ui. Para una sección visual concreta, abre la documentación de un componente de Magic UI, Aceternity o React Bits y comprueba si encaja. Si buscas el paquete de Animmaster, su review resuelve esa decisión por separado.
¿Todas permiten uso comercial?
Las condiciones cambian entre recursos. Una licencia puede permitir incorporar código a la web de un cliente y restringir revenderlo como plantilla. Revisa la licencia enlazada en la ficha para el uso que vas a darle.
