How to Migrate v0 UI Components into a Bolt.new Fullstack App: Step-by-Step Architecture Guide

Bottom-Line Verdict: Pairing v0 with Bolt.new

When building modern web applications with coding AI tools, developers frequently face a dilemma: [v0 by Vercel](/tools/v0-by-vercel) produces the cleanest, most accessible UI components on the market, but it struggles with persistent fullstack logic, real database connections, and multi-file runtime orchestration. Conversely, [Bolt.new](/tools/bolt-new) excels at spinning up full-stack Node.js environments inside in-browser WebContainers, but its native generative design output can look generic or inconsistent compared to dedicated UI generators.

The industry-standard solution is to design in v0, then execute in Bolt.new. This guide shows you exactly how to migrate v0 UI components into a Bolt.new fullstack workspace without breaking Tailwind tokens, Radix UI primitives, or WebContainer process lifecycles.

Why Migrate Between v0 and Bolt.new?

Understanding the runtime architectures of both platforms prevents standard migration pitfalls:

1. Component-First vs. Environment-First:

v0 writes specialized, highly modular React code backed by shadcn/ui and Tailwind CSS. It assumes an existing Next.js App Router context. Bolt.new boots an entire virtual operating system in your browser using StackBlitz WebAssembly WebContainers, capable of running Vite, Hono, Express, SQLite, and client-side bundlers simultaneously.

1. State Management Boundaries:

v0 mocks data via local useState hooks. Bolt.new demands real asynchronous orchestration—such as connecting client actions to Express REST endpoints or Supabase auth sessions.

1. Build Target Discrepancies:

v0 defaults to @/components/ui path aliases, Next.js image components (next/image), and Next routing primitives (next/link). Most default Bolt.new starter templates leverage Vite + React Router, meaning direct copy-pasting immediately triggers Module not found exceptions.

Step-by-Step Migration Workflow

Step 1: Export Clean Code from v0

Do not use the automated CLI installer (npx v0 add ...) inside Bolt.new unless your Bolt project is explicitly configured as a Next.js template. Instead, extract the raw TSX/JSX from the v0 UI:

1. Open your component in v0 by Vercel.
2. Toggle from the Preview tab to the Code tab.
3. Identify external dependencies listed at the top of the file (e.g., lucide-react, framer-motion, @radix-ui/react-dialog, clsx, tailwind-merge).
4. Copy the raw component code or download the individual .tsx file.

// Typical v0 output snippet: AlertModal.tsx
import React from "react";
import { AlertCircle, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export interface AlertModalProps {
  title: string;
  description: string;
  onConfirm: () => void;
}

export function AlertModal({ title, description, onConfirm }: AlertModalProps) {
  return (
    <Card className="max-w-md mx-auto shadow-lg border-border">
      <CardHeader className="flex flex-row items-center gap-2">
        <AlertCircle className="w-5 h-5 text-destructive" />
        <CardTitle className="text-lg">{title}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-muted-foreground">{description}</p>
        <Button onClick={onConfirm} className="w-full">
          Acknowledge
        </Button>
      </CardContent>
    </Card>
  );
}

Step 2: Configure Bolt.new Prerequisites

Open Bolt.new and start a new project (e.g., React Vite + Tailwind template). Before pasting your v0 component, instruct Bolt's Claude-powered assistant to install the required utility layer.

Prompt Bolt.new with the following instruction:

Install clsx, tailwind-merge, and lucide-react. Create a utility file at src/lib/utils.ts that exports a cn() helper function for Tailwind class merging.

Verify that src/lib/utils.ts matches the standard shadcn helper:

// src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Step 3: Resolve Path Aliases in tsconfig.json and vite.config.ts

v0 uses @/ path aliasing by default. If your Bolt.new template uses Vite, it may fail to resolve @/components/ui. Resolve this by ensuring your configuration maps @ to the src directory.

In vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

In tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Step 4: Adapt CSS Variables and Tailwind Configuration

v0 components rely on HSL CSS variables for theme switching (e.g., bg-background, text-foreground, border-border). If you paste a v0 component into a blank Bolt.new app without these variables, elements will render with transparent backgrounds or invisible text.

Add these root definitions to src/index.css inside Bolt.new:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --muted-foreground: 215 20.2% 65.1%;
    --border: 217.2 32.6% 17.5%;
  }
}

Update tailwind.config.js to reference the HSL tokens:

/** @type {import('tailwindcss').Config} */
module.exports = { 
  darkMode: ["class"],
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
      },
    },
  },
  plugins: [],
};

Step 5: Replace Next.js Specifics with Vite / Universal Primitives

When v0 exports code designed for Next.js, it frequently injects next/image and next/link. Inside Bolt.new's standard Vite environment, modify these imports:

Step 6: Connect v0 UI to Bolt.new Fullstack Backend

In v0, components rely on local mock state:

// v0 Mock State Pattern
const [data, setData] = useState([{ id: 1, name: "Sample Record" }]);

In Bolt.new, connect this UI directly to an actual API route running in the WebContainer. Bolt.new can run an Express or Hono server on a local port:

// Bolt.new Integrated Fullstack Pattern
import { useEffect, useState } from "react";

export function RealtimeDataView() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/records")
      .then((res) => res.json())
      .then((payload) => {
        setData(payload);
        setLoading(false);
      })
      .catch((err) => console.error("API fetch failure:", err));
  }, []);

  if (loading) return <div className="p-4 text-muted-foreground">Loading records...</div>;

  return (
    <div className="grid gap-2">
      {data.map((item: any) => (
        <div key={item.id} className="p-3 border rounded bg-card text-card-foreground">
          {item.name}
        </div>
      ))}
    </div>
  );
}

Bolt.new will simultaneously run the backend endpoint inside server/index.js and serve the frontend via Vite, allowing your migrated v0 component to interact with live backend services.

Troubleshooting Common Migration Errors

Error 1: ReferenceError: process is not defined

• Cause: v0 code containing process.env.NEXT_PUBLIC_* evaluated in a client-side Vite runtime.
• Fix: Replace references with import.meta.env.VITE_* inside Bolt.new.

Error 2: Missing Radix Primitive Packages

• Cause: v0 imports components like @radix-ui/react-slot or @radix-ui/react-dropdown-menu without explicit npm installation warnings.
• Fix: Prompt Bolt.new: npm install @radix-ui/react-slot @radix-ui/react-dropdown-menu to update the WebContainer package.json.

Error 3: Icons Fail to Render or Crash the Bundle

• Cause: v0 imports icons directly from lucide-react. If an icon name changes or is deprecated in newer releases, Vite will fail to build.
• Fix: Check icon exports directly against Lucide's current index or instruct Bolt.new's Claude agent to verify icon exports.