# 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.

- **Author:** [Minh Nguyen (@minh_nguyen)](https://www.promptabide.com/minh_nguyen)
- **Published:** 2026-02-09
- **Updated:** 2026-08-22
- **Tags:** `frontend`, `react`, `typescript`, `components`
- **Views:** 8112
- **Likes:** 178

## Prompt

```
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.
```

---

Canonical HTML: https://www.promptabide.com/bides/react-components-match-codebase-minh-nguyen-1
Agent guide: https://www.promptabide.com/llms.txt · https://www.promptabide.com/agent-instructions.md
Sitemap: https://www.promptabide.com/sitemap.xml