v0.dev: Gere Componentes React com Texto e Deploy em Segundos

O v0.dev é a ferramenta de geração de UI da Vercel. Com ele, você descreve um componente em texto e recebe código React + Tailwind + shadcn/ui pronto para usar — sem configuração, sem templates.

O que é o v0?

O v0 é especializado em uma coisa: gerar componentes de interface de usuário de alta qualidade. Ele não é uma IDE completa nem um gerador de apps — ele é o melhor do mercado em converter descrições em UI.

Quando usar o v0:

• Você precisa de um componente específico rapidamente
• Quer explorar variações de design sem escrever código
• Tem um design em mente mas não quer implementar do zero
• Precisa de componentes shadcn/ui customizados

Como acessar

Acesse v0.dev — crie conta com GitHub. O plano gratuito tem 200 créditos/mês. O plano Pro ($20/mês) tem créditos ilimitados.

Criando seu primeiro componente

Prompt básico

Crie um card de produto com:
- Imagem no topo
- Nome do produto em negrito
- Preço com desconto (preço original riscado ao lado)
- Badge "Novo" no canto superior direito
- Botão "Adicionar ao carrinho" na parte inferior
- Hover effect suave no card inteiro

O v0 vai gerar o código React + Tailwind e mostrar um preview ao vivo.

Explorando variações

Após gerar, você pode pedir variações:

• Iterate: refina o mesmo componente
• Remix: cria uma variação com mudanças específicas

Mude para um layout horizontal com a imagem à esquerda
Adicione uma estrela de rating abaixo do nome
Torne mais compacto para uso em grid de 4 colunas

Usando o componente gerado

Método 1: Copy e paste

Clique em Code para ver o código completo, copie e cole no seu projeto.

Método 2: CLI (recomendado)

O v0 oferece um comando para instalar diretamente:

npx shadcn@latest add "v0.dev/chat/b/[id-do-componente]"

Isso instala as dependências necessárias automaticamente.

Método 3: Open in Cursor/IDE

Clique em Open in para abrir direto no seu editor.

Stack que o v0 usa

Todo código gerado usa:

• React (JSX/TSX)
• Tailwind CSS para estilização
• shadcn/ui para componentes base (Button, Card, Input, etc.)
• lucide-react para ícones

Isso garante compatibilidade com Next.js, Vite e qualquer projeto React moderno.

Dicas para melhores resultados

Descreva o contexto de uso:

Crie um formulário de login para um app SaaS B2B com:
- E-mail e senha
- Opção "Lembrar-me"
- Link "Esqueci a senha"
- Botão de login
- Separador e botão "Entrar com Google"
Design profissional, minimalista, fundo branco

Especifique o tamanho/escala:

Componente para sidebar de 240px de largura
Card para grid de 3 colunas em desktop, 1 coluna em mobile
Banner de largura total da página

O v0 é a ferramenta mais rápida para passar de ideia para componente React — aprenda a usá-lo e você nunca mais vai construir UI do zero.