开发工具精选项目

Magic UI

面向 React 与 Tailwind CSS 的开源动画组件集合，通过 shadcn Registry 将可编辑源码复制到项目中。

GitHub 访问官网

主要语言TypeScript

开源许可MIT

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

Magic UI 提供文字动画、背景效果、Bento Grid、Marquee、Globe、Dock 等组件，主要用于 Landing Page 和用户可见的营销界面。

Magic UI 是一个受 shadcn/ui 启发的 React 动画组件和页面素材集合，开源仓库采用 MIT 许可证。它不是通过单一 Runtime Package 暴露封装好的组件，而是使用 shadcn Registry 命令把选定组件、样式及依赖复制进项目，因此团队能直接阅读、修改和拥有源码。其组件集中在 Landing Page、产品展示和营销体验，例如 Magic Card、Text Animate、Marquee、Globe、Bento Grid、背景 Pattern、设备 Mockup 与交互效果；部分组件依赖 Motion、cobe、Shiki、react-tweet 等第三方包。免费开源 Registry 与 Magic UI Pro 的付费模板、Premium Components 是不同产品范围。

交付方式shadcn Registry 源码

主要技术React / Tailwind / Motion

官方 CLI1.0.3（MCP 安装）

FEATURES

主要特点

Magic UI 把常见营销视觉和动画模式制作成可复制的 React 组件，同时保留完整源码控制权。

Copy-and-own 源码模式

通过 shadcn Registry 把组件文件直接放入仓库，没有黑盒 Runtime API，团队可以自由修改结构、Props、样式和动画。

动画文字效果

提供 Text Animate、Typing Animation、Word Rotate、Morphing Text、Aurora Text、Sparkles Text 等标题和文案展示方式。

互动卡片与按钮

Magic Card、Shimmer Button、Border Beam、Hero Video Dialog 和 Lens 等组件可增强 Hover、聚焦和内容揭示体验。

背景与图案

Grid、Dot、Striped、Interactive Grid、Flickering Grid 和 Warp Background 可快速构建有层次的 Hero 与 Section 背景。

营销页面布局

Bento Grid、Marquee、Avatar Circles、Dock 和 Logo Cloud 适合组织功能点、客户 Logo、社区用户和快捷入口。

数据与技术展示

Globe、Icon Cloud、File Tree、Code Comparison 和 Terminal 等组件可用于展示全球业务、技术栈与开发者产品。

设备 Mockup

Browser、iPhone、Android 等外观组件便于在 Landing Page 中呈现应用截图、视频或交互 Demo。

按组件声明依赖

Registry 会为具体组件安装 Motion、cobe、Shiki、next-themes 等所需依赖，未使用的组件无需进入项目。

Tailwind 定制

组件大量使用 Tailwind Utilities、CSS Variables 和 Keyframes，可直接接入现有颜色、圆角、暗色模式和响应式系统。

shadcn CLI 兼容

安装流程与 shadcn/ui 一致，可使用 `@magicui/组件名` 添加源码，并复用 components.json 中的 Alias 与样式配置。

官方 MCP Server

可选的 Magic UI MCP 能让支持的 AI 编程工具读取组件信息并生成更准确的集成代码，但不是运行组件的必要依赖。

模板与 Blocks 生态

除独立组件外还提供开源示例和面向营销场景的 Blocks、Templates；部分高级素材属于独立付费的 Pro 产品。

USE CASES

适用场景

当产品需要快速制作有辨识度的首屏、功能展示、社会证明或互动视觉时，可以从中选择合适组件。

SaaS Landing Page

使用动画标题、Bento Grid、客户 Logo、Magic Card 和 CTA 组合出具有产品感的营销首页。

开发者工具官网

File Tree、Terminal、Code Comparison、Globe 和 Icon Cloud 适合展示 API、CLI、全球节点与技术生态。

产品发布与功能介绍

通过滚动动画、Marquee、设备 Mockup 和视频 Dialog 快速制作新品发布或功能专题页。

个人作品集

动画文字、Dock、项目卡片与时间线能为设计师、开发者和独立创作者提供更鲜明的展示方式。

品牌活动页面

背景 Pattern、光效和动态文字适合短期活动、候补名单与品牌 Campaign，但需控制视觉密度。

shadcn/ui 项目增强

保留 shadcn/ui 的表单、Dialog 等基础组件，再按需加入 Magic UI 的营销动画和装饰效果。

