Generate a reusable component

Build me a reusable component: {{name, e.g. empty state}}

Where it is used: {{the places}}
Stack: {{e.g. React + TypeScript + Tailwind}}

Requirements:
1. TypeScript, with every prop typed and a short comment on what it is for.
2. Make anything likely to change a prop (copy, size, state, callbacks). Hardcode nothing.
3. Provide sensible defaults so it works with the fewest props possible.
4. Handle the edges: very long content, empty data, loading, disabled. What does each look like?
5. Give 2-3 usage examples covering the most common and the most error-prone case.

Constraints:
- No over-engineering. I do not need scenarios I did not mention.
- No new dependencies.
- Accessibility: {{e.g. keyboard operable, has aria-label}}.

Replace the {{}} parts with your own content

Why it works

1. "Anything likely to change becomes a prop" is the line between reusable and one-off - it forces parameterization up front
2. Requiring defaults guarantees the component works in its minimal form
3. Naming the four edge states plugs the empty-data and overflow branches AI usually misses
4. "No over-engineering" prevents a monster component supporting twenty cases you will never use

What it looks like

For an empty-state component, AI turns icon, title, description and action into props, and shows a minimal usage with title only and no button.

Where it bites

• !Not saying where it is used leaves AI guessing how generic to be - too rigid or wildly over-built
• !Ignoring edge states, so the component blanks out or throws on empty data

Browse categories