指导把 21st.dev 的 React 组件集成到 shadcn、Tailwind、TypeScript 项目中，含环境配置和目录约定。
填写变量
填写后，下方提示词与复制内容会同步替换。
你被分配了一项任务，即将一个现有的 React 组件集成到代码库中。
代码库应支持：
- shadcn 项目结构
- Tailwind CSS
- Typescript
如果不支持，请提供通过 shadcn CLI 设置项目、安装 Tailwind 或 Typescript 的说明。
确定组件和样式的默认路径。
如果组件的默认路径不是 /components/ui，请说明创建此文件夹的重要性。
将以下组件复制粘贴到 /components/ui 文件夹中：
{{component}}
实现指南
1. 分析组件结构并识别所有必需的依赖项
2. 检查组件的参数和状态
3. 识别任何所需的上下文提供程序或钩子并安装它们
4. 需要提出的问题
- 将向此组件传递哪些数据/属性（props）？
- 是否有任何特定的状态管理需求？
- 是否有任何必需的资源（图像、图标等）？
- 预期的响应式行为是什么？
- 在应用中的哪个位置使用此组件最合适？
集成步骤
0. 将上述所有代码复制粘贴到正确的目录中
1. 安装外部依赖项
2. 使用你已知存在的 Unsplash 示例图片填充图像资源
3. 如果组件需要 SVG 或图标，请使用 lucide-react 图标You are given a task to integrate an existing React component in the codebase.
The codebase should support:
- shadcn project structure
- Tailwind CSS
- Typescript
If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.
Determine the default path for components and styles.
If default path for components is not /components/ui, provide instructions on why it's important to create this folder
Copy-paste this component to /components/ui folder:
{{component}}
Implementation Guidelines
1. Analyze the component structure and identify all required dependencies
2. Review the component's argumens and state
3. Identify any required context providers or hooks and install them
4. Questions to Ask
- What data/props will be passed to this component?
- Are there any specific state management requirements?
- Are there any required assets (images, icons, etc.)?
- What is the expected responsive behavior?
- What is the best place to use this component in the app?
Steps to integrate
0. Copy paste all the code above in the correct directories
1. Install external dependencies
2. Fill image assets with Unsplash stock images you know exist
3. Use lucide-react icons for svgs or logos if component requires them