# React Components Creation

# React Components Creation Guidelines

## Introduction
This document provides a step-by-step guide for creating React components within our project. It emphasizes best practices, component structure, and integration with Tailwind CSS and TypeScript.

## Step-by-Step Guide

1. **Component Purpose and Design**
   - Carefully consider the component's purpose, functionality, and design.
   - Think slowly, step by step, and outline your reasoning.

2. **Check for Existing Components**
   - Verify if a similar component already exists in the following locations:
     1. `packages/ui/src/components`
     2. `apps/spa/src/components`

3. **Generate a Detailed Prompt**
   - If the component doesn't exist, generate a detailed prompt including:
     - Component name and purpose
     - Desired props and their types
     - Any specific styling or behavior requirements
     - Mention of using Tailwind CSS for styling
     - Request for TypeScript usage

4. **URL Encode the Prompt**
   - URL encode the generated prompt.

5. **Create a Clickable Link**
   - Create a clickable link in this format:
     `[ComponentName](https://v0.dev/chat?q={encoded_prompt})`

6. **Adapt the Component**
   - After generating, adapt the component to fit our project structure:
     - Import common `shadcn/ui` components from `<ui_package_alias>@repo/ui/components/ui/</ui_package_alias>`
     - Import app-specific components from `<app_package_alias>@/components</app_package_alias>`
     - Ensure it follows our existing component patterns
     - Add any necessary custom logic or state management

## Example Prompt Template
```
Create a React component named {ComponentName} using TypeScript and Tailwind CSS.
It should {description of functionality}. Props should include {list of props with types}.
The component should {any specific styling or behavior notes}. Please provide the full component code.
```

## Notes
- Replace placeholders like `<ui_package_path>` and `<app_package_alias>` with the actual values used in your project.
- Ensure all components follow our coding standards and performance optimization guidelines.

## Conclusion
By following these guidelines, you can create efficient, maintainable, and well-structured React components that integrate seamlessly with our project's architecture and design system.