21st.dev

一、网站概况

21st.dev 是一个面向开发者与设计工程师的 React 组件、模板与主题资源平台，由 21st Labs, Inc. 运营。网站定位为”活界面数字图书馆”，汇集了 12,000+ 个由真实设计工程师手工打造的 React 组件、网站模板和 shadcn/ui 主题。

平台覆盖了 Animated Hero（动画页头）、Shader 特效、按钮、卡片、导航、登录流程等高频 UI 场景，其中动画与 WebGL 着色器类组件是其特色内容。21st.dev 目前已被全球超过 350 万名构建者使用，客户群体涵盖个人独立开发者到 Google、Meta、NVIDIA、ByteDance、Shopify、PayPal 等大型企业团队，同时 Vercel、Lovable、Webflow、Mistral AI、Atlassian 等头部公司也在持续采用。

二、核心功能详解

组件、模板与主题三大检索库。 平台将资源清晰划分为 Components、Templates、Themes 三大类，并提供精确的数量标注——例如 2,000+ 个营销类区块、2,100+ 个通用 UI 组件，以及来自 Aceternity UI、Magic UI、shadcn/ui、Origin UI 等 30 多个知名开源库的整理收录。每一类内部还能按动画页头、渐变、卡片网格、登录框等细分维度继续筛选，方便快速定位。

Prompt 式交付与多工具兼容。 这是 21st.dev 最核心的差异化功能。每个组件都以”提示词（prompt）”形式分发，只需复制一段描述并粘贴到任何你正在使用的 AI 编程工具中即可自动生成代码。平台原生适配 Claude Code、Codex、Lovable 等主流工具：粘贴到终端，源码会直接落入你的代码仓库；扔给 Codex 作为任务，它会直接产出带 diff 的改动；粘贴到 Lovable 对话中，对应 UI 会以可视化方式出现在项目里。

书签与分组收藏。 用户可以将任何组件”书签”保存到个人或团队共享的列表中，再以一键方式随时调取。这与独立开发团队需要沉淀设计资产、多人协作复用的场景高度契合。

三、使用教程 / 操作指南

注册与登录。 网站首页右上角提供 Sign up（注册）与 Log in（登录）入口，支持免费创建账号，登录后可进行收藏和后续的组件下载管理。

获取一个组件的基本流程。 第一步，在首页或分类页中浏览组件，通过预览图快速判断效果；第二步，点击感兴趣的目标组件进入详情；第三步，复制平台提供的 prompt 文本；第四步，将 prompt 粘贴到你常用的工具中——Claude Code、Codex 或 Lovable 均可，代码会自动生成并适配你的项目主题。

使用小技巧。 严格遵循 shadcn/ui 的项目结构，能获得最好的适配结果，让”Adapted to your theme”的优势充分发挥。平台还支持将组件按整体登录流程等复合场景整体排布，浏览时留意页面给出的按钮动效预览，可减少实际集成后的返工。

四、内容与资源质量

21st.dev 的内容数量与更新频率都处于行业领先水位。首页信息显示，每周安装量高达 25,431 次，足见资源持续被真实项目消化。平台汇集了 12,000+ 组件，并明确索引了 Aceternity UI（87 个）、Magic UI（62 个）、shadcn/ui（87 个）等主流库，总量还叠加了 700 余名独立设计工程师持续发布的新作。

所有组件均以真实可编辑的 React + Tailwind 源码交付，遵循 shadcn/ui 规范，落地即为可运行代码而非截图或原型。每个组件都带有作者署名，可追溯来源。在版权层面，平台要求内置作品归属清晰，相对传统”包罗万象”的资源站，其可追溯性更具可信度——不过具体商用授权条款仍需以官方最新政策为准。

五、适用人群与场景

21st.dev 面向的首先是使用 AI 编程工具的开发者——无论是拥抱 Claude Code、Codex 的还是 Lovable 的用户，都能最大化榨取其价值。其次是有强烈视觉表达需求的产品团队与设计师，因为海量动画与玻璃、液态金属等趋势化特效高度契合他们的审美标准。

典型使用场景一：独立开发者在 Lovable 中快速搭建落地页，从收藏的高转化 hero 区块起步，十几秒内获得可上线的 UI。场景二：中大厂前端团队沉淀内部设计规范，将团队共享书签中的按钮、卡片组件按需分发到多个仓库。场景三：设计师用 Claude Code 把灵感落地为可运行原型，再逐步精修动画性能。

不适合的人群包括不熟悉 shadcn/ui 与 Tailwind 生态的纯后端工程师，以及需要严格视觉定制、完全摆脱既定设计语言的场景——统一风格下做出差异化仍需额外成本。

六、优缺点分析

优点： 其一，交付物是真实源码且遵循主流规范，落地效率远高于传统组件截图站；其二，资源量 12,000+ 且覆盖了几十家知名库，几乎不必再跨平台寻找；其三，深度适配 Claude Code、Codex、Lovable 等主流 AI 工具，工作流衔接顺滑；其四，动画与特效组件质量突出，在同类型网站中视觉天花板更高。

不足： 其一，对国内开发者而言服务器速度与英文界面存在一定门槛；其二，多数高价值组件的完整商用可能依赖订阅制，免费额度有限；其三，过度依赖 shadcn/ui 体系，脱离该生态时适配成本上升。