Guía de inicio con v0 por Vercel

v0 es una herramienta de Vercel que genera componentes React listos para producción a partir de descripciones en lenguaje natural. Escribes algo como "un formulario de login con validación y diseño oscuro" y v0 te devuelve el código completo con Tailwind CSS, shadcn/ui y TypeScript, listo para copiar o exportar. El valor práctico es inmediato: prototipas interfaces en segundos en lugar de horas, y el código generado sigue los estándares de un equipo real de frontend.

Tip Pro: v0 no reemplaza a un desarrollador frontend, pero elimina el trabajo mecánico de escribir CSS y componentes repetitivos. Úsalo como acelerador, no como muleta.

Contexto

v0 nació en 2024 como un experimento de Vercel para explorar si un modelo de lenguaje podía generar interfaces de usuario usables. Rápidamente se convirtió en un producto independiente que hoy forma parte del ecosistema Vercel junto con Next.js, Turbopack y el resto de herramientas de la plataforma.

El modelo detrás de v0 está entrenado específicamente para generar código con el stack de Vercel: React, Next.js, Tailwind CSS, shadcn/ui y TypeScript. No es un ChatGPT genérico que "a veces" genera código; está afinado para producir componentes funcionales desde el primer intento.

Las capacidades actuales incluyen:

• Generación de componentes desde texto
• Chat interactivo para refinar el diseño
• Subida de imágenes como referencia visual (image-to-code)
• Exportación directa a proyectos de Next.js
• Edición y versionado en el navegador
• Integración con el CLI de Vercel

Nota: v0 está en evolución constante. Vercel añade nuevas capacidades cada pocas semanas. Esta guía refleja el estado a junio de 2026.

Configuración / setup

No necesitas instalar nada para empezar. v0 funciona completamente en el navegador. Sin embargo, para sacarle el máximo partido en tu flujo de trabajo real, hay algunas configuraciones opcionales que vale la pena hacer.

Paso 1: Crear una cuenta en v0

1. Ve a v0.dev
2. Haz clic en "Sign up" (arriba a la derecha)
3. Puedes registrarte con GitHub, Google o email
4. Una vez dentro, verás el dashboard con un chat vacío

Tip Pro: Usa tu cuenta de GitHub —v0 se integra naturalmente con repositorios de Vercel y Next.js, y tener la cuenta vinculada facilita la exportación de código más adelante.

Paso 2: Familiarizarte con la interfaz

El workspace de v0 tiene tres zonas principales:

Paso 3: Escribir tu primer prompt (opcional, sin configuración adicional)

v0 funciona inmediatamente. Si solo quieres probar, escribe esto en el chat:

Create a responsive card component with an image on the left, content on the right, and a "Learn more" button.

En segundos tendrás el componente funcionando en la vista previa.

Advertencia: Los prompts en inglés tienden a dar mejores resultados porque el modelo fue entrenado principalmente con datos en inglés. Si usas español, sé más específico con los detalles visuales para compensar.

Paso 4 (opcional): Llevar un componente a tu proyecto

v0 no envía el código a tu máquina automáticamente: tú bajas cada componente cuando está listo. Hay dos formas oficiales:

1. Copiar desde el panel de Código. Abre la pestaña Código, copia el componente y pégalo en tu proyecto. Como v0 usa shadcn/ui, instala los primitivos de UI que falten con el CLI de shadcn, por ejemplo:

   npx shadcn@latest add button card input

2. Add to Codebase (registro de shadcn). Cada componente generado tiene la opción Add to Codebase, que te da un comando shadcn listo para ejecutar apuntando a la URL del registro del componente:

   npx shadcn@latest add "https://v0.app/..."

   Esto coloca el componente en tu proyecto (normalmente bajo components/) junto con sus dependencias.

Tip Pro: Genera e itera en el navegador hasta que el componente quede bien, y luego usa Add to Codebase para integrarlo sin copiar y pegar manualmente. Consulta la doc oficial para el flujo vigente, ya que v0 evoluciona con frecuencia.

Ejemplos

Ejemplo 1: Un dashboard básico

Prompt:

Crea un dashboard con una sidebar colapsable, un header con avatar y notificaciones, y un grid de 4 tarjetas con métricas (usuarios activos, ingresos, conversión, sesión promedio). Usa colores azul oscuro para la sidebar y blanco para el contenido.

Qué esperar: v0 genera un layout funcional con:

• Sidebar con iconos de navegación y toggle para colapsar
• Header con indicador de notificaciones y avatar de usuario
• 4 tarjetas con iconos, valores numéricos y variación porcentual
• Todo responsive con Tailwind

Código generado: ~150-200 líneas de TypeScript + TSX
Dependencias: lucide-react, next/link, next/image

Ejemplo 2: Formulario multi-step

Prompt:

Build a multi-step form with 3 steps: personal info, address, and payment. Show a progress bar at the top. Validate each step before proceeding. Use shadcn/ui components.

Qué esperar: Un formulario wizard completo con:

• Barra de progreso que avanza por cada paso
• Validación en cada campo (email, campos requeridos, formato de tarjeta)
• Botones "Anterior" y "Siguiente" con estados deshabilitados
• Resumen al final antes de enviar

Nota: v0 usa shadcn/ui por defecto, así que los componentes como Input, Button y Card ya vienen estilizados con la paleta de tu proyecto. No necesitas instalar nada extra.

Ejemplo 3: De imagen a código

Sube una captura de pantalla de un diseño existente (de Dribbble, Figma o tu app favorita) y escribe:

Replicate this design exactly. Use the same spacing, colors, and typography.

v0 analizará la imagen y generará el código más parecido posible. No será idéntico, pero te dará una base sólida para ajustar.

Advertencia: La función image-to-code es impresionante pero tiene límites. No esperes una réplica exacta de diseños muy complejos o con tipografía personalizada. Úsala como punto de partida, no como resultado final.

Particularidades

Ventajas

• Velocidad: pasas de idea a componente funcional en segundos. Para prototipado es imbatible.
• Calidad del código: el código generado sigue convenciones reales de un proyecto Next.js + Tailwind + shadcn/ui. No es código "de IA" genérico.
• Iteración visual: puedes refinar el diseño conversando —"más espaciado", "cambia el azul a verde", "haz la sidebar más angosta"— sin tocar CSS manualmente.
• Exportación flexible: copia manual, CLI, o integración directa con proyectos de Vercel.

Limitaciones

• Stack fijo: v0 solo genera código para React + Next.js + Tailwind + shadcn/ui. No esperes que genere Vue, Svelte, Angular, o CSS sin Tailwind.
• Complejidad acotada: para dashboards y formularios es excelente. Para interacciones muy complejas con estado global, animaciones avanzadas o lógica de negocio específica, terminarás escribiendo código manual.
• Dependencia del prompt: la calidad del resultado depende directamente de la calidad de tu descripción. Prompts vagos dan componentes genéricos.
• Sin despliegue automático: aunque Vercel es dueño de v0, el componente generado no se despliega automáticamente. Tienes que exportarlo e integrarlo en tu proyecto.

Tip Pro: El mejor flujo con v0 es: genera el componente base, expórtalo a tu proyecto, y luego personaliza los detalles finos a mano. No intentes que v0 genere el 100% del componente final —trátalo como un "borrador ejecutable" que tú terminas de pulir.

Precios

v0 tiene un plan gratuito limitado (cierta cantidad de generaciones por mes) y planes de pago para uso intensivo. Consulta v0.dev/pricing para los precios actualizados, ya que cambian con frecuencia.