即将发布。候补名单用户优先体验。 - 加入候补名单 →
MarvelousUI
ZH
加入候补名单
新 支持 Claude Code、Cursor 和 Copilot 的 MCP 服务器

别担心。 UI，交给我们。

300+ 个带动画、无障碍的组件和特效，适用于 React、Vue、Svelte、Angular、Astro 或纯 HTML。原生 Web Components，零依赖，还有一个 MCP 服务器，让你的 AI 编程智能体找到并安装恰好合适的组件。

在你的项目中开始
npx marvelous-ui-library@latest init 复制命令

无需密钥即可免费使用。已购买 Pro？在提示时粘贴你的许可证密钥。

下载 Free pack

发布当天抢先体验。无垃圾邮件，一键退订 · 隐私。

使用 Marvelous UI MCP 服务器的一次真实 Claude Code 会话。

一个组件库，适配你今后会切换到的每一种技术栈。

ReactNext.jsVueNuxtSvelteSvelteKitAngularAstroSolidQwikLitLaravel BladeRailsDjangoWordPress纯 HTML

一条命令。你的代码，你做主。

在你的项目中运行。选择项目安装或共享的用户安装。然后按 Enter 安装 Free pack，或粘贴许可证密钥安装 Pro。

  1. 安装组件、CLI、MCP 服务器和智能体指令，一次全部配置好。
  2. 添加只把你需要的组件复制到项目中。
  3. 何时更新由你决定你的本地修改始终归你所有，你获得的每个 Pro 版本都会被保存，可离线重新安装。

从 Marvelous UI 开始

无需密钥即可免费使用。Pro 需要许可证密钥。

npx marvelous-ui-library@latest init 复制命令

以后：npx marvelous-ui-library@latest add dialog tabs

有新版本时：npx marvelous-ui-library@latest update

没有 Node.js？使用你的许可证密钥下载 Pro pack。

随便点点试试。本页面 100% 使用 Marvelous UI 构建。

悬停 · 点击轻触 Marvelous

Particle text

成千上万的粒子拼出文字，躲避你的光标，点击时四散炸开。

<mv-particle-text>

点击轻触

访问已授权

Scramble text

随机字符逐渐解析为真实文本，全程可读。

<mv-scramble-text>

点击轻触

$

Number ticker

逐位滚动的计数器，可按任意地区格式化。

<mv-number-ticker>

点击轻触

令人难忘的 UI。

Text reveal

文字从遮罩后升起，可按字母、单词或行显示。

<mv-text-reveal>

观看

让它闪耀

Sparkles text

小星星在文字周围闪烁，这里叠加在动画渐变之上。

<mv-sparkles-text>

移动你的光标观看

Mesh gradient

色带在 GPU 上流动，并朝你的光标倾斜。启用减少动态效果时显示静止画面。

<mv-mesh-gradient>

观看

Grid pattern

一个朝你滚动而来的透视地面，纯 CSS 实现。

variant="retro"

观看

Meteors

带发光尾迹的斜向流星雨。

<mv-meteors>

观看

Light rays

柔和的光线从上方洒落，只需一个 class。

.mv-light-rays

观看

Noise

可用于任何表面的动态胶片颗粒，细腻或粗糙皆可。

.mv-noise

拖动 · 方向键滑动
紫罗兰色相 285
余烬色相 35
泻湖色相 200
苔藓色相 145
玫瑰色相 350
柑橘色相 95
冰川色相 235
黄昏色相 320

3D gallery

一圈可旋转的卡片：惯性滑行后停在正面那张。纯 CSS 3D，无需 WebGL。

<mv-gallery-3d>

悬停观看

Spotlight

一束光跟随你的光标，扫过整组卡片。

<mv-spotlight>

观看

Pro 方案

Border beam

一道彗星般的光沿任意盒子的边框流动。

.mv-border-beam

滚动向上滑动
  1. v4.2 仪表盘支持 PDF 导出
  2. v4.1 移动应用离线模式
  3. v4.0 实时协作编辑器
  4. v3.9 支持 SAML 的 SSO 登录
  5. v3.8 全文搜索，速度提升 3 倍
  6. v3.7 自动深色主题
  7. v3.6 签名 webhook 和审计日志

