Create React Component

Build React components with Convex hooks and Tailwind CSS.

Goal

Generate reusable, well-typed React components with:

• •Props interface for type safety
• •Convex hooks for data (if needed)
• •Tailwind CSS styling
• •Loading and empty states
• •Accessibility considerations

Instructions

1. Component Structure

// src/components/ComponentName.tsx

interface ComponentNameProps {
  // Define all props with types
}

export function ComponentName({ prop1, prop2 }: ComponentNameProps) {
  // Component logic
  return <div>...</div>;
}

2. With Convex Query

import { useQuery } from "convex/react";
import { api } from "@convex/_generated/api";

export function ItemList() {
  const items = useQuery(api.items.list);
  
  if (!items) return <LoadingState />;
  if (items.length === 0) return <EmptyState />;
  
  return <ul>{items.map(...)}</ul>;
}

3. With Convex Mutation

import { useMutation } from "convex/react";
import { api } from "@convex/_generated/api";

export function CreateForm() {
  const createItem = useMutation(api.items.create);
  
  const handleSubmit = async (data: FormData) => {
    await createItem({ name: data.get("name") as string });
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
}

4. State Handling

Always handle these states:

• •Loading: Show skeleton/spinner while data loads
• •Empty: Friendly message when no data exists
• •Error: Display error message (catch in mutation)

5. Tailwind Patterns

Constraints

• •DO NOT fetch data with useEffect (use Convex useQuery)
• •DO NOT skip loading states for async components
• •DO NOT use inline styles (use Tailwind)
• •DO export components as named exports

Examples

See examples/ directory for:

• •list-component.tsx - List with loading/empty states
• •form-component.tsx - Form with mutation