Build a UI Component
A prompt for getting production-quality React components with proper props, accessibility, and dark mode support.
5-10 min|Intermediate
BuildQuick WinDeveloper
Prompt Template
Build a React component called [Name] with these requirements: Props: [list each prop with its type and whether it's required] Behavior: [describe interactions: hover, click, focus, loading states] Styling: Use Tailwind CSS. Support dark mode via the .dark class convention. Accessibility: Include proper ARIA attributes, keyboard navigation, and focus-visible rings. Do NOT add: [list things to exclude, e.g. animation libraries, external state management] Here is an example of how it should look when rendered: [describe or paste a visual reference]
Specifying props, behavior, and accessibility upfront means you get a component that works in your app, not a CodePen demo. The "do NOT add" section prevents scope creep.
When building any reusable UI component. The more specific you are about props and behavior, the less iteration you'll need.