v0 by Vercel

Name: Stack0
Author: Stack0

Generate beautiful React components with Stack0 integration using Vercel's AI.

How it works

v0 generates React/Next.js components using shadcn/ui. Include Stack0 context in your prompt to get components with email and file handling built-in.

Prompt Templates for v0

Copy these prompts to v0.dev and customize as needed:

📧 Contact Form

Create a modern contact form component with:
- Name, email, and message fields
- Form validation using react-hook-form
- Loading state while submitting
- Success/error toast notifications
- Clean, minimal design with shadcn/ui

The form should POST to /api/contact which uses Stack0 SDK to send emails:

```typescript
import { Stack0 } from '@stack0/sdk'
const stack0 = new Stack0({ apiKey: process.env.STACK0_API_KEY! })

await stack0.mail.send({
  from: 'contact@mysite.com',
  to: 'team@mysite.com',
  subject: 'Contact Form Submission',
  html: emailContent,
})
```

🖼️ Image Upload

Create an image upload component with:
- Drag and drop zone
- Click to browse files
- Image preview after selection
- Upload progress indicator
- Support for multiple images

Use Stack0 CDN for uploads:

```typescript
const { uploadUrl, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: file.name,
  mimeType: file.type,
})

await fetch(uploadUrl, { method: 'PUT', body: file })
```

👤 Avatar Editor

Create a user avatar component with:
- Circular avatar display
- Click to upload new image
- Image cropping modal
- Loading state during upload
- Fallback to initials when no image

Use Stack0 for image uploads and transforms:

```typescript
// Upload via Stack0 CDN
const { cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'avatar.png',
  mimeType: 'image/png',
})

// Transform URL for 200x200 avatar
const avatarUrl = `${cdnUrl}?w=200&h=200&fit=cover`
```

📬 Newsletter Signup

Create a newsletter signup component with:
- Email input with validation
- Subscribe button with loading state
- Success animation on signup
- Error handling with retry
- Minimal inline design

Use Stack0 to send a welcome email:

```typescript
await stack0.mail.send({
  from: 'newsletter@mysite.com',
  to: subscriberEmail,
  subject: 'Welcome to our newsletter!',
  html: welcomeEmailTemplate,
})
```

After Generating: Add the Backend

v0 generates frontend components. Add this API route to handle Stack0 operations:

app/api/contact/route.ts

import { Stack0 } from '@stack0/sdk'
import { NextResponse } from 'next/server'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
// POST /api/contact - Send contact form email
export async function POST(request: Request) {
  const { name, email, message } = await request.json()
 
  await stack0.mail.send({
    from: 'contact@yourdomain.com',
    to: 'team@yourdomain.com',
    replyTo: email,
    subject: `Contact: ${name}`,
    html: `
      <h2>New message from ${name}</h2>
      <p><strong>Email:</strong> ${email}</p>
      <p><strong>Message:</strong></p>
      <p>${message}</p>
    `,
  })
 
  return NextResponse.json({ success: true })
}

app/api/upload/route.ts

import { Stack0 } from '@stack0/sdk'
import { NextResponse } from 'next/server'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
// POST /api/upload - Get presigned upload URL
export async function POST(request: Request) {
  const { filename, mimeType, size } = await request.json()
 
  const result = await stack0.cdn.getUploadUrl({
    filename,
    mimeType,
    size,
  })
 
  return NextResponse.json(result)
}

Pro Tips for v0

📋

Include SDK Examples

Paste Stack0 code snippets in your prompt for accurate API usage.

🎨

Request shadcn/ui

Ask for specific shadcn components like Dialog, Toast, or Form.

🔄

Iterate on Output

Use v0's edit feature to refine components after generation.

📱

Specify Responsive

Mention mobile-first or responsive design in your prompt.

Related Resources

v0.dev ↗Stack0 Elements Email SDK