v0 by Vercel

What is v0?

v0 is an AI-powered generative UI tool built by Vercel. You describe the interface you want in plain English (or any language), and v0 generates production-ready React code using modern UI components — primarily built on shadcn/ui and Tailwind CSS.

Why v0 for a Hackathon?

• Speed: Go from idea to working UI in seconds, not hours. Perfect for a 24-hour hackathon.
• Quality: Generates clean, accessible, responsive components using industry-standard libraries.
• Iteration: Refine your UI through conversation — just ask v0 to adjust colors, layout, animations, or add new features.
• Full-stack: v0 can generate not just UI components, but also API routes, database schemas, and full Next.js pages.

---

Getting v0 Free as a Student

Vercel offers free v0 Premium access to verified students. Here is how to get it:

Step 1: Go to the Vercel Student Program

Visit v0.app/students to access the Vercel Student Program page.

Step 2: Sign Up or Log In to Vercel

If you do not have a Vercel account yet, create one. You can sign up with GitHub, GitLab, Bitbucket, or email.

Step 3: Verify Your Student Status

Vercel partners with student verification platforms. You will typically need to:

1. Use your university email (e.g., your @nyu.edu email address) to verify your enrollment.
2. Upload proof of enrollment if your email domain is not automatically recognized.
3. Wait for verification — this is usually instant for recognized university domains like NYU.

Step 4: Access v0 Premium

Once verified, go to v0.dev and log in with the same Vercel account. Your student benefits should be automatically applied, giving you access to Premium features including:

• Increased generation limits (more prompts per day)
• Access to the latest AI models
• Priority generation queue

Tip

NYU Shanghai students: Your @nyu.edu email should work for instant verification. Make sure you sign up with your NYU email, not a personal one.

---

How to Use v0 to Generate Components

Opening v0

Go to v0.dev and sign in. You will see a chat-like interface where you can describe what you want to build.

Writing Your First Prompt

Simply describe the UI component you want in the chat box. Be as specific or general as you like. Here are some example prompts relevant to an AR/VR hackathon:

Example prompts:

A dashboard for an AR application with a 3D model viewer on the left,
a properties panel on the right, and a toolbar at the top with buttons
for rotate, scale, and translate.

A landing page for a VR experience showcase with a hero section
featuring a full-screen video background, a navigation bar with
glassmorphism effect, and a grid of project cards with hover animations.

A real-time collaboration panel for a spatial computing app, showing
connected users with avatars, a shared whiteboard area, and a chat
sidebar with message timestamps.

Understanding v0 Output

After you submit a prompt, v0 will generate:

1. A live preview — an interactive preview of the component rendered in the browser.
2. The source code — React/TypeScript code using shadcn/ui components and Tailwind CSS.
3. Multiple variations — sometimes v0 offers alternative designs you can choose from.

Iterating on Your Design

The real power of v0 is conversational iteration. After the initial generation, you can follow up with refinement prompts:

Make the sidebar collapsible and add a dark mode toggle in the top right.

Change the color scheme to use blue and purple gradients.
Add a loading skeleton state for the project cards.

Make it responsive — on mobile, stack the panels vertically
and hide the sidebar behind a hamburger menu.

Each follow-up prompt builds on the previous result, so you can progressively refine your UI.

---

Integrating v0 Code Into Your Project

Method 1: Using the v0 CLI (Recommended)

v0 provides a CLI command to add generated components directly into your Next.js or React project.

Step 1: Create or navigate to your project:

# Create a new Next.js project if you don't have one
npx create-next-app@latest my-hackathon-app
cd my-hackathon-app

Step 2: Copy the CLI command from v0. In the v0 interface, click the “Add to Codebase” or code icon button, and you will see a command like:

npx shadcn@latest add "https://v0.dev/chat/b/abc123"

Step 3: Run the command in your project directory. This will:

• Automatically install any required dependencies (shadcn/ui components, icons, etc.)
• Place the component files in the appropriate directories
• Set up any necessary configuration

Method 2: Manual Copy-Paste

