Generating React Components That Match An Existing Codebase
Paste one of your own components as the style reference and the output stops fighting your conventions.
frontend
react
typescript
components
Keywords:
react component generation
code conventions
shadcn
Generated React is usually fine in isolation and wrong for your repo — different import style, different state library, className soup where you use cva.
The fix is one extra paragraph:
"Here is an existing component from this codebase. Match its conventions exactly: import order, how props are typed, how variants are handled, how it handles loading and empty states.
[paste one real component]
Now build: [description]"
You are not describing your conventions, you are showing them. Same reason few-shot beats instructions.
What still needs a hand edit: accessibility. It will add aria-label and stop. If you want focus management on a dialog, or a live region on an async result, ask for those by name.
