21st.dev：快速获取和分享React UI组件的开源平台

21st.dev是一个开源平台，专注于React UI组件的创建、分享和安装。它以shadcn/ui为灵感，提供基于Tailwind CSS和Radix UI的轻量、现代组件。开发者可以快速安装组件，发布自己的作品，或通过AI生成多种UI变体。平台支持TypeScript，操作简单，通过npx shadcn命令即可集成组件。社区驱动的模式鼓励开发者参与贡献，适合前端开发者和设计工程师快速构建美观界面。

功能列表

• 提供基于shadcn/ui的React组件，支持Tailwind CSS和Radix UI。
• 使用npx shadcn命令一键安装组件及其依赖。
• 支持AI生成五种UI组件变体，供用户选择或调整。
• 允许开发者发布自定义组件，分享至社区。
• 提供多种组件演示，包括预览和视频展示。
• 支持TypeScript，组件轻量且可定制。
• 集成Remix功能，通过AI或聊天调整组件样式。
• 开源社区支持，鼓励用户通过GitHub贡献代码。

使用帮助

安装与使用

21st.dev的组件安装非常简单，主要通过npx shadcn命令完成。以下是详细步骤：

1. 准备开发环境
   确保你的项目已安装Node.js和npm。推荐使用Next.js或Vite等现代前端框架。项目需支持React和Tailwind CSS。
2. 安装组件
   在项目根目录打开终端，运行以下命令以安装所需组件。例如，安装accordion组件：

   npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"
   

该命令会自动：

• 下载组件代码及其依赖。
• 创建必要的文件（如JSX和CSS）。
• 更新Tailwind配置文件，添加主题样式。
• 配置全局样式（如有需要）。

相比手动复制代码，npx shadcn命令确保依赖完整，避免配置错误。安装后，组件即可在项目中使用。

3. 使用组件
   安装完成后，组件会出现在项目指定目录（通常是components文件夹）。例如，accordion组件的使用代码如下：

   import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
   export default function MyComponent() {
   return (
   <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
   <AccordionTrigger>标题</AccordionTrigger>
   <AccordionContent>内容</AccordionContent>
   </AccordionItem>
   </Accordion>
   );
   }
   

   你可以根据项目需求调整样式或逻辑。

特色功能操作

AI生成组件变体

21st.dev的“Magic Agent”功能通过AI生成五种UI组件变体。操作步骤如下：

1. 访问21st.dev，输入组件需求（如“登录表单”）。
2. 点击“生成”按钮，系统会返回五个不同风格的组件预览。
3. 选择一个变体，点击“Remix with AI”按钮，进一步调整布局、颜色或间距。
4. 通过聊天界面与AI交互，输入具体要求（如“增大按钮间距”），AI会实时修改代码。
5. 下载满意的组件或直接复制代码到项目中。

发布自定义组件

开发者可以分享自己的组件，步骤如下：

1. 登录21st.dev，进入“Publish”页面。
2. 上传组件代码，填写描述、标签和演示预览。
3. 提交后，组件进入“on_review”状态，仅通过直链可见。
4. 审核通过后，组件变为“posted”状态，出现在你的个人主页和社区页面。
5. 其他用户可通过npx shadcn安装你的组件。

社区贡献

21st.dev鼓励开发者参与开源贡献：

1. 访问GitHub仓库（https://github.com/21st-dev）。
2. Fork仓库并克隆到本地。
3. 使用编辑器（如Cursor）开发新组件或修复问题。
4. 提交Pull Request到主分支，等待审核。
5. 加入Discord社区，与其他开发者交流。

注意事项

• 确保Tailwind CSS已正确配置，否则组件样式可能失效。
• AI生成的组件可能需要手动调整代码以适配项目。
• 发布组件时，提供清晰的文档和演示有助于通过审核。

应用场景

1. 快速搭建前端界面
   前端开发者在开发Web应用时，可以通过21st.dev获取现成的组件（如按钮、表单、导航栏），节省开发时间。安装后直接调整样式即可适配项目需求。
2. 设计工程师的组件分享
   设计工程师可以将精心设计的UI组件发布到平台，供其他开发者使用，同时通过社区反馈优化自己的作品。
3. AI辅助UI迭代
   产品经理或初学者可使用AI生成多种UI变体，快速验证设计想法，无需深入编码。
4. 开源项目开发
   开源项目团队可以利用21st.dev的组件库，统一界面风格，同时贡献自己的组件，扩大项目影响力。

QA

1. 21st.dev的组件是否免费？
   是的，21st.dev是一个开源平台，所有组件免费使用，但部分高级功能可能需要订阅（如更高的AI生成额度）。
2. 如何确保组件与我的项目兼容？
   组件基于React、Tailwind CSS和Radix UI开发。确保项目支持这些技术栈，并正确配置Tailwind CSS即可兼容。
3. AI生成的组件可以商用吗？
   可以，但需检查具体组件的开源协议（如MIT）。建议在商用前确认版权归属。
4. 发布组件需要多长时间通过审核？
   通常1-3天，具体取决于组件的完整性和文档质量。