If you prefer more control or are not using Next.js:

Step 1: Click the “Code” tab in v0 to view the generated source code.

Step 2: Copy the code and create a new component file in your project:

# Example file structure
src/
  components/
    ui/          # shadcn/ui base components
    dashboard.tsx  # Your v0-generated component

Step 3: Install the required dependencies. v0 components typically need:

# Core dependencies
npm install tailwindcss @tailwindcss/postcss
npm install lucide-react        # Icons
npm install class-variance-authority  # Component variants
npm install clsx tailwind-merge      # Utility functions

# shadcn/ui setup (if not already configured)
npx shadcn@latest init

Step 4: Import and use the component in your page:

import { Dashboard } from "@/components/dashboard";

export default function Home() {
  return (
    <main>
      <Dashboard />
    </main>
  );
}

Method 3: Deploy Directly from v0

v0 also lets you deploy your generated app directly to Vercel with one click. This is great for quick prototypes during a hackathon.

1. Click the “Deploy” button in v0.
2. v0 will create a GitHub repository with your project and deploy it to Vercel.
3. You get a live URL instantly that you can share with teammates and judges.

---

Tips for Using v0 Effectively in a Hackathon

1. Start with the Big Picture

Do not begin by asking v0 to generate individual buttons or inputs. Start with a full page layout or dashboard, then drill into specific components.

Good first prompt:

Build a complete AR model marketplace app with a hero section,
featured models grid, search/filter sidebar, and a footer.
Use a modern dark theme with neon accent colors.

2. Be Specific About Your Tech Stack

Tell v0 exactly what frameworks and libraries you are using so the generated code integrates smoothly.

I'm using Next.js 15 with the App Router, Tailwind CSS,
and Three.js for 3D rendering. Build me a component that...

3. Use v0 for Rapid Prototyping, Then Customize

Generate the 80% with v0, then hand-tune the remaining 20%. This is the fastest workflow:

1. Generate the base UI with v0
2. Copy the code into your project
3. Customize styles, add business logic, connect to your APIs
4. Use v0 again when you need a new component

4. Leverage v0 for Complex UI Patterns

v0 excels at generating complex UI patterns that would take a long time to build by hand:

• Data tables with sorting, filtering, and pagination
• Multi-step forms with validation
• Dashboard layouts with charts and metrics cards
• Authentication flows (login, signup, password reset)
• Settings pages with tabs and form sections

5. Use Reference Images and URLs

You can paste URLs or upload screenshots to v0 and ask it to recreate or draw inspiration from existing designs:

Here's a screenshot of the UI I want. Recreate this layout
but use a space/galaxy theme with purple and blue gradients.

6. Generate Supporting Pages Quickly

Beyond your main feature, you will need supporting pages for a complete demo. Use v0 to quickly generate:

• Landing pages for your project
• About/team pages
• Documentation pages
• 404 and error pages

7. Combine v0 with Other Hackathon Tools

v0 works great alongside the other sponsored tools:

• GitHub Copilot: Let v0 handle the UI generation, then use Copilot for business logic and backend code.
• Claude Code: Use Claude Code for complex application architecture and debugging, while v0 handles the visual layer.
• Three.js / Tripo3D: Generate your 2D UI shell with v0, then embed Three.js 3D scenes or Tripo3D models within it.

8. Save Your Message Credits

Even with student Premium access, be mindful of your generation limits:

• Write detailed prompts the first time to reduce back-and-forth.
• Use a single conversation thread for related components so v0 understands the context.
• Copy and save generated code frequently — do not rely on v0 history alone.

---

Quick Reference

Resource	Link
v0 App	v0.dev
Vercel Student Program	vercel.com/students
shadcn/ui Docs	ui.shadcn.com
Tailwind CSS Docs	tailwindcss.com/docs
Next.js Docs	nextjs.org/docs
v0 Documentation	v0.dev/docs

---

Note

During Spatial Shanghai 2026: If you encounter any issues with v0 access or student verification, ask the hackathon organizers for help. We may have additional access codes or workarounds available.