设计原型与概念验证

直接复制可运行组件，能在正式设计系统落地前快速验证动效方向、内容结构和用户反馈。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Magic UI 擅长的地方

通过 Registry 按需复制组件，不必引入整套 Runtime Library
源码进入项目后可完全修改，不受封闭 Props API 限制
与 shadcn/ui、Tailwind CSS 和 React 项目的工作方式一致
覆盖大量 Landing Page 常见动画、背景和展示模式
每个组件明确声明依赖，未使用的视觉能力不会自动安装
预览、代码和安装命令集中在官方文档中，试用成本较低
MIT 开源仓库便于学习实现、内部定制和参与贡献
可选 MCP 能辅助 AI 编程工具发现和使用组件

需要注意

采用前应考虑的问题

它不是传统 npm 组件包

没有统一 Runtime 版本替你升级所有组件。源码复制后由项目自己维护，官方修复和改进不会自动同步。

主要面向 React 与 Tailwind

Vue、Svelte 或未使用 Tailwind / shadcn 配置的项目需要重写组件和样式，不能直接照搬安装命令。

动画会增加性能成本

Motion、Canvas、WebGL、Blur、阴影和持续循环可能提高 JavaScript、GPU 与电量消耗，移动设备必须实际测试。

必须支持减少动态效果

自动滚动、闪烁、旋转和视差可能让部分用户不适，应尊重 `prefers-reduced-motion`，并为持续动画提供暂停控制。

装饰效果不能替代可访问语义

复制组件后仍要检查 Heading、Button、Link、焦点、对比度、键盘操作和屏幕阅读器标签，不能只依赖视觉预览。

部分组件依赖浏览器能力

Canvas、WebGL、ResizeObserver 或 Mouse Position 等能力在 SSR、旧设备和测试环境中需要 Client Boundary 与降级方案。

第三方依赖按组件累积

Globe、代码高亮、Tweet 和动画组件可能分别带入 cobe、Shiki、react-tweet、Motion 等包，应检查 Bundle 与许可证。

视觉风格容易同质化

直接使用默认渐变、光效和 Bento 布局可能与其他模板网站相似，应结合品牌字体、节奏和内容重新设计。

更偏营销而非完整应用系统

复杂表格、Form、Menu、Dialog 和无障碍应用原语仍更适合 shadcn/ui、Base UI、Radix UI 等基础方案。

复制代码仍需安全审阅

Registry 会写入源码并安装依赖，团队应像审查第三方包一样检查 Diff、命令来源、网络请求和危险 HTML。

开源与 Pro 范围不同

MIT 许可适用于开源仓库内容；Pro Templates 和 Premium Components 有独立购买与使用条款，不能混为一谈。

文档主线可能直接演进

开源仓库没有传统 Release 列表，Registry 组件会随主分支更新。生产项目应记录添加时间或固定源码 Commit。

QUICK START

快速开始

下面沿用官方与 shadcn/ui 相同的安装流程，初始化 Registry、添加组件、定制源码、处理减少动态效果偏好并接入可选 MCP。

1初始化 shadcn/ui 配置

bash

npx shadcn@latest init

# 按提示确认 Tailwind、CSS Variables 和 Alias

2从 Magic UI Registry 添加组件

bash

npx shadcn@latest add @magicui/magic-card
npx shadcn@latest add @magicui/text-animate
npx shadcn@latest add @magicui/globe

3组合一个产品功能卡片

tsx

import { MagicCard } from "@/components/magicui/magic-card";
import { TextAnimate } from "@/components/magicui/text-animate";

export function FeatureCard() {
  return (
    <MagicCard className="rounded-2xl border p-8">
      <TextAnimate
        animation="blurInUp"
        by="word"
        className="text-3xl font-semibold"
      >
        更快发布你的产品
      </TextAnimate>
      <p className="mt-3 text-muted-foreground">
        组件源码在你的项目中，可以继续按品牌定制。
      </p>
    </MagicCard>
  );
}

4添加响应式 Globe 展示

tsx

import { Globe } from "@/components/magicui/globe";

export function GlobalSection() {
  return (
    <section className="relative min-h-[520px] overflow-hidden">
      <div className="relative z-10 max-w-lg py-16">
        <h2 className="text-4xl font-bold">服务全球团队</h2>
        <p className="mt-4 text-muted-foreground">
          为不支持 WebGL 的环境保留静态说明内容。
        </p>
      </div>
      <Globe className="absolute inset-y-0 right-0" />
    </section>
  );
}

5为减少动态效果提供降级

css

@media (prefers-reduced-motion: reduce) {
  .marketing-page *,
  .marketing-page *::before,
  .marketing-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

6直接定制已复制的源码

tsx

// components/magicui/magic-card.tsx
// 组件已经属于你的项目，可统一品牌 Token 和默认行为。

const brandGlow = "oklch(0.65 0.22 285)";

<MagicCard
  gradientColor={brandGlow}
  className="rounded-[var(--radius)]"
>
  {children}
</MagicCard>

7可选：安装官方 MCP Server

bash

# 示例：为 Cursor 安装 Magic UI MCP
npx @magicuidesign/cli@latest install cursor

# MCP 只辅助 AI 工具，不是组件运行依赖

8检查类型、性能与生产构建

bash

npm run lint
npm run typecheck
npm run build

# 在真实移动设备上检查动画和 WebGL 性能

下一步：只安装页面真正使用的组件，并把复制进来的代码当作自己的产品代码审阅。上线前同时检查性能、键盘操作、屏幕阅读器和 `prefers-reduced-motion`。

ALTERNATIVES

类似项目

shadcn/ui 提供应用基础组件，Motion 提供底层动画能力，Tailwind CSS 负责样式；Aceternity UI、Motion Primitives 和 React Bits 也提供动画组件与视觉效果。

shadcn/ui

把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。

查看项目

Motion

面向 React 和 JavaScript 的生产级动画库，统一处理弹簧、手势、布局、滚动和退出动画。

查看项目

Tailwind CSS

以实用类为核心的 CSS 框架，快速构建定制化界面。

查看项目

Aceternity UI

面向 React、Next.js、Tailwind CSS 与 Motion 的动画组件和页面素材集合，通过 shadcn Registry 复制源码。

查看项目

React Bits

面向 React 的动画、背景、文字效果与交互组件集合，提供 JavaScript、TypeScript、CSS 和 Tailwind 源码变体。

查看项目

TweakCN

面向 shadcn/ui 与 Tailwind CSS 的可视化主题编辑器，可实时调整设计令牌并导出 CSS 或 Registry 命令。

查看项目

Motion Primitives

提供可组合、可定制的 React 动画原语和组件，适合构建更细粒度的交互动效。

访问官网

COMPARISON

Magic UI vs shadcn/ui

Magic UI 与 shadcn/ui 采用相似的 Registry 和源码所有权模式，但解决的问题不同：shadcn/ui 更偏应用基础组件与可访问原语，Magic UI 更偏 Landing Page 动画、背景和产品展示效果，两者通常配合使用。

比较维度	Magic UI	shadcn/ui
核心定位	动画营销组件、背景、效果和展示素材	应用基础组件、表单、导航和交互模式
交付方式	通过 shadcn Registry 复制 Magic UI 源码	通过 shadcn CLI / Registry 复制组件源码
主要场景	Hero、功能展示、Logo、设备 Mockup 和作品集	Button、Dialog、Form、Table、Menu 和 Dashboard
动画	大量 Motion、CSS、Canvas 与 WebGL 动效	以必要的交互状态和进入退出动画为主
底层依赖	按组件使用 Motion、cobe、Shiki 等	使用 Base UI、Radix UI 或组件特定依赖
可访问性起点	视觉组件较多，需要逐项检查动画、语义与降级	许多交互组件建立在无样式可访问原语上
定制方式	直接修改 TSX、Tailwind、CSS Variables 和动画参数	直接修改 TSX、Variants、Token 和底层 Primitive
更新方式	复制后由项目维护，按需重新比较 Registry	同样由项目拥有源码，可用 CLI Diff 等工作流评估更新
商业内容	免费开源组件之外另有 Magic UI Pro	开源组件与 Registry 生态为核心
更适合	需要快速提升营销页视觉表现的 React 团队	需要建立完整应用 UI 基础和设计系统的团队

如何选择

构建 SaaS 或开发者产品时，可以用 shadcn/ui 负责 Button、Dialog、Form、Navigation 等功能基础，再从 Magic UI 选择少量能强化品牌叙事的动画和展示组件。不要把每个 Section 都变成高强度动效；优先保证内容层级、加载性能、减少动态效果偏好与可访问交互。

VERIFICATION