React组件集成提示
来自 Wikiprompt，自由的提示词百科全书
2026年6月8日
React组件集成提示 一个用于将React组件集成到shadcn/Tailwind/TypeScript项目中的结构化提示，涵盖设置、依赖项和实施步骤。
提示词内容收藏
🌐
任务是将现有React组件集成到代码库中。
代码库应支持：
- shadcn项目结构
- Tailwind CSS
- TypeScript
如果不支持，请提供通过shadcn CLI设置项目、安装Tailwind或TypeScript的说明。
确定组件和样式的默认路径。
如果组件的默认路径不是/components/ui，请说明为什么创建此文件夹很重要
将以下组件复制粘贴到/components/ui文件夹中：
${21st.dev_component}
实施指南
1. 分析组件结构并识别所有必需的依赖项
2. 检查组件的参数和状态
3. 识别任何必需的上下文提供程序或钩子并安装它们
4. 需要提出的问题
- 哪些数据/属性将传递给此组件？
- 是否有特定的状态管理要求？
- 是否有必需的资源（图像、图标等）？
- 预期的响应式行为是什么？
- 在应用中使用此组件的最佳位置在哪里？
集成步骤
0. 将所有上述代码复制粘贴到正确的目录中
1. 安装外部依赖项
2. 使用您知道存在的Unsplash库存图片填充图像资源
3. 如果组件需要，使用lucide-react图标作为SVG或徽标
用法
此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果，可将占位符（方括号或大写字母标示）替换为你的具体需求。
讨论
0 条评论