Progressive blur

内容在边缘融入柔和的模糊，纯 CSS 实现。

.mv-progressive-blur

悬停观看

Glow

任意元素背后的渐变光环与光晕。

.mv-glow
长按

发布 2.4 版本

它会同时对所有用户上线。

  • 12 项变更
  • 所有检查均已通过
按住以发布

删除“Lumen redesign”

全部 48 个文件及其历史记录将一并删除。

  • 48 个文件
  • 2.1 GB
按住以删除

Hold button

按住时液体注满按钮；松开后液体流走。键盘：按住 Space 或 Enter。

<mv-hold-button>

点击轻触

Confetti

从按钮迸发的物理彩纸，或满屏的烟花。

<mv-confetti-button>

点击轻触
<mv-hold-button>

Copy button

图标像里程表一样向上滚动成对勾。

<mv-copy-button>

点击轻触

Theme toggle

新主题从按钮处以圆形扩散开来。

<mv-theme-toggle>

悬停轻触

Button effects

彩虹边框、3D 按压和光泽效果，只需一个属性。

data-effect

输入 · 拖动 · 点击输入 · 拖动 · 轻触

$24 / 月

$19 / 月，按年计费
5

标签、提示和错误状态，全部用 CSS 实现。

Tabs, slider & field

枯燥的部分也做到位：标签、错误提示、键盘操作和深色模式一应俱全。

点击轻触

重命名项目

焦点会一直留在对话框内，直到你关闭它。按 Escape 也可以关闭。

Dialog

焦点限制在内部，按 Escape 关闭，焦点回到原来的位置。

<mv-dialog>

点击 · 滑动轻触 · 滑动

Toast

可滑动关闭的堆叠通知，并会向屏幕阅读器播报。

toast()

悬停 · 聚焦键盘聚焦

Tooltip

在悬停和键盘聚焦时打开，自动翻转以保持在屏幕内。

<mv-tooltip>

观看
已支付待处理实时

Badge

各种色调的状态，带脉冲式实时圆点。

.mv-badge

浏览完整组件库

每个组件都附有实时预览、用法标记、完整 API 和无障碍说明。可按分类、套件、Exclusive 或 Free pack 筛选。

发布时的组件和效果
运行时依赖
~ KB每个组件的中位体积（gzip）
遵循减少动态效果和深色模式设置

构建于 Web 平台之上。而不是某个明年就要重写的框架。

真正的 AI 原生

内置 MCP 服务器，让任何智能体都能搜索目录、读取每个 API，并连同依赖一起安装组件。不会臆造 props。

查看 MCP 工具 →

框架无关

原生 Custom Elements + 分层 CSS。更换技术栈，UI 照样保留。

一行代码定义你的品牌

OKLCH 设计令牌。拖动滑块：整个页面实时切换主题。

默认无障碍

ARIA 角色、完整键盘支持、可见焦点、减少动态效果。不是事后补救。

每个组件页面都有无障碍说明：它为键盘、屏幕阅读器和减少动态效果的用户做了什么。

浏览组件 →

代码归你所有

可读的文件直接放进你的仓库。没有黑盒，没有锁定。

每个应用都在重写的小细节。每个只需一个标签，默认无障碍。

20 个新组件，专攻手写版本遗漏的细节：始终有效的自动填充、始终保持最新的“3 分钟前”、首次渲染时绝不跳动的计数。

<mv-password-field>
  • 发票 #4821 已支付
  • 部署到生产环境
  • Aiko 加入了团队
<mv-relative-time>
美利奴羊毛帽 $38
2
<mv-count-bump>

你早已烂熟于心的机制。重塑为解决实际问题的 UI。

155 个 Exclusives：在其他任何库中都找不到的原创组件。其中最实用的组件分为 8 个套件，按它们解决的问题分组。许多组件借用了电影、游戏、电视剧或小说中的某个机制，并把它变成实用的界面行为。借用的只是机制，绝不包括美术作品、标志、字体或配色。

