# 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:** [Kabir Singh (@kabir_singh)](https://www.promptabide.com/kabir_singh)
- **Published:** 2026-08-18
- **Updated:** 2026-08-22
- **Tags:** `frontend`, `react`, `typescript`, `components`
- **Views:** 327
- **Likes:** 372

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

## Output

*Produced by Claude · claude-sonnet-4.*

```
const badgeVariants = cva("inline-flex items-center rounded-md px-2 py-1 text-xs font-medium", {
  variants: {
    tone: {
      neutral: "bg-muted text-muted-foreground",
      success: "bg-emerald-500/10 text-emerald-600",
      danger: "bg-red-500/10 text-red-600",
    },
  },
  defaultVariants: { tone: "neutral" },
})
```

---

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