> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Deploy to Vercel
sidebarTitle: Deploy to Vercel
description: Export your Framer site as React and deploy to Vercel with Next.js or Vite.
icon: lucide:triangle
---

# 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.

## Prerequisites

* Framer components already exported (see [Quickstart](/quickstart))
* A [Vercel account](https://vercel.com)
* Node.js 18+ installed

## 1. Set up the project

```bash
npm 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:

```tsx
// 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

```bash
npm run dev
```

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

## 4. Deploy to Vercel

**Option A: Push to GitHub** (recommended)

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

Then import the repo on [vercel.com/new](https://vercel.com/new). Vercel auto-detects Vite and configures the build.

**Option B: Vercel CLI**

```bash
npm install -g vercel
vercel
```

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

## 5. Update workflow

When you update your Framer design:

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

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

    ```json
    {
        "scripts": {
            "prebuild": "npx unframer {projectId} --outDir ./src/framer",
            "build": "vite build"
        }
    }
    ```
  </Tip>
</Aside>