Build a React Component
Generate a complete, accessible React component with TypeScript types, props, and Tailwind styling.
The Prompt
Build a React component with the following requirements. Include: 1. TypeScript interface for all props 2. Proper accessibility (ARIA attributes, keyboard navigation) 3. Tailwind CSS styling (or CSS modules if specified) 4. Loading and error states 5. Basic animation or transition 6. Export and usage example Component requirements: [DESCRIBE THE COMPONENT — e.g., A data table component that accepts an array of typed rows and columns, supports sorting by clicking headers, has pagination, and shows a skeleton loader while loading] Framework: React [18/19] Styling: [TAILWIND / CSS MODULES / STYLED-COMPONENTS] State management: [LOCAL STATE / ZUSTAND / REDUX — if needed]
Example Output
Generated a fully typed DataTable<T> component with generic row type, column config with optional sort/render functions, optimistic sort state, pagination controls, a skeleton loader using animate-pulse, and full ARIA table/grid markup.
FAQ
Which AI model is best for Build a React Component?
GPT-4o or Claude Sonnet 4. For complex components with many interactions, Claude Sonnet 4 reasons more thoroughly.
How do I use the Build a React Component prompt?
Copy the prompt, replace the [BRACKETED] placeholders with your specific information, and paste into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.). Generated a fully typed DataTable<T> component with generic row type, column config with optional sort/render functions, optimistic sort state, pagination controls, a skeleton loader using animate-pulse, and full ARIA table/grid markup.
Model Recommendation
GPT-4o or Claude Sonnet 4. For complex components with many interactions, Claude Sonnet 4 reasons more thoroughly.