不让用户流失的表单

能扛住崩溃、输入错误和成片报错的长表单。

安全处理破坏性操作和机密信息

让操作阻力与删除、撤销授权或密钥的真实风险相匹配。

可核查的 AI

逐条声明展示来源、解读方式和作者身份。

高级用户导航

为高密度应用提供键盘定位、返回路径和探索发现。

Exclusives 包含在每个付费方案中。所引用的作品名称仅用于说明各机制的出处，其权利归各自所有者所有。本产品与相关权利人无关联，也未获得其认可。

拖动。放下。发布。

在 Playground 中，从空白页面或模板开始，拖入版块和组件，编辑文字，选择品牌色。一键导出干净的 HTML、React、Vue、Svelte 或 Astro 代码。

  • 14 版块
  • 9 区块
  • 3 模板
  • 5 导出格式

导航栏、Hero、Bento 和 Spotlight 功能区、数据统计、定价、用户评价、FAQ、订阅通讯、行动号召、页脚：拿来即用，完全由组件库构建。

打开 Playground，免费

可免费试玩。每个方案都包含代码导出。

你的智能体不再瞎猜。它会读手册。

AI 智能体很擅长编写 UI，却很难记住一个库的 API。Marvelous MCP 服务器为它们提供组件目录、每个组件的 API 和演示标记，以及一个连同依赖一起安装文件的工具。结果：无论项目使用什么框架，第一次就能写出正确的代码。支持 Claude Code、Cursor、Copilot 和 Windsurf。

  • search_components 对名称、标签和 API 进行全文搜索
  • get_component API、无障碍说明、标准演示标记
  • install_components 复制文件和依赖，返回适用于你框架的代码片段
  • get_design_tokens 让自定义 CSS 与你的主题保持一致

你的智能体使用同一个可信来源

安装命令包含 MCP 服务器和智能体指令。

项目安装会在此仓库中配置受支持的智能体。用户安装会检测 Codex、Claude Code、Cursor 和 OpenCode，然后让你在所有项目中连接其中任意一个。可以选择所有检测到的智能体、选择其中几个，或不使用智能体而只用 CLI。运行 uninstall 即可移除智能体连接和库。

大多数动画 UI 套件只支持 React。你的不该如此。

功能典型的 React UI 套件Marvelous UI
适用于 Vue、Svelte、Angular、Astro、HTML否是
运行时依赖framer-motion、three、gsap…无
面向 AI 智能体的 MCP 服务器很少 已包含
别处找不到的原创组件很少155 个 Exclusives
全面支持深色模式和减少动态效果不一定 所有组件
你的 CSS 始终优先于我们的否是
价格通常为年度订阅一次付费，永久拥有

定价简单。一次付费，永久拥有。

每个方案都包含全部组件、MCP 服务器、CLI 和 Playground 导出。Lifetime 额外包含未来的所有组件和更新，无需续订。

价格以 USD 计。欧盟和英国：已含增值税。美国、加拿大和印度：结账时加收销售税。由我们的记录商家（merchant of record）Polar 销售。14 天退款（条件）。

免费开始。21 个组件，无需邮箱，无需账号。

日常使用的基础组件，与付费方案使用相同的 CLI 和 MCP 服务器。无需账户，也无需许可证密钥。采用 MIT 许可：阅读源码，直接发布。

  • Button
  • Badge
  • Card
  • Input
  • Textarea
  • Field
  • Select
  • Checkbox
  • Radio
  • Switch
  • Dialog
  • Popover
  • Tooltip
  • Tabs
  • Accordion
  • Toast
  • Menu
  • Separator
  • Kbd
  • Skeleton
  • Typography
使用 npx 安装 下载 Free pack

ZIP · 直接下载 · 包含 MCP 服务器、CLI 和文档

跳过许可证密钥时，安装命令会安装 Free pack。上方的 ZIP 直接下载仍可供手动使用。

想要其余全部？

每个方案都解锁整个组件库。

  • 全部 300+ 个组件和效果
  • 独家原创组件，别处找不到
  • 整页区块：Hero、定价、FAQ、页脚…
  • Playground 导出为 HTML、React、Vue、Svelte、Astro

