Prompt 复制即用
每个组件都以 AI Prompt 形式发布，复制后粘贴到 Claude Code、Cursor、v0、Lovable 等工具中，组件源码会自动适配当前主题并写入项目，例如 Animated Hero 生成后新增 148 行代码。
官方说明 ↗
价格免费档每日 2 次复制；Builder $6/月起（年付）；Builder + AI $15/月起（年付）
平台Web
归类图像编辑与设计
收录2025-01-01
复核2025-01-01
编辑评分
4.4 / 5
★★★★☆
21st.dev编辑总结
21st.dev 是一个由设计工程师社区维护的 React 组件目录，收录了 12000+ 个组件、模板与 shadcn 主题，涵盖 2000+ 营销模块和 2100+ UI 组件。每个组件以 Prompt 形式提供，复制后粘贴到 Cursor、Claude Code、v0、Lovable 等 AI 工具中即可自动生成对应代码。目前已有 4091932 名开发者使用，Google、Meta、NVIDIA、ByteDance、Shopify、PayPal 等团队都在其中。免费用户每天可复制 2 个组件，Builder 档 $6/月（年付）解锁无限复制。官网未公开具体 AI 模型列表与组件详细的版本历史。
21st.dev是什么？
21st.dev 是一个面向设计工程师的 React 组件注册中心（registry），由社区中的设计工程师共同贡献内容。它不是单一的一套组件库，而是把众多来源的组件、模板、shadcn 主题、着色器和渐变效果集中到一个目录里，用户浏览、实时预览后，复制对应的 AI Prompt，粘贴进自己常用的 AI 编程工具中，组件源码就会自动落地到项目里。
目录目前收录 12000+ 个 React 组件、模板和 shadcn 主题，其中营销区块 2000+ 个，UI 组件 2100+ 个。组件遵循 React + Tailwind 与 shadcn/ui 的写法，源码直接进入用户仓库，可自由编辑。每个组件都有明确的作者署名，来源涵盖 Aceternity UI、Magic UI、shadcn/ui、Origin UI 等 700+ 位设计工程师。
普通开发者可以按分类浏览、收藏组件到个人或团队列表，复制 Prompt 后在自己惯用的 AI 工具中生成界面；团队可以使用 Team 档共享收藏列表与 AI 额度；AI 工具重度用户则可开启 21st AI 附加项，用多模型生成和筛选 UI。
21st.dev核心功能
12000+ 组件目录
收录 12000+ 个精制的 React 组件、模板和 shadcn 主题，细分为 2000+ 个营销区块和 2100+ 个 UI 组件，覆盖动画首屏、卡片网格、导航、登录表单、AI 对话界面等常见场景。
官方说明 ↗真实设计工程师出品
每个组件都标注作者，目录汇集 Aceternity UI、Magic UI、shadcn/ui、Origin UI 等 700+ 位设计工程师的成果，按来源可单独筛选，例如 Ruixen UI 有 390 个组件、HextaUI 有 113 个。
官方说明 ↗多来源注册中心
与单一组件库不同，21st 是注册中心，同一功能可以比较多个来源的实现风格。目录中 Aceternity UI、shadcn/ui、Geist 各有 87 个组件，Magic UI 62 个，Origin UI 44 个，方便按审美和代码风格挑选。
官方说明 ↗收藏与列表
可以把任意组件书签收藏到个人或团队共享的列表中，例如把 Landing v2 放进 Inspiration 列表，之后一键找回，方便在多个项目之间复用同一批组件。
官方说明 ↗shader 与渐变工具
Builder 档支持无限创建 shaders、渐变和 ASCII art，目录本身也包含 liquid 与 metal 效果、渐变背景、动效首屏等视觉资源，适合需要独特视觉风格的前端页面。
官方说明 ↗Design Bug Bot
在 PR 中自动发现设计问题并给出修复代码。免费账户有 5 次成功审查，用完后需添加 AI 才能继续，Builder + AI 档则直接包含在 AI 额度内。
官方说明 ↗MCP 与 CLI 搜索
Builder 及以上档位支持通过 MCP 与 CLI 搜索组件，并可无限次安装，不需在浏览器中逐个复制，适合把组件检索集成进本地开发流程。
官方说明 ↗21st AI 多模型生成
Builder + AI 档可调用多个 AI 模型生成和精修 UI，每月附赠 500 到 2000 不等的 AI credits，每 $5 可额外购买 100 credits 且未用完的额度可结转。
官方说明 ↗21st.dev值不值得用？
21st.dev 适合已经用 AI 编程工具写前端、又想快速拿到成品级 UI 的开发者。组件以 Prompt 形式交付，从浏览到落地只需复制粘贴，目录里有 2000+ 营销区块和 2100+ UI 组件，选型空间比单一组件库大得多。免费档每天可复制 2 个组件，配合预算有限的个人项目够用；如果每天都在用、还要让 AI 直接生成或审查 PR，Builder + AI 的 $15/月（年付）会更合适。需要注意注册中心里的组件来源众多，风格与代码质量并不统一，挑选时要多看作者与预览效果。
建议选它的情况
- 用 Cursor、Claude Code、v0 等 AI 工具写 React + Tailwind 前端的开发者
- 需要快速搭营销页、落地页、登录页等标准化界面的独立开发者
- 希望在同一目录里比较 Aceternity UI、Magic UI、shadcn/ui 等多种风格来源的设计工程师
- 希望在 PR 中自动检查并修复设计问题的团队
不建议选它的情况
- 使用 Vue、Angular 等非 React 技术栈的团队
- 不接受 AI 生成代码、需要完全手写组件的开发者
- 需要组件库提供统一维护承诺与长期版本支持的企业项目
21st.dev使用建议
入门先把路子走对
- 先复制一个试手在组件详情页点击复制 Prompt，把内容粘贴到 Claude Code 或 Cursor 的终端里，代码会直接写入 ui 目录，第一次可以先挑一个简单按钮验证流程。
- 用列表整理素材浏览时把感兴趣的组件按项目存进个人列表，比如把 Landing v2 存进 Inspiration，下次开工直接打开列表批量复制。
- 按来源筛选组件在目录里按 Aceternity UI、Magic UI、shadcn/ui 等来源筛选，同一功能多看几个实现，选与项目现有风格最接近的那个。
- 留意每日免费额度免费账号每天可复制 2 个组件，规划好当天要落地的组件再复制，避免额度用在预览阶段的重复尝试上。
进阶省时间也省钱
- 用 MCP 检索组件升级到 Builder 档后，可通过 MCP 与 CLI 搜索组件并批量安装，不必来回切浏览器，适合在本地 IDE 内直接挑选和落地。
- 集中额度做 PR 审查Design Bug Bot 免费账户只有 5 次成功审查，额度用完后需添加 AI；如果团队经常开 PR，把 AI 额度优先留给设计问题检查更划算。
- 年付省 25%Builder 年付为 $6/月，Builder + AI 为 $15/月，比按月付更省；如果确定会长期使用，选年付并留意 AI credits 可结转的规则。
21st.dev适合谁用？
AI 编程工具重度用户
推荐日常在 Cursor、Claude Code、v0、Lovable 里写前端，想直接粘贴 Prompt 生成成品界面，21st 的交付方式与这类工作流完全对齐。
独立开发者与小型团队
推荐需要快速搭营销页和产品界面，免费档每天 2 次复制够覆盖原型验证，Builder 档 $6/月（年付）解锁无限复制后成本可控。
设计工程师
推荐既要审美又要落地代码，可在多个来源之间比较实现方式，每个组件都有作者署名，便于追溯和学习具体写法。
需要统一设计系统的企业团队
有条件Team 档提供共享列表、优先支持以及每席位 500–2000 的 AI 额度选项，但组件来源众多、风格不一，选型时需要额外的规范约束。
Vue / Angular 开发者
不推荐目录里全部是 React + Tailwind、shadcn/ui 写法的组件，非 React 技术栈无法直接复用，改造迁移成本高。
21st.dev优点和缺点
优点
- 目录收录 12000+ 组件，营销区块 2000+、UI 组件 2100+，选型空间大
- 组件以 Prompt 交付，复制粘贴即可让 AI 生成代码并适配当前主题
- 免费档每天可复制 2 个组件，足够验证流程和做小项目原型
- Builder 年付 $6/月、Builder + AI 年付 $15/月，个人开发者负担得起
- 每个组件都有作者署名，汇集 700+ 位设计工程师的成果
- 源码遵循 React + Tailwind、shadcn/ui 约定，落地后可自由编辑
- 已在 4091932 名开发者中使用，Google、Meta、NVIDIA 等团队在内
缺点
- 组件来自众多作者，风格与代码质量并不统一，挑选需要花时间
- 全部面向 React 技术栈，Vue、Angular 等项目无法直接使用
- 免费档每天只有 2 次复制，频繁使用很快触及上限
- 需要依赖 AI 编程工具才能把组件落地到项目
- 官网未公开 21st AI 具体支持哪些模型，也没有组件版本历史
- Design Bug Bot 免费只有 5 次成功审查，超出后要添加 AI
21st.dev版本与计费对比
| 方案 | 价格 | 包含内容 | 说明 |
|---|---|---|---|
| Free | 免费 | 每日 2 个组件复制 | 可浏览全部注册中心 |
| Builder | $6/月（年付） | 无限代码与 Prompt 复制 | 含 29,000 个按语义搜索的图标、无限安装、可创建无限 shaders 与渐变 |
| Builder + AI | $15/月（年付） | 500–2000 AI credits / 月 | 含 Design Bug Bot、多模型生成，额外额度每 $5 购买 100 credits 可结转 |
| Team | 官网未公开 | 共享额度 | 含团队共享列表、优先支持，可选每席位 500–2000 AI 额度 |
以上为公开费率整理，厂商保留调价权利，实际以官方页面为准。
21st.dev关键指标
| 指标 | 数值 | 数据来源 |
|---|---|---|
| 收录组件总数 | 12000+ | 21st.dev 首页 |
| 营销区块 | 2000+ | 21st.dev 首页 |
| UI 组件 | 2100+ | 21st.dev 首页 |
| 使用开发者数 | 4091932 | 21st.dev 首页 |
| 设计工程师贡献者 | 700+ | 21st.dev 首页 |
| 本周安装量 | 25431 | 21st.dev 首页 |
| 免费每日复制额度 | 2 | 21st.dev 定价页 |
| Builder 年付价格 | $6/月 | 21st.dev 定价页 |
| Builder + AI 年付价格 | $15/月 | 21st.dev 定价页 |
| AI credits 范围 | 500–2000 | 21st.dev 定价页 |
| 图标数量 | 29,000 | 21st.dev 定价页 |
| Design Bug Bot 免费审查 | 5 | 21st.dev 定价页 |
21st.dev常见问题
21st.dev 免费吗？＋
浏览全部注册中心免费，免费账号每天可以复制 2 个组件。需要无限复制和高级模板时选 Builder，年付 $6/月；想用 21st AI 生成和精修 UI、并让 Design Bug Bot 检查 PR，则选 Builder + AI，年付 $15/月，含 500 到 2000 不等的 AI credits。
免费额度用完了怎么办？＋
免费账号每天 2 次复制，用完当天不能继续。升级到 Builder 可无限复制代码和 Prompt，并可无限安装组件；Builder + AI 还额外提供每月 500 到 2000 的 AI credits，额度不够时可每 $5 购买 100 credits，未用完的部分可以结转。
21st 和普通 React 组件库有什么区别？＋
普通组件库是一整套包，只有一种审美，以依赖形式安装。21st 是注册中心，汇集 Aceternity UI、Magic UI、shadcn/ui、Origin UI 等多来源共 12000+ 组件，可以挑不同作者的实现，复制 Prompt 后写入自己的仓库而不是作为依赖引用。
组件落地后能改吗？＋
可以。组件源码以 React + Tailwind、shadcn/ui 约定直接写入项目仓库，例如 Animated Hero 会生成 ui/animated-hero.tsx 并新增约 148 行代码，落库后就是自己的文件，可以任意编辑。
团队怎么用？＋
Team 档面向团队和机构，提供团队共享的收藏列表、优先支持，并可按席位选择是否附带 500 到 2000 的 AI 额度。Design Bug Bot 在团队内提供 5 次免费审查，之后使用共享的 Team + AI 额度。
