Magic UI

Magic UI 是一个面向设计工程师的 React 组件库，专注于着陆页和营销材料，提供 150+ 免费开源动画组件与特效，与 shadcn/ui 互补，代码可直接复制粘贴到项目中。

组件与特效

Magic UI 提供大量视觉组件与动画效果，覆盖从文本动画到设备模型的多种场景。

• Glyph Matrix: 画布上动态变化的字符网格，颜色随主题自动适配
• 文本动画系列: 包括打字动画、文字旋转、变形、闪光、渐变、3D翻转、极光文本、视频文本等 10 余种
• 特效组件: 动画光束、边框光束、发光边框、流星、彩屑、粒子、霓虹渐变卡片、酷炫模式
• 设备模型: Safari、iPhone 15 Pro、Android 手机壳模拟，可直接嵌入页面
• 背景图案: 闪烁网格、动画网格、复古网格、点状图案、六边形图案、条纹图案、交互式网格、光线射线、噪点纹理共 10 种

模板与区块

Magic UI Pro 提供 50+ 预构建的区块和完整模板，覆盖多种业务场景。

• Pro 模板系列: AI Agent、Dev Tool、Mobile、SaaS、Startup、Portfolio 共 6 套
• 区块示例: 跑马灯、终端、英雄视频对话框、Bento 网格、动画列表、Dock、地球、推文卡片、环绕圆圈、头像圆圈、图标云
• 按钮变体: 彩虹按钮、闪烁按钮、闪亮按钮、脉冲按钮、涟漪按钮、交互式悬停按钮、动画订阅按钮

设计理念与目标用户

作者 dillion 认为优秀设计是建立用户信任的关键，该库深受 Linear 着陆页和 shadcn/ui 启发。

• 目标用户: 需要快速构建专业着陆页的开发者、创业团队、独立开发者
• 设计哲学: 组件级细节体现团队专业度，从而提升用户对产品的信任
• 灵感来源: 2020 年 Linear 着陆页的设计风格，以及 shadcn/ui 的可复制粘贴模式

使用方式与生态

Magic UI 采用复制粘贴模式，组件基于 React + TypeScript + Tailwind CSS + Motion 构建。

• 安装方式: 无需包管理器，直接从文档复制组件代码到项目中
• 技术栈: React、TypeScript、Tailwind CSS、Framer Motion（文档中称 Motion）
• 社区数据: GitHub 星标 21,657，Discord 社区 21.7k 成员，Twitter 关注 171
• 知名用户: anara.com (YC S24)、aomni.com、cognosys.ai (Google Ventures 投资 $2M)、infisical.com (YC W23)、langfuse.com (YC W23 融资 $4M)、llm.report (Vercel AI Accelerator 2023 获奖 $120k)

常见问题

Q1：Magic UI 和 shadcn/ui 有什么区别？

A1：Magic UI 定位为 shadcn/ui 的完美伴侣，专注于着陆页和营销场景的动画组件与区块，而 shadcn/ui 更侧重通用 UI 组件。两者都采用复制粘贴模式，技术栈一致（React + Tailwind CSS）。

Q2：Magic UI Pro 的定价是多少？

A2：材料未提供具体价格数字，但明确 Magic UI Pro 为付费产品，包含 50+ 区块和模板，核心组件库免费开源。

Q3：Magic UI 的 Glyph Matrix 组件有什么特点？

A3：Glyph Matrix 是一个画布组件，显示不断变化的字符网格，颜色会根据当前主题自动适配，适合作为背景或装饰元素。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。