New MCP server for Claude Code, Cursor & Copilot

No worries. We got covered.

140+ animated, accessible components and effects for React, Vue, Svelte, Angular, Astro or plain HTML. Native Web Components, zero dependencies, and an MCP server so your AI agent installs exactly the right one.

Early access on launch day · Invite 3 friends, get a bonus. No spam, unsubscribe in one click · Privacy.

claude — ~/my-saas

> Add a pricing section with a glowing “Pro” card and a monthly/yearly switch

Searching Marvelous UI

marvelous-ui search_components "pricing card glow toggle"

→ border-beam, card, tabs, number-ticker

marvelous-ui install_components framework: "react"

✓ 4 components + tokens copied to src/marvelous/ · 0 npm deps added

✓ Pricing.tsx created. Dark mode, keyboard and reduced motion handled.

One library. Every stack you'll ever switch to.

ReactNext.jsVueNuxtSvelteSvelteKitAngularAstroSolidQwikLitLaravel BladeRailsDjangoWordPressPlain HTML

components & effects at launch

runtime dependencies

~ KBmedian size per component (gzip)

respect reduced motion & dark mode

Why Marvelous

Built on the platform. Not on a framework that'll be rewritten next year.

AI-native, for real

A built-in MCP server lets any agent search the catalog, read each API and install components with their dependencies. No hallucinated props.

See the MCP tools →

<!-- React, Vue, Svelte… or none -->
<mv-tabs>…</mv-tabs>
<mv-confetti-button>
  <button>Ship it</button>
</mv-confetti-button>

Framework-agnostic

Native Custom Elements + layered CSS. Switch stacks, keep your UI.

Your brand in one line

OKLCH design tokens. Drag the slider: this whole page re-themes live.

Accessible by default

ARIA roles, full keyboard support, visible focus, reduced motion. Not an afterthought.

You own the code

Readable files land in your repo. No black box, no lock-in.

Live, not screenshots

Touch everything. This page is built 100% with Marvelous UI.

Interfaces people actually remember.

<mv-text-reveal>

Make it shine

<mv-sparkles-text>

Aurora gradient

.mv-gradient-text

Answers in seconds

<mv-text-highlight> · hover

Dot pattern · click me

Particles · move your cursor

Meteors

Retro grid

Animated grain

Particles · attract

Spotlight

A light follows your cursor across the whole group.

Border beam

A comet runs along the border.

Shine

Rotating conic reflections.

Electric

A crackling border, drawn in JS.

Neon glow

Gradient border + halo.

Gradient

A moving gradient border.

<mv-confetti-button>

data-effect

PaidPendingLive

.mv-badge · data-pulse

<mv-theme-toggle> · circular reveal

<mv-thinking-orb> · AI states

toast() · swipe to dismiss

Work e-mail

Labels, hints and error states, all in CSS.

$24 / month

$19 / month, billed yearly

Also in the box: dialog, drawer, popover, menu, combobox, command palette, date picker, calendar, table, OTP, file upload, stepper, toast, tooltip, chart… the boring parts, done right.

+ 120 more

Browse the docs of every component →

Exclusives

Mechanics you already know by heart. Rebuilt as UI that solves real problems.

Ten original components you won't find in any other kit. Each one takes a mechanic from a film, a game, a TV series or a novel and turns it into a useful interface behavior: recovering a lost form, guarding a destructive action, flagging a page nobody has reviewed in months. Only the mechanic is borrowed, never the artwork, logos, typography or colors.

Form draft recovery

A crash, a reload or a closed tab no longer costs anyone their form. On the next visit, the exact field where they stopped is marked and everything comes back in one touch, caret included. Passwords and card numbers are never stored.

Video game Inspired by the mechanic of Dark Souls (FromSoftware, 2011)

<mv-bloodstain>

Background change alerts

When the server updates a value while people are reading, the change plays twice in a quick stutter and keeps a “Changed · 12s ago” tab until someone has seen it. Edits the user makes never trigger it.

Film Inspired by the mechanic of The Matrix (Lana and Lilly Wachowski, 1999)

<mv-deja-vu>

Content freshness portrait

The article stays untouched while a small generated portrait next to it ages with the time since its last review. Stale docs and policies stand out at a glance, and “Mark as reviewed” makes the portrait young again.

Novel Inspired by the mechanic of The Picture of Dorian Gray (Oscar Wilde, 1890)

<mv-dorian>

Session-expiry countdown

A quiet countdown turns into a clear, non-modal alarm before the session ends, and someone has to reset it on purpose. It stays in sync across tabs and keeps exact time in throttled background tabs.

TV series Inspired by the mechanic of Lost (J. J. Abrams, Damon Lindelof and Jeffrey Lieber, 2004)

<mv-hatch>

Gradual in-place deletion

Deleted items stay where they were and dissolve over a few seconds, letter by letter. Click one to keep it. A better undo than a toast when people delete several things in a row.

Film Inspired by the mechanic of Eternal Sunshine of the Spotless Mind (Michel Gondry, 2004)

<mv-lacuna>

Linked drop zones

Two paired openings move an item across the page in one gesture. Drop it into one and it flies out of the other, as fast as it was thrown. Items are real DOM nodes, announced to screen readers and fully keyboard-operable.

Video game Inspired by the mechanic of Portal (Valve, 2007)

<mv-portal>

Click prediction and prefetch

Reads the pointer's trajectory to tell which link or button is about to be clicked, so the app can prefetch it first. It keeps score of its own hit rate and head start, and treats keyboard and touch as certain.

Film Inspired by the mechanic of Minority Report (Steven Spielberg, 2002)

<mv-precog>

One-time secret reveal

Shows an API key or recovery codes exactly once, burns down on a visible fuse, then really removes the secret from the page and from memory, leaving only “This secret was destroyed · 2:41 PM”.

TV series Inspired by the mechanic of Mission: Impossible (Bruce Geller, 1966)

<mv-self-destruct>

Activity-driven motion

Ambient animations run only as fast as the visitor is acting and settle to a near-freeze while they read. Calm by default, alive under the hand, and canvas loops can follow the same clock.

Video game Inspired by the mechanic of SUPERHOT (SUPERHOT Team, 2016)

<mv-still-time>

Two-key confirmation

A destructive action unlocks only after two deliberate, synchronized key turns, or a turn by a second approver. Deleting production or wiring funds can no longer happen with one careless click.

Film Inspired by the mechanic of WarGames (John Badham, 1983)

<mv-two-key>

Exclusives are included in every paid plan. Titles are cited only to describe where each mechanic comes from and remain the property of their respective owners. Not affiliated with or endorsed by the rights holders.

Playground

Drag. Drop. Ship.

Start from a blank page or a template, drag sections and components in, edit the text, pick your brand color. Export clean HTML, React, Vue, Svelte or Astro code in one click.

Open the playground, it's free

Free to play with. Exporting code is included in every plan.

For Claude Code · Cursor · Copilot · Windsurf

Your agent stops guessing. It reads the manual.

AI agents are great at writing UI and terrible at remembering a library's API. The Marvelous MCP server gives them the catalog, every component's API and demo markup, and a tool that installs files with their dependencies. Result: correct code on the first try, in whatever framework the project uses.

search_components full-text search across names, tags and APIs
get_component API, accessibility notes, canonical demo markup
install_components copies files + dependencies, returns the snippet for your framework
get_design_tokens so custom CSS matches your theme

Claude Code

Copy command

claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjs

Cursor · .cursor/mcp.json

Copy config

{
  "mcpServers": {
    "marvelous-ui": {
      "command": "node",
      "args": ["./marvelous/mcp/server.mjs"]
    }
  }
}

Prefer no AI? The CLI does the same: node marvelous/scripts/add.mjs dialog tabs --out src/ui

The honest comparison

Most animated UI kits are React-only. Yours shouldn't be.

	Typical React UI kit	Marvelous UI
Works in Vue, Svelte, Angular, Astro, HTML	✕	✓
Runtime dependencies	framer-motion, three, gsap…	none
MCP server for AI agents	rarely	✓ included
Dark mode + reduced motion everywhere	varies	✓ every component
Your CSS always wins (zero-specificity layers)	✕	✓
Pricing	often yearly subscription	one-time, yours forever

Pricing

Simple pricing. Pay once, use forever.

Every plan includes all components, the playground export, the MCP server, the CLI and 12 months of new components and updates.

Prices in USD. VAT / sales tax handled at checkout by our merchant of record. 14-day refund on every plan.

Free pack

Start free. 20 components, no e-mail, no account.

The everyday base components, with the same code, CLI and MCP server as the paid plans. MIT licensed: download the zip, read the source, ship it.

Button
Badge
Card
Input
Textarea
Field
Select
Checkbox
Radio
Switch
Dialog
Popover
Tooltip
Tabs
Accordion
Toast
Menu
Separator
Kbd
Skeleton

Download the Free pack

ZIP · direct download · includes the MCP server, the CLI and the docs

Plug the MCP into your agent

Copy commands

cd marvelous-ui-free && npm install
node scripts/init-agent.mjs ../my-app

Writes AGENTS.md and the MCP config for Claude Code, Cursor, VS Code and Gemini CLI. Codex, Windsurf, Zed: see docs/MCP.md in the zip.

Want the rest?

Every plan unlocks the whole library.

All 140+ components & effects
Exclusive originals, found nowhere else
Full-page blocks: hero, pricing, FAQ, footer…
Playground export to HTML, React, Vue, Svelte, Astro

Done for you

No time? We build your landing page with it. In 5 days.

Built by the author of the library: a conversion-focused, animated, accessible landing page, delivered in your stack, with the source code. From €2,490. 3 slots per month.

Book a 15-min call

FAQ

Questions, answered.

Does it really work with React / Vue / Svelte / Angular?

Yes. Components are standard Custom Elements with light-DOM markup and CSS in cascade layers. React 19+ supports them natively; Vue needs one line (isCustomElement); Angular needs CUSTOM_ELEMENTS_SCHEMA; Svelte, Astro and plain HTML work as-is. The MCP/CLI returns the exact snippet for your framework.

What happens after the first year?

You pay once and keep everything you downloaded, for every project, forever. The first 12 months of new components, updates and playground exports are included. After that, renewing is optional (around 40% of the plan price per year). If you stop, nothing you built or downloaded is taken away.

Can I use it in client projects and SaaS products?

Yes, unlimited end products, commercial included. What you can't do is resell or redistribute the components themselves as a UI kit, template marketplace item or competing library.

Does it work with Tailwind?

Perfectly. All selectors are wrapped in :where() inside @layer mv.*, so your utilities always override them. Declare the layer order once and you're done.

SSR? Next.js, Nuxt, SvelteKit, Astro?

Every module is SSR-safe (no top-level window/document access). Components upgrade on the client.

Is it accessible?

ARIA roles, full keyboard support and visible focus on every interactive component. Decorative effects are hidden from assistive tech and stop when the user prefers reduced motion.

What if I don't like it?

E-mail us within 14 days. If you haven't downloaded the Pro pack yet, you get a full refund, no questions asked. If you have, tell us what didn't work and we refund you once. You can try the Free pack and the playground for free first. Terms

Do I get an invoice for my company?

Yes. Checkout is handled by our merchant of record, which issues a VAT-compliant invoice with your company details.

Stop rebuilding the same components every project.

No worries. We got UI covered. Launching soon.