elements
为 Next.js 全栈开发者提供开箱即用的 UI 组件库，涵盖认证、支付、AI 等模块。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：elements。 它的用途是：为 Next.js 全栈开发者提供开箱即用的 UI 组件库，涵盖认证、支付、AI 等模块。 完整的 Skill 内容见：https://321skill.com/skills/elements/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用 Next.js 开发一个 SaaS 应用，需要快速集成用户登录功能和 Stripe 支付页面。”，它会建议你使用 Elements 的 Clerk 认证组件和 Polar 支付组件，并给出具体的安装命令和集成步骤。或者，当你需要为项目展示页添加一堆科技公司 Logo 时，它可以指导你使用 Elements 的 Logos 组件库一键添加。
介绍
Elements 是一个基于 shadcn/ui 的全栈 UI 组件库，旨在解决开发者在构建现代 Web 应用时重复造轮子的问题。它提供了从品牌 Logo、用户认证、AI 聊天界面到支付集成、文件上传等一整套高质量、可直接安装的 React 组件。
使用方式非常便捷，通过 npx shadcn@latest add 命令即可将特定组件添加到你的 Next.js 项目中，无需手动配置构建工具或样式。Elements 本身作为 shadcn 的官方受信注册表，确保了与现有 shadcn 项目的无缝集成。
它非常适合使用 Next.js、TypeScript 技术栈，并希望快速集成第三方服务（如 Clerk、Vercel AI SDK、Polar、UploadThing 等）的前端或全栈开发者。无论是启动新项目，还是在现有项目中快速添加功能模块，都能显著提升开发效率。
建议在开始使用前，先浏览其官方文档网站查看所有可用组件。由于组件深度集成了特定第三方服务，请确保你的项目已配置或计划使用对应的服务（如 Clerk 用于认证）。
核心特点
作为 shadcn/ui 的官方受信注册表，提供深度集成第三方服务（如 Clerk、Vercel AI SDK、Polar）的生产级全栈组件，而不仅仅是基础 UI 控件；同时提供超过 150 个主题自适应的品牌 Logo 组件，这在同类库中非常少见。
注意事项
主要面向 Next.js 技术栈，且组件深度绑定特定第三方服务，不适合不使用这些服务或技术栈不同的项目。
常见问题
Elements 和普通的 shadcn/ui 组件有什么区别？
Elements 是基于 shadcn/ui 构建的，但提供了更高级、集成了具体业务逻辑（如认证、支付、AI聊天）的全栈组件块，而 shadcn/ui 主要提供基础 UI 组件。
使用 Elements 需要额外配置吗？
不需要。Elements 是 shadcn 的受信注册表，使用 `npx shadcn add` 命令安装后即可直接使用，样式会自动与你的项目主题集成。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/elements/raw/index.md 读取 elements 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/elements/raw/index.md（查看排版版本）