Usuarios activos
Últimos 30 días
Nuevo
Servidor MCP para Claude Code, Cursor & Copilot
No te preocupes.
Nos encargamos de la UI.
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
Acceso anticipado el día del lanzamiento. Sin spam, date de baja con un clic · Privacidad.
Paga una vez, úsalo para siempre · Reembolso en 14 días (condiciones)
> Añade una sección de estadísticas con una tarjeta brillante y un número que se anima
marvelous-ui search_components "stats card glow count up"
→ border-beam, card, number-ticker
marvelous-ui install_components framework: "react"
✓ 3 componentes + tokens copiados en src/marvelous/ · 0 dependencias npm añadidas
✓ Stats.tsx creado. Modo oscuro, teclado y movimiento reducido resueltos.
Una sola biblioteca. Para cualquier stack al que te cambies.
~
Por qué Marvelous
Construido sobre la plataforma. No sobre un framework que se reescribirá el año que viene.
Nativo para la IA, de verdad
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.
Independiente del framework
Custom Elements nativos + CSS por capas. Cambia de stack y conserva tu UI.
Tu marca en una línea
Design tokens OKLCH. Arrastra el control: toda esta página cambia de tema en vivo.
Accesible por defecto
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.
El código es tuyo
Archivos legibles que llegan a tu repo. Sin caja negra, sin dependencia de un proveedor.
En vivo, no capturas
Tócalo todo. Esta página está hecha 100 % con Marvelous UI.
<mv-text-reveal>
Haz que
<mv-sparkles-text>
Degradado aurora
.mv-gradient-text
Respuestas
<mv-text-highlight> · hover
$
Grano animado
Spotlight
Una luz sigue tu cursor por todo el grupo.
Border beam
Un cometa recorre el borde.
Shine
Reflejos cónicos giratorios.
Electric
Un borde chisporroteante, dibujado en JS.
Neon glow
Borde degradado + halo.
Gradient
Un borde degradado en movimiento.
<mv-confetti-button>
data-effect
PagadoPendienteEn vivo
.mv-badge · data-pulse
<mv-theme-toggle> · circular reveal
<mv-thinking-orb> · AI states
toast() · swipe to dismiss
Etiquetas, ayudas y estados de error, todo en CSS.
$24 / mes
$19 / mes, facturado anualmente
También incluye: dialog, drawer, popover, menu, combobox, paleta de comandos, selector de fecha, calendario, tabla, OTP, carga de archivos, stepper, toast, tooltip, gráfico… las partes aburridas, bien hechas.
+ 280 másLight ✦
Los pequeños detalles que toda app vuelve a programar. Una sola etiqueta cada uno, accesibles por defecto.
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>
- Factura n.º 4821 pagada
- Despliegue en producción
- Aiko se unió al equipo
<mv-relative-time>
Gorro de merino $38
<mv-count-bump>
- Password Field
Mostrar y ocultar, un aviso de Caps Lock, reglas visibles antes de la primera pulsación.
- Tag Input
Chips que puedes pegar desde una hoja de cálculo, enviados como un campo de formulario real.
- Cookie Consent
Rechazar es tan fácil como aceptar, y los scripts esperan de verdad al consentimiento.
- Smart Header
Se oculta al hacer scroll hacia abajo, nunca mientras el foco o un menú está dentro.
- Code Block
Copia el comando, nunca el prompt, la salida ni los números de línea.
- Countdown
Sin desfase, sin números negativos, la fecha objetivo en la hora local del visitante.
- Relative Time
Un “hace 3 minutos” que se mantiene al día, con un solo temporizador compartido.
- Trend Chip
“▲ +12,4 % vs. la semana pasada”, leído en voz alta como una frase clara.
- Announcement Bar
Se cierra una vez, se recuerda y nunca desplaza el layout.
- Saved State
Guardando, guardado, sin conexión: nunca parpadea y nunca dice “Guardado” antes de tiempo.
- Show More
Un botón “Ver más” que solo existe cuando el texto está realmente cortado.
- Backdrop
Fondos mesh, glow, grid y grain con una sola clase y cero JavaScript.
- Busy Cursor
Un pequeño anillo de progreso junto al cursor del sistema mientras una zona trabaja.
- Cursor Snap
Una placa suave que abraza el enlace bajo el puntero, sin quitar el cursor del sistema.
- Reading Ruler
Una guía de lectura de una línea que sigue al puntero o al teclado.
- Back to Top
Solo aparece cuando vuelves hacia arriba, y lleva el foco al principio.
- Drag Scroll
Arrastre, rueda e indicaciones en los bordes para tablas anchas y filas de tarjetas.
- Blur Up
Marcadores de imagen que nunca desplazan el contenido, ni parpadean, ni muestran un icono roto.
- Count Bump
Contadores de carrito y de insignias que saltan al cambiar, nunca en el primer renderizado.
- Share Button
La hoja de compartir nativa, o un menú sin ninguna solicitud a terceros.
Exclusivos
Mecánicas que ya conoces de memoria. Reconstruidas como UI que resuelve problemas reales.
150 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 que no pierden a nadie
Formularios largos que sobreviven a los cierres inesperados, las erratas y los muros de errores.
- Recuperación de borradores de formularios de Dark Souls Videojuego
- Un error a la vez de Columbo Serie
- Contadores en las pestañas cerradas de Buscaminas Videojuego
Acciones destructivas y secretos seguros
Una fricción a la medida del riesgo real de un borrado, una revocación o un secreto.
- Vista previa del impacto de una eliminación de Jenga Juego
- Secretos que se muestran una sola vez de La jarra de Pandora Mito
- Confirmación con dos llaves de Juegos de guerra Película
Estados del sistema honestos
Esperas, rechazos y bloqueos que dicen lo que realmente está pasando.
- Esperas que nunca fingen de Esperando a Godot Obra de teatro
- Rechazos que explican el porqué de El proceso Novela
- Avisos de edición simultánea de Ghostbusters Película
IA que puedes verificar
Fuentes, interpretación y autoría a la vista, afirmación por afirmación.
- Fuentes por afirmación de Pinocho Novela
- Cómo se entendió una solicitud de Guía del autoestopista galáctico Novela
- Declaración de autoría de Cyrano de Bergerac Obra de teatro
Confianza y privacidad
Imitaciones detectadas antes del clic, contenidos incrustados en silencio hasta que los invitas a entrar.
- Detección de imitaciones de Caperucita Roja Cuento de hadas
- Contenidos incrustados solo con consentimiento de Drácula Novela
- Control de la identidad con la que actúas de El extraño caso del doctor Jekyll y el señor Hyde Novela corta
Supervisión sin fatiga de alertas
Alertas que se ganan la confianza y se atenúan, ausencias que dan la alarma.
- Alertas que se ganan la confianza de El pastorcillo mentiroso Fábula
- Alarmas por lo que se detuvo de Estrella de Plata Relato
- Gravedad que se atenúa de Metal Gear Solid Videojuego
Cifras que se explican solas
Cifras que muestran cómo se calculan, lo recientes que son y a qué escala.
- ¿Cómo se calcula esto? de El mago de Oz Película
- Retrato de la frescura del contenido de El retrato de Dorian Gray Novela
- Cifras a escala humana de Los viajes de Gulliver Novela
Navegación para usuarios avanzados
Selección con el teclado, hilos de regreso y descubrimiento para apps densas.
- Hilo de regreso para las exploraciones en profundidad de Teseo y el Minotauro Mito
- Fijación de objetivo con el teclado de The Legend of Zelda: Ocarina of Time Videojuego
- Niebla sobre las zonas inexploradas de Civilization Videojuego
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.
Para Claude Code · Cursor · Copilot · Windsurf
Tu agente deja de adivinar. Lee el manual.
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.
search_componentsbúsqueda de texto completo en nombres, etiquetas y APIget_componentAPI, notas de accesibilidad, marcado de demo canónicoinstall_componentscopia los archivos + dependencias y devuelve el fragmento de código para tu frameworkget_design_tokenspara que tu CSS personalizado encaje con tu tema
Claude CodeCopiar comando
claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjsCursor · .cursor/mcp.jsonCopiar configuración
{
"mcpServers": {
"marvelous-ui": {
"command": "node",
"args": ["./marvelous/mcp/server.mjs"]
}
}
}¿Prefieres no usar IA? La CLI hace lo mismo: node marvelous/scripts/add.mjs dialog tabs --out src/ui
La comparación honesta
La mayoría de los kits de UI animados son solo para React. El tuyo no debería serlo.
| Función | Kit de UI típico para React | Marvelous UI |
|---|---|---|
| Funciona en Vue, Svelte, Angular, Astro, HTML | ✕ | ✓ |
| 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 | 150 Exclusivos |
| Modo oscuro + movimiento reducido en todas partes | depende | ✓ en cada componente |
| Tu CSS siempre gana (capas de especificidad cero) | ✕ | ✓ |
| Precios | a menudo, suscripción anual | pago único, tuyo para siempre |
Precios
Precios simples. Paga una vez, úsalo para siempre.
Todos los planes incluyen todos los componentes, el servidor MCP, la CLI y 12 meses de nuevos componentes, actualizaciones y exportaciones del Playground.
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).
Free pack
Empieza gratis. 20 componentes, sin correo, sin cuenta.
Los componentes básicos del día a día, con el mismo código, la misma CLI y el mismo servidor MCP que los planes de pago. Licencia MIT: descarga el zip, lee el código fuente y publícalo.
- Button
- Badge
- Card
- Input
- Textarea
- Field
- Select
- Checkbox
- Radio
- Switch
- Dialog
- Popover
- Tooltip
- Tabs
- Accordion
- Toast
- Menu
- Separator
- Kbd
- Skeleton
ZIP · descarga directa · incluye el servidor MCP, la CLI y la documentación
Conecta el MCP a tu agenteCopiar comandos
cd marvelous-ui-free && npm install
node scripts/init-agent.mjs ../my-appEscribe AGENTS.md y la configuración MCP para Claude Code, Cursor, VS Code y Gemini CLI. Codex, Windsurf, Zed: consulta docs/MCP.md en el zip.
¿Quieres el resto?
Cualquier plan desbloquea toda la biblioteca.
- Los más de 300 componentes & efectos
- Originales exclusivos, que no encontrarás en ningún otro sitio
- Bloques de página completa: hero, precios, FAQ, footer…
- Exportación desde el Playground a HTML, React, Vue, Svelte, Astro
Done for you
¿Sin tiempo? Creamos tu landing page con ella. En 5 días.
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.
FAQ
Tus preguntas, respondidas.
¿De verdad funciona con React / Vue / Svelte / Angular?
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.
¿Qué son los Exclusivos y los kits?
Los Exclusivos son 150 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
¿Qué pasa después del primer año?
Pagas una vez y conservas todo lo que descargaste, para todos tus proyectos, para siempre. Los primeros 12 meses de nuevos componentes, actualizaciones y exportaciones del Playground están incluidos. Después, renovar es opcional (de 59 US$ a 359 US$ al año según el plan). Si lo dejas, no pierdes nada de lo que creaste o descargaste.
¿Puedo usarlo en proyectos de clientes y productos SaaS?
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.
¿Qué recibe mi cliente cuando le entrego un proyecto?
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
¿Funciona con Tailwind?
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.
¿SSR? ¿Next.js, Nuxt, SvelteKit, Astro?
Todos los módulos son compatibles con SSR (sin acceso a window/document en el nivel superior). Los componentes se activan en el cliente.
¿Es accesible?
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.
¿Y si no me gusta?
Escríbenos por correo en un plazo de 14 días. Si aún no has descargado el Pro pack, 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
¿Recibo una factura para mi empresa?
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.
Deja de rehacer los mismos componentes en cada proyecto .
No te preocupes. Nos encargamos de la UI. Lanzamiento: pronto.