Your First Component in v0

Start with a component whose boundary is clear: a login or pricing card, search bar, filter panel or empty state. A large dashboard may look impressive while making it harder to judge what v0 actually helped with.

#Define structure, states and behavior

Before generation, list the blocks, the interaction states and what happens after a click. Visual adjectives cannot replace those requirements.

textCopy
Create a login card component.
Requirements:
- title: Welcome back
- two input fields: email and password
- primary button: Log in
- secondary action: Forgot password
- clean centered layout
- desktop and mobile friendly
- include basic error and disabled states

#Review the first result

Check information hierarchy, a clear primary button, spacing and basic states before refining colors. If the structure is wrong, visual polish will not repair it.

#Common failures

#Acceptance criteria

The component should have understandable structure, sensible states, editable code and a realistic integration path. A screenshot that cannot become maintainable code is a visual draft rather than a usable component draft.

Work in three rounds: structure, states, then visual refinement. This makes the effect of each round observable.