没时间？我们用它为你搭建落地页。5 天交付。

注重转化、带动画、无障碍的落地页，用你的技术栈交付，附带源代码。$2,850 起。每月 3 个名额。

由 Marvelous UI 的作者 Quentin Fankrache 打造。

联系我们

你的问题，我们来解答。

它真的适用于 React / Vue / Svelte / Angular 吗？

是的。组件是标准的 Custom Elements，采用 light DOM 标记，CSS 位于级联层中。React 19+ 原生支持；Vue 只需一行配置（isCustomElement）；Angular 需要 CUSTOM_ELEMENTS_SCHEMA；Svelte、Astro 和纯 HTML 可直接使用。MCP/CLI 会返回适用于你框架的准确代码片段。

什么是 Exclusives 和套件？

Exclusives 是 155 个在其他任何库中都找不到的原创组件，包含在每个付费方案中。套件按解决的问题把最实用的组件分组，比如不会让用户流失的表单，或安全的破坏性操作。查看 8 个套件

Lifetime 还是订阅：我能保留什么？

Lifetime 一次付费：只要 Marvelous UI 持续发布，你就能获得每一个新组件、每一次更新和 Playground 导出，无需续订。从 10月15日起，你也可以按年或按月订阅，在订阅期内获得同样的内容。如果停止订阅，你下载过的每个版本都可以永久用于所有项目。想更新项目时，运行 npx marvelous-ui-library@latest update 即可；它不会覆盖你的本地修改。

CLI 会在本地保存经过验证的 Pro 归档。运行 npx marvelous-ui-library@latest restore 即可重新安装你获得过的版本，即使订阅已结束。

首发价是多少？

在 10月14日之前，Lifetime 以首发价销售：Solo 只需 $120，原价 $399。它与首发后的 Lifetime 许可完全相同，包含未来所有更新且无需续订，只是更便宜。订阅将于 10月15日开放。

可以用于客户项目和 SaaS 产品吗？

可以，终端产品数量不限，包括商业用途。你不能做的是将组件本身作为 UI 套件、模板市场商品或竞争性组件库进行转售或再分发。

交付项目时，我的客户能得到什么？

该网站或应用中使用的组件会随产品一起交付，包括源代码。你的客户只能将其用于运行和维护该产品，不能用于其他产品。使用 Unlimited 方案时，你还可以移交这些源代码，由客户或其其他服务商维护该产品。为你的项目工作的自由职业者算作你的一名开发者。阅读许可证

Rails、Django、Laravel、WordPress？

可以。组件就是普通的 HTML 标签、CSS 文件和 JavaScript 模块，因此可用于任何服务端渲染的模板：加载一次 CSS 和脚本，然后直接写标签即可。可以用 CLI 复制文件（需要 Node.js），也可以从 ZIP 中获取：Free pack，或从下载页面获取 Pro pack。

它能和 Tailwind 一起用吗？

完全可以。所有选择器都包裹在 @layer mv.* 中的 :where() 里，因此你的工具类始终能覆盖它们。只需声明一次层顺序即可。

SSR？Next.js、Nuxt、SvelteKit、Astro？

每个模块都是 SSR 安全的（顶层不访问 window/document）。组件在客户端升级。

它是无障碍的吗？

每个交互组件都具备 ARIA 角色、完整键盘支持和可见焦点。装饰性效果对辅助技术隐藏，并在用户偏好减少动态效果时停止。

如果我不喜欢怎么办？

请在 14 天内给我们发邮件。如果你还没有下载 Pro pack（通过 CLI 或下载页面），我们将全额退款，无需任何理由。如果已经下载，请告诉我们哪里不好用，我们会为你退款一次。你可以先免费试用 Free pack 和 Playground。条款

我能获得以公司名义开具的发票吗？

可以。结账由我们的记录商家（merchant of record）处理，它会开具包含你公司信息、符合增值税要求的发票。

别再每个项目都重建相同的组件了。

别担心，UI 交给我们。 即将发布。

本页面由 AI 翻译。报告翻译问题