第一个 Magic UI 组件怎么选？
先看页面要做什么。滚动展示 Logo 可以试 Marquee，依次显示条目可以试 Animated List，组织静态卡片可以看 Bento Grid。复制代码前先打开所选组件的演示。
- 按项目版本选择安装说明，旧版项目有单独的文档入口。
- 在临时页面装一个组件，检查文字对比度、键盘操作和减少动态效果设置下的表现。
从一个交互开始
优先选择能服务具体任务的效果，例如突出功能、展示进度或介绍产品。加入装饰动效前，先确保主要操作清晰可懂。
安装方式要匹配技术栈
Magic UI 采用兼容 shadcn 的安装流程。当前文档和旧版文档涉及不同 Tailwind 版本；已有 Tailwind v3 项目应先查看旧版指引，再决定接入方案。
区分组件接入与 AI 上下文
MCP 集成可向 AI 开发工具提供组件上下文，但并非安装组件的必需条件。公开仓库采用 MIT 许可证；独立的 Pro 注册表另有访问要求。
你可能还想知道
使用 Magic UI 必须配置 MCP 吗？
不必。安装文档提供直接添加组件的方式；MCP 是向 AI 编辑器提供组件信息的额外选项。
组件预览能证明它适合我的应用吗？
不能。接入后应检查移动端、键盘操作和减少动态效果偏好。组件库预览无法代表实际页面性能。
资料出处
本文依据引用的文档与作者来源整理，vibeforthat 未对本文进行独立安装或端到端产品实测。