Generating Components
Describe a UI component with its props and states, and let Claude produce reusable code.
Claude shines at turning a short description into a reusable component — a React component, a Web Component, or a plain HTML/CSS snippet.
Give Claude the component's contract
- Name and purpose — "a Toast notification".
- Props / inputs — message, variant (success, error), duration.
- States — entering, visible, dismissing.
- Framework — React with hooks, or vanilla JS.
Iterate in small steps
Generate the component, run it, then ask for changes: "add a close button", "make it slide in from the right". Claude keeps the working parts and edits the rest.
Example
const prompt = `Create a React Toast component (hooks, no external libraries).
Props:
- message: string
- variant: "success" | "error" (controls colour)
- duration: number (ms before it auto-dismisses)
Behaviour:
- Slides in from the top-right, then auto-dismisses after \`duration\`.
- Includes an accessible close button.
Return the component file and a tiny usage example.`;
const response = await client.messages.create({
model: "claude-opus-4-8",
max_tokens: 4096,
messages: [{ role: "user", content: prompt }],
});When to use it
- Generate a reusable React data-table component with sortable columns from a short props description.
- Ask Claude to produce a Web Component for an expandable accordion that works without any framework.
- Create a Svelte toast notification component including the animation and dismiss-on-click logic.
More examples
Describe props to get a React component
Naming every prop and the fallback behaviour gives Claude enough detail to produce a production-ready component.
const prompt = `Create a React <Avatar> component.
Props: src (string), alt (string), size ('sm'|'md'|'lg'), fallback (string initials).
If src fails to load, show fallback initials in a coloured circle.
Use Tailwind. TypeScript. Export as named export.`;
const msg = await client.messages.create({
model: "claude-sonnet-4-5",
max_tokens: 512,
messages: [{ role: "user", content: prompt }],
});Ask for multiple state variants
Explicitly requesting disabled and ARIA states ensures the generated component handles accessibility from the start.
const prompt = `Generate a <ToggleSwitch> React component with:
- checked / onChange props
- disabled state (greyed out, no interaction)
- ARIA role="switch" and aria-checked attribute
Tailwind only. No external libraries.`;
const msg = await client.messages.create({
model: "claude-sonnet-4-5",
max_tokens: 512,
messages: [{ role: "user", content: prompt }],
});Generate component with usage example
Asking for an inline usage example ensures the generated code includes a working import and JSX snippet.
const prompt = `Build a React <Badge> component (TypeScript).
Props: label (string), color ('green'|'red'|'yellow'|'blue').
After the component, add a short usage example showing all four colors.`;
const msg = await client.messages.create({
model: "claude-sonnet-4-5",
max_tokens: 768,
messages: [{ role: "user", content: prompt }],
});
Discussion