Launching soon. The waitlist gets in first. - Join the waitlist →
MarvelousUI
EN
Join waitlist
New MCP server for Claude Code, Cursor & Copilot

No worries. We got UI covered.

300+ 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.

Download the Free pack

Early access on launch day. No spam, unsubscribe in one click · Privacy.

claude · ~/my-saas

> Add a stats section with a glowing card and a number that counts up

Searching Marvelous UI

marvelous-ui search_components "stats card glow count up"

→ border-beam, card, number-ticker

marvelous-ui install_components framework: "react"

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

✓ Stats.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 →

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.

Every component page has its accessibility notes: what it does for keyboard, screen reader and reduced-motion users.

Browse the components →

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

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.

+ 280 more

Browse the docs of every component →

Light ✦

The small things every app rewrites. One tag each, accessible by default.

20 new components for the details hand-made versions miss: autofill that keeps working, a “3 minutes ago” that stays current, a count that never bumps on first render.

<mv-password-field>
  • Invoice #4821 paid
  • Deploy to production
  • Aiko joined the team
<mv-relative-time>
Merino beanie $38
2
<mv-count-bump>

Exclusives

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

150 Exclusives: original components you won't find in any other library. The most useful ones come in 8 kits, grouped by the problem they solve. Many take a mechanic from a film, a game, a TV series or a novel and turn it into a useful interface behavior. Only the mechanic is borrowed, never the artwork, logos, typography or colors.

Forms that don't lose people

Long forms that survive crashes, typos and walls of errors.

Trust and privacy

Look-alikes caught before the click, embeds silent until invited in.

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.

  • 14 full-page sections
  • 9 animated elements
  • 3 page templates

Navbar, heroes, bento and spotlight features, stats, pricing, testimonials, FAQ, newsletter, call to action, footer: ready to drop in, built only from the library.

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 CodeCopy command
claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjs
Cursor · .cursor/mcp.jsonCopy 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.

FeatureTypical React UI kitMarvelous UI
Works in Vue, Svelte, Angular, Astro, HTML✕✓
Runtime dependenciesframer-motion, three, gsap…none
MCP server for AI agentsrarely✓ included
Original components you won't find elsewhererarely150 Exclusives
Dark mode + reduced motion everywherevaries✓ every component
Your CSS always wins (zero-specificity layers)✕✓
Pricingoften yearly subscriptionone-time, yours forever

Pricing

Simple pricing. Pay once, use forever.

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

Prices in USD. EU and UK: VAT included. US, Canada and India: sales tax added at checkout. Sold by our merchant of record, Polar. 14-day refund (conditions).

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 agentCopy 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 300+ 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.

A conversion-focused, animated, accessible landing page, delivered in your stack, with the source code. From $2,850. 3 slots per month.

Built by Quentin Fankrache, author of Marvelous UI.

Write to us

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 are Exclusives and kits?

Exclusives are 150 original components you won't find in any other library, included in every paid plan. Kits group the most useful ones by the problem they solve, like forms that don't lose people or safe destructive actions. See the 8 kits

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 ($59 to $359 a year depending on the plan). 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.

What does my client get when I deliver a project?

The components used in that site or app ship with it, source included. Your client may use them only to run and maintain that product, not in another one. With Unlimited, you can also hand that source over so the client or its other providers maintain the product. A freelancer working on your projects counts as one of your developers. Read the license

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.