21st:

21st.dev 是一个社区驱动的 React + Tailwind CSS 组件注册中心，收录 10,000+ 手工制作的组件与模板，支持实时预览、一键安装，并为每个组件预置 AI Prompt，可无缝接入 Cursor、Claude Code、v0、Lovable 等 AI 工具。

它解决了什么问题

传统组件库（如 Ant Design）以 npm 包形式分发，版本锁定、样式耦合、难以按需定制。21st.dev 采用 shadcn/ui 的 "Code Out" 模式：组件代码直接复制到项目目录，用户拥有完整控制权，无需升级依赖。同时，每个组件附带一个 AI Prompt，复制后粘贴到 Cursor/Claude Code 等工具中即可自动生成适配项目主题的代码，大幅降低从发现到落地的摩擦。

• 无版本依赖：代码落地即脱钩，用户自行修改，无需跟随上游升级
• AI 原生交互：每个组件详情页提供 "Copy Prompt" 按钮，一键复制生成指令
• MCP 服务：官方提供 Magic MCP，Cursor 等 IDE 中通过 /ui 指令即可按上下文调用组件知识

内容规模与质量

平台已汇聚 727,000+ 开发者，收录超过 10,000 个组件，来源包括 Aceternity UI、Magic UI、shadcn/ui、Origin UI、Geist 等 700+ 设计工程师。组件按类型分为 2,000+ 营销块（动画英雄区、渐变页脚等）和 2,100+ UI 组件（按钮、AI 聊天、3D 导航、卡片网格等）。所有组件经官方审核，保证设计质量。

• 营销块：Animated Heroes、Shaders、Liquid Metal、Gradients、Footers 等
• UI 组件：Buttons、AI Chats、Cards Grids、Galleries、3D Navigation、Sign-ins、Widgets
• 知名贡献库：Aceternity UI (87组件)、Magic UI (62)、shadcn/ui (87)、Origin UI (44)、Geist (87)、Kokonut UI (49)、HextaUI (113) 等

安装与使用方式

提供三种消费路径：1）传统 CLI 安装——复制 shadcn 格式的 install 命令（如 npx shadcn@latest add ...）；2）AI Prompt 粘贴——在 Cursor、Claude Code、v0、Lovable 等工具中粘贴 Prompt，自动生成组件代码；3）MCP 集成——配置 21st.dev Magic MCP 后，在支持 MCP 的 IDE 中通过 /ui 指令直接生成组件。

• CLI 安装：组件详情页复制 install 命令，终端执行即落地
• AI Prompt：点击 Copy Prompt，粘贴到任意 AI 编码工具，自动适配主题
• MCP 服务：配置 npx -y @smithery/cli@latest run @21st-dev/magic-mcp，使用 /ui 指令

收费与限制

浏览整个注册中心免费，每日提供 2 次免费组件复制。付费方案分为 Builder（个人）、Builder + AI（含 AI 生成）、Team（团队）。Builder 方案解锁无限复制、MCP 代码检索、SVG Logo 搜索；Builder + AI 额外提供 500-2,000 月 AI 积分，支持多模型对比、代码模式（React + 实时沙箱）和组件迭代优化。Team 方案增加集中计费、共享团队收藏、管理员控制及优先支持。AI 积分可额外购买，100 积分/$5（可滚动）。

• 免费层：浏览全站 + 每日2次复制
• Builder：无限复制 + MCP 检索 + SVG 搜索（无AI积分）
• Builder + AI：500-2000月AI积分 + 多模型对比 + 代码模式 + 迭代优化
• Team：集中计费 + 共享收藏 + 管理员控制 + 优先支持
• 额外积分：+100 积分/$5，未用完可滚动

常见问题

Q1：21st.dev 和 shadcn/ui 是什么关系？

A1：21st.dev 采用 shadcn/ui 的注册中心格式和组件约定，组件可直接与 shadcn/ui 原语组合，并兼容现有设计令牌。但 21st.dev 是一个多作者、多风格的开放市场，而非单一库。

Q2：如何将 21st.dev 组件接入 Cursor？

A2：推荐使用 MCP 方式：在 Cursor 设置中添加 MCP 服务，Type 选 command，命令为 npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{"TWENTY_FIRST_API_KEY":"your-api-key"}"，之后在对话中以 /ui 开头即可调用。

Q3：发布组件到 21st.dev 需要审核吗？

A3：任何人都可以发布组件，但平台会进行官方审核以保证质量。发布后组件会显示在作者公开个人主页上，模板作者可自行定价销售。

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

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