Prompts for the components AI gets wrong
Ask your AI for an OTP input and you get six broken <input>s. Ours is one precise prompt that encodes the trick — paste it into Cursor, Claude, or Copilot and it builds right the first time, in your tokens, with zero new dependencies.
46 components · 7 categories · every prompt tested on a mid-tier model
Build an "OTP Input" — a labeled 6-digit one-time-code field rendered as six separate digit slots (grouped 3 + 3 around a small dash), for SMS/email verification screens.
Critically, this is ONE real input with six painted slots, never six separate <input> elements — per-slot inputs are the classic broken implementation (focus juggling, backspace behavior, and SMS autofill all fall apart); the single-input architecture gets native paste and iOS/Android code autofill for free.
Behavior: the hidden input has inputMode="numeric", autoComplete="one-time-code", pattern="\d*", and maxLength 6; its onChange strips every non-digit and truncates to 6, so typing, pasting a full code, and OS-level SMS autofill all funnel through one sanitizer. Clicking anywhere on the slot row focuses the hidden input. Backspace naturally deletes the last digit (it is just editing the single input's value). The active slot index is min(value.length, 5).
Enter the 6-digit code we sent to your phone.
Live output — click and type.
Why a prompt beats pasted code
Inherits your theme
Prompts reference semantic tokens — bg-primary, text-muted-foreground — never hex. The component lands already wearing your design system.
Built for Tailwind + shadcn/ui
Every prompt is written for a React + Tailwind CSS + shadcn/ui project — that's where results are most accurate. No package to install, no peer-dependency roulette; your AI writes idiomatic code inside your own codebase.
Encodes the trick
Each prompt names the exact technique AI misses — the single-input OTP, the -50% marquee seam, the filter-sort-paginate order — so a mid-tier model nails it.
Thirty seconds, start to shipped
- 1
Find the component
Browse live, interactive previews — every demo actually works.
- 2
Copy the prompt
One block of text. Ten sections. Zero ambiguity.
- 3
Paste into your AI
Cursor, Claude Code, Copilot — the component arrives built for your codebase.
The hard ones, solved
Not another button library. These are the components that come back broken when you ask for them cold.
