Deploy to Vercel

This guide shows how to take your exported Framer components and deploy them as a production website on Vercel. We will use Vite for simplicity, but the same approach works with Next.js.

Ask AI about this page

Prerequisites

Framer components already exported (see Quickstart)
A Vercel account
Node.js 18+ installed

1. Set up the project

1234npm create vite@latest my-site -- --template react-ts
cd my-site
npm install unframer react@19 react-dom@19
npx unframer {projectId} --outDir ./src/framer

2. Build your pages

Import styles.css and compose your components:

123456789101112131415// src/App.tsx
import './framer/styles.css'
import Header from './framer/header'
import Hero from './framer/hero'
import Footer from './framer/footer'

export default function App() {
    return (
        <div>
            <Header />
            <Hero.Responsive />
            <Footer />
        </div>
    )
}

Remove <StrictMode> from main.tsx to avoid Framer animation issues.

3. Test locally

1npm run dev

Verify everything renders correctly at http://localhost:5173.

4. Deploy to Vercel

Option A: Push to GitHub (recommended)

12git init && git add . && git commit -m 'initial commit'
gh repo create my-site --public --push --source .

Then import the repo on vercel.com/new. Vercel auto-detects Vite and configures the build.

Option B: Vercel CLI

12npm install -g vercel
vercel

Follow the prompts. Vercel deploys and gives you a production URL.

5. Update workflow

When you update your Framer design:

Publish in Framer
Run npx unframer {projectId} --outDir ./src/framer
Commit and push. Vercel rebuilds automatically

You can automate step 2 with a CI script that runs npx unframer before each build. Add it to your package.json:

123456{
    "scripts": {
        "prebuild": "npx unframer {projectId} --outDir ./src/framer",
        "build": "vite build"
    }
}