How to Use v0 by Vercel: A Beginner's Tutorial With Screenshots
A complete v0.dev walkthrough rebuilt from a real beginner build — Enhanced Prompt, the element selector, versions, one-click Vercel deploy, GitHub sync, and a Supabase database with login. Every step has a screenshot.
v0 in short
- v0.dev is Vercel's AI app builder: describe an app in plain English (or attach a screenshot or Figma file) and it generates a working Next.js app with preview and code side by side.
- Use Enhanced Prompt when your idea is thin, the element selector to restyle one specific component, and the version list to roll back anything you dislike.
- Deploy is one click to Vercel, and GitHub sync pushes every prompt change to your repo — your code is never locked in.
- Real data needs the Supabase integration: create the database from v0's settings, let v0 run its SQL script (delete the JWT line first), and your app gets email login with per-user data.
How to use v0.dev by Vercel For Beginners
Source video by:Code with Nathan12:28
Screenshots come from the source video and are credited with timestamp deep links. The walkthrough text is our own, based on the full transcript — facts match the recording.
This tutorial is an independent, illustrated summary for readers who prefer text. To support the creator, watch the original on the Code with Nathan channel linked above.
Build an app in v0, step by step
- 1
Start at v0.dev
Create a free account on v0.dev. The dashboard sidebar holds your chats and projects; the big prompt box is where apps start. Around it sit quick actions — clone a screenshot, import from Figma, landing pages — and the attach button accepts images and Figma files as design input.
The v0.dev composer with quick actions and the model chip.Watch at 2:00 - 2
Expand your idea with Enhanced Prompt
Typing "a note taking app" gives v0 little to work with. The Enhanced Prompt button rewrites it with core functionality, user authentication, and responsive design. Skip it if you already have a detailed prompt — the expansion can also steer the app away from what you pictured. Pick the medium model for everyday UI work; leave large for complex builds.
Enhanced Prompt turns one line into a real spec.Watch at 2:15 - 3
Browse community projects
Below the composer, the community gallery shows what others built — portfolios, landing pages, playful experiments. Open in v0 copies any of them into your account where you can inspect the code or bend it to your needs. Faster than starting from zero when something close already exists.
The community gallery: Open in v0 copies the project to you.Watch at 3:00 - 4
Generate your app
The demo prompt: "a markdown based note taking app with folders, tags, search, and syntax highlighting." Hit enter and v0 plans, then streams code into the Code view where you can watch files appear live. A minute or so later the finished app sits in the preview pane.
Watching v0 stream app/page.tsx during generation.Watch at 4:00 - 5
Test it in the preview
Use the app like a real user before changing anything: edit a note's title and body, create notes in folders, delete one, search the list. Finding behavior gaps now means one precise follow-up prompt instead of five vague ones later.
Editing a note title in the preview pane.Watch at 4:30 - 6
Restyle one element with the selector
The delete button blends into the toolbar — click the selector icon, pick the element, and prompt only about it: "use red background for this delete button." v0 scopes the change to exactly that component instead of regenerating the page, which keeps everything else stable.
The element selector scopes prompts to one component.Watch at 9:00 - 7
Roll back with versions
Every generation keeps its version. Open the version dropdown to compare, and Restore brings an older state back when an iteration goes sideways — the safety net that makes aggressive prompting cheap.
Version 2 restore card — older states stay one click away.Watch at 5:25 - 8
Deploy to Vercel
The Deploy button pushes the app straight to Vercel: a build log streams, custom domains get assigned, and a minute later your app has a public URL. Future changes redeploy in one click from the same menu.
One click from preview to a live Vercel URL.Watch at 6:00 - 9
Sync to GitHub
Click the GitHub icon, authorize v0, name the repository, and create it. From then on every prompt change is pushed to a branch in your repo — and you can always download the code as a zip or pull it via npx. Your project is never locked inside v0.
Creating the GitHub repo v0 will push to.Watch at 7:00 - 10
Connect Supabase
Data in the browser dies with the browser. Open Settings → Integrations → Supabase, accept, pick a region and the free plan, and create the database. v0 links it to your Vercel project automatically — no dashboard hopping on your side.
The Supabase Create Database dialog inside v0.Watch at 8:30 - 11
Add email login
Prompt: "Create an authentication system with email and password and store all data in Supabase." v0 generates the sign-in and sign-up pages plus an SQL script that creates the tables and security policies. Right now the app's data lives in localStorage — this step moves it to a real database.
v0 plans the auth system and prepares its SQL script.Watch at 9:10 - 12
Run the SQL script — delete the JWT line first
One gotcha the video calls out: if the script contains a line setting app.jwt_secret, delete it before running — it causes an error because the secret was already configured when Supabase was created. Then run the script (Apply in v0) to create the folders, notes, and policies.
The create-tables script — minus the JWT line — ready to apply.Watch at 9:30 - 13
Verify your data live
Sign up in the preview, create notes in folders, and reload from another browser — everything persists now. Your data lives in Supabase tables, scoped per user, and the app is a genuine full-stack product: front end from prompts, database from an integration, deployed on Vercel.
Signed in with notes persisting in Supabase.Watch at 10:10