Más de 300 componentes y efectos animados y accesibles para React, Vue, Svelte, Angular, Astro o HTML puro. Web Components nativos, cero dependencias y un
npx marvelous-ui-library@latest init
Free sin clave. ¿Compraste Pro? Pega tu clave de licencia cuando te la pida.
Acceso anticipado el día del lanzamiento. Sin spam, date de baja con un clic · Privacidad.
Paga una vez, quédatelo para siempre · Reembolso en 14 días (condiciones)
Una sola biblioteca. Para cualquier stack al que te cambies.
Ejecútalo en tu proyecto. Elige instalarlo en el proyecto o para tu usuario. Después, pulsa Intro para instalar el pack Free, o pega tu clave de licencia para instalar Pro.
Free sin clave. Pro con tu clave de licencia.
npx marvelous-ui-library@latest init
Después: npx marvelous-ui-library@latest add dialog tabs
Cuando salga una nueva versión: npx marvelous-ui-library@latest update
¿No tienes Node.js? Descarga el Pro pack con tu clave de licencia.
$
Haz que
Plan Pro
Publicar la versión 2.4
Llega a todos los usuarios a la vez.
Eliminar “Lumen redesign”
Sus 48 archivos y su historial se van con él.
<mv-hold-button>Cada componente con una vista previa animada, su marcado de uso, la API completa y notas de accesibilidad. Filtra por categoría, kit, Exclusivo o Free pack.
Un servidor MCP integrado permite a cualquier agente buscar en el catálogo, leer cada API e instalar componentes con sus dependencias. Sin props inventadas.
Custom Elements nativos + CSS por capas. Cambia de stack y conserva tu UI.
Design tokens OKLCH. Arrastra el control: toda esta página cambia de tema en vivo.
Roles ARIA, soporte completo de teclado, foco visible, movimiento reducido. Pensado desde el principio, no añadido después.
Cada página de componente incluye sus notas de accesibilidad: lo que hace por quienes usan el teclado, un lector de pantalla o el movimiento reducido.
Archivos legibles que llegan a tu repo. Sin caja negra, sin dependencia de un proveedor.
20 componentes nuevos para los detalles que se les escapan a las versiones hechas a mano: un autocompletado que sigue funcionando, un “hace 3 minutos” que se mantiene al día, un contador que nunca salta en el primer renderizado.
<mv-password-field>
<mv-relative-time>
<mv-count-bump>
Mostrar y ocultar, un aviso de Caps Lock, reglas visibles antes de la primera pulsación.
Chips que puedes pegar desde una hoja de cálculo, enviados como un campo de formulario real.
Rechazar es tan fácil como aceptar, y los scripts esperan de verdad al consentimiento.
Se oculta al hacer scroll hacia abajo, nunca mientras el foco o un menú está dentro.
Copia el comando, nunca el prompt, la salida ni los números de línea.
Sin desfase, sin números negativos, la fecha objetivo en la hora local del visitante.
Un “hace 3 minutos” que se mantiene al día, con un solo temporizador compartido.
“▲ +12,4 % vs. la semana pasada”, leído en voz alta como una frase clara.
Se cierra una vez, se recuerda y nunca desplaza el layout.
Guardando, guardado, sin conexión: nunca parpadea y nunca dice “Guardado” antes de tiempo.
Un botón “Ver más” que solo existe cuando el texto está realmente cortado.
Fondos mesh, glow, grid y grain con una sola clase y cero JavaScript.
Un pequeño anillo de progreso junto al cursor del sistema mientras una zona trabaja.
Una placa suave que abraza el enlace bajo el puntero, sin quitar el cursor del sistema.
Una guía de lectura de una línea que sigue al puntero o al teclado.
Solo aparece cuando vuelves hacia arriba, y lleva el foco al principio.
Arrastre, rueda e indicaciones en los bordes para tablas anchas y filas de tarjetas.
Marcadores de imagen que nunca desplazan el contenido, ni parpadean, ni muestran un icono roto.
Contadores de carrito y de insignias que saltan al cambiar, nunca en el primer renderizado.
La hoja de compartir nativa, o un menú sin ninguna solicitud a terceros.
155 Exclusivos: componentes originales que no encontrarás en ninguna otra biblioteca. Los más útiles vienen en 8 kits, agrupados según el problema que resuelven. Muchos toman una mecánica de una película, un videojuego, una serie o una novela y la convierten en un comportamiento útil de la interfaz. Solo se toma prestada la mecánica, nunca las ilustraciones, los logotipos, la tipografía ni los colores.
Formularios largos que sobreviven a los cierres inesperados, las erratas y los muros de errores.
Una fricción a la medida del riesgo real de un borrado, una revocación o un secreto.
Esperas, rechazos y bloqueos que dicen lo que realmente está pasando.
Fuentes, interpretación y autoría a la vista, afirmación por afirmación.
Imitaciones detectadas antes del clic, contenidos incrustados en silencio hasta que los invitas a entrar.
Alertas que se ganan la confianza y se atenúan, ausencias que dan la alarma.
Cifras que muestran cómo se calculan, lo recientes que son y a qué escala.
Selección con el teclado, hilos de regreso y descubrimiento para apps densas.
Los Exclusivos están incluidos en todos los planes de pago. Los títulos se citan solo para describir de dónde viene cada mecánica y siguen siendo propiedad de sus respectivos titulares. Sin afiliación ni respaldo de los titulares de los derechos.
Los agentes de IA son geniales escribiendo UI y pésimos recordando la API de una biblioteca. El servidor MCP de Marvelous les da el catálogo, la API y el marcado de demo de cada componente, y una herramienta que instala los archivos con sus dependencias. Resultado: código correcto a la primera, en el framework que use el proyecto. Funciona con Claude Code, Codex, Cursor, Copilot y cualquier agente compatible con MCP.
search_components búsqueda de texto completo en nombres, etiquetas y APIget_component API, notas de accesibilidad, marcado de demo canónicoinstall_components copia los archivos + dependencias y devuelve el fragmento de código para tu frameworkget_design_tokens para que tu CSS personalizado encaje con tu temaEl comando de instalación incluye el servidor MCP y las instrucciones para el agente.
La instalación en el proyecto configura los agentes compatibles en este repositorio. La instalación para tu usuario detecta Codex, Claude Code, Cursor y OpenCode, y te permite conectarlos a todos tus proyectos. Elige todos los agentes detectados, algunos o usa la CLI sin agente. Ejecuta uninstall para quitar las conexiones de los agentes y la biblioteca.
| Función | Kit de UI típico para React | Marvelous UI |
|---|---|---|
| Funciona en Vue, Svelte, Angular, Astro, HTML | No | Sí |
| Dependencias en tiempo de ejecución | framer-motion, three, gsap… | ninguna |
| Servidor MCP para agentes de IA | rara vez | incluido |
| Componentes originales que no encontrarás en otro sitio | rara vez | 155 Exclusivos |
| Modo oscuro + movimiento reducido en todas partes | depende | en cada componente |
| Tu CSS siempre gana al nuestro | No | Sí |
| Precios | a menudo, suscripción anual | pago único, tuyo para siempre |
Todos los planes incluyen todos los componentes, el servidor MCP, la CLI y las exportaciones del Playground. La opción de por vida añade todos los componentes y actualizaciones futuros, sin renovación.
Precios en USD. UE y Reino Unido: IVA incluido. EE. UU., Canadá e India: impuesto sobre las ventas añadido en el pago. Vendido por nuestro revendedor oficial (merchant of record), Polar. Reembolso en 14 días (condiciones).
Los componentes básicos de uso diario, con la misma CLI y el mismo servidor MCP que los planes de pago. No necesitas cuenta ni clave de licencia. Con licencia MIT: lee el código fuente y úsalo en producción.
ZIP · descarga directa · incluye el servidor MCP, la CLI y la documentación
Tu descarga ha empezado. ¿Quieres también el precio de lanzamiento?
Opcional, el Free pack nunca lo necesita. Un solo e-mail el día del lanzamiento, con el precio de lanzamiento. Sin spam, date de baja con un clic · Privacidad.
El comando de instalación instala el pack Free si omites la clave de licencia. El ZIP directo sigue disponible arriba para usarlo manualmente.
Cualquier plan desbloquea toda la biblioteca.
Una landing page animada, accesible y pensada para convertir, entregada en tu stack, con el código fuente. Desde 2850 US$. 3 plazas al mes.
Hecha por Quentin Fankrache, autor de Marvelous UI.
Sí. Los componentes son Custom Elements estándar con marcado en light DOM y CSS en cascade layers. React 19+ los admite de forma nativa; Vue necesita una línea (isCustomElement); Angular necesita CUSTOM_ELEMENTS_SCHEMA; Svelte, Astro y HTML puro funcionan tal cual. El MCP o la CLI te devuelve el fragmento de código exacto para tu framework.
Los Exclusivos son 155 componentes originales que no encontrarás en ninguna otra biblioteca, incluidos en todos los planes de pago. Los kits agrupan los más útiles según el problema que resuelven, como los formularios que no pierden a nadie o las acciones destructivas seguras. Ver los 8 kits
La opción de por vida se paga una sola vez: todos los nuevos componentes, actualizaciones y exportaciones del Playground, mientras se publique Marvelous UI, sin renovación. Desde el 15 oct, también puedes suscribirte por año o por mes y recibir lo mismo mientras dure la suscripción. Si lo dejas, conservas para siempre, en todos tus proyectos, cada versión que hayas descargado. Ejecuta npx marvelous-ui-library@latest update cuando quieras actualizar un proyecto; no sobrescribe tus cambios locales.
La CLI guarda localmente los archivos Pro verificados. Ejecuta npx marvelous-ui-library@latest restore para reinstalar una versión que hayas obtenido, incluso después de que termine una suscripción.
Hasta el 14 oct, la opción de por vida se vende a su precio de lanzamiento: 120 US$ en lugar de 399 US$ para Solo. Es la misma licencia de por vida que después del lanzamiento, con todas las actualizaciones futuras y sin renovación, pero a menor precio. Las suscripciones se abren el 15 oct.
Sí, productos finales ilimitados, también comerciales. Lo que no puedes hacer es revender ni redistribuir los componentes en sí como kit de UI, como artículo de un marketplace de plantillas o como biblioteca competidora.
Los componentes usados en ese sitio o esa app se entregan con él, código fuente incluido. Tu cliente solo puede usarlos para operar y mantener ese producto, no en otro. Con Unlimited, también puedes entregar ese código fuente para que el cliente o sus otros proveedores mantengan el producto. Un freelancer que trabaja en tus proyectos cuenta como uno de tus desarrolladores. Lee la licencia
Sí. Construye tu sitio gratis: empieza desde una plantilla, arrastra secciones y componentes, edita el texto y elige el color de tu marca. Publícalo cuando estés listo: todos los planes te dan un sitio HTML estático listo para subir a Netlify o Cloudflare Pages, o su código fuente HTML, React, Vue, Svelte o Astro. No lo alojamos nosotros: funciona solo, sin nada que renovar para mantenerlo en línea. Conserva el código fuente para siempre: recibes el código de tu sitio según la licencia.
Sí. Los componentes son etiquetas HTML, archivos CSS y módulos JavaScript, así que funcionan en cualquier plantilla renderizada en el servidor: carga el CSS y los scripts una vez y luego escribe las etiquetas. Copia los archivos con la CLI (necesita Node.js) o desde el ZIP: el Free pack, o el Pro pack desde la página de descarga.
Perfectamente. Todos los selectores están envueltos en :where() dentro de @layer mv.*, así que tus utilidades siempre los sobrescriben. Declara el orden de las capas una vez y listo.
Todos los módulos son compatibles con SSR (sin acceso a window/document en el nivel superior). Los componentes se activan en el cliente.
Roles ARIA, soporte completo de teclado y foco visible en cada componente interactivo. Los efectos decorativos se ocultan a las tecnologías de asistencia y se detienen cuando el usuario prefiere movimiento reducido.
Escríbenos por correo en un plazo de 14 días. Si aún no has descargado el Pro pack (con la CLI o desde la página de descarga), te devolvemos el importe completo, sin preguntas. Si ya lo descargaste, cuéntanos qué no funcionó y te hacemos el reembolso, una sola vez. Antes, puedes probar gratis el Free pack y el Playground. Condiciones
Sí. El pago lo gestiona nuestro revendedor oficial (merchant of record), que emite una factura conforme a la normativa del IVA con los datos de tu empresa.
No te preocupes. Nos encargamos de la UI. Lanzamiento: pronto.
Esta página se tradujo con IA. Informar de un problema de traducción