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

---
title: Export a Full Framer Website to React
sidebarTitle: Export Full Website
description: Step-by-step tutorial to export an entire multi-page Framer site as a React app and deploy it.
icon: lucide:globe
---

# Export a full Framer website to React

This tutorial walks you through exporting an **entire Framer website** (multiple pages, navigation, footer) as a standalone React app that you can deploy anywhere. By the end, you will have a working Vite + React app with all your Framer components.

<Aside>
  <Note>
    This guide assumes you have a Framer project with components on multiple pages. If you are just getting started, read the [Quickstart](/quickstart) first.
  </Note>
</Aside>

## Overview

```diagram
┌──────────────────────────────────────────────────────────────────────────────┐
│                            Your Framer Project                               │
│                                                                              │
│  ┌───────────┐   ┌───────────┐   ┌───────────┐   ┌─────────────────────┐     │
│  │  Header   │   │   Hero    │   │  Footer   │   │ About / Pricing /   │     │
│  │ Component │   │ Component │   │ Component │   │ other page sections │     │
│  └───────────┘   └───────────┘   └───────────┘   └─────────────────────┘     │
└──────────────────────────────────────┬───────────────────────────────────────┘
                                       │
                                React Export Plugin
                                       │
                                       ▼
┌──────────────────────────────────────────────────────────────────────────────┐
│                          npx unframer {projectId}                            │
│                                                                              │
│  src/framer/                                                                 │
│  ├── header.jsx              (React component with JSDoc types)              │
│  ├── hero.jsx                                                                │
│  ├── footer.jsx                                                              │
│  ├── about-section.jsx                                                       │
│  ├── chunks/*.js             (shared bundled chunks)                         │
│  └── styles.css              (fonts, color variables, base styles)           │
└──────────────────────────────────────┬───────────────────────────────────────┘
                                       │
                                Your React app
                                       │
                                       ▼
┌──────────────────────────────────────────────────────────────────────────────┐
│                      Deployed on Vercel / Cloudflare / Netlify               │
└──────────────────────────────────────────────────────────────────────────────┘
```

## 1. Prepare your Framer project

For a clean export, make sure every section of your website is a **component** in Framer. This is likely already the case if you built your site with reusable pieces, but double-check:

* **Header/Navigation** — should be a component
* **Hero section** — should be a component
* **Content sections** (features, testimonials, pricing) — each should be a component
* **Footer** — should be a component

To turn a layer into a component: select it, right-click, and choose **Create Component**.

<Aside>
  <Tip>
    The more granular your components are, the more control you have over layout in your React app. A single giant "Page" component works, but separate Header, Hero, Features, Footer components give you flexibility to rearrange and customize.
  </Tip>
</Aside>

## 2. Export all components

1. Open the **React Export plugin** in Framer (Cmd+K → "React Export")
2. Click **Select All** to include every component
3. Click **Export**

The plugin sends all component metadata to the Unframer database.

## 3. Create your React project

Start with a fresh Vite + React project:

```bash
npm create vite@latest my-website -- --template react-ts
cd my-website
npm install unframer react@19 react-dom@19
```

## 4. Download your components

```bash
npx unframer {projectId} --outDir ./src/framer
```

Replace `{projectId}` with the short ID shown in the React Export plugin. This creates a `src/framer/` directory with all your components.

Your project should now look like this:

```
my-website/
├── src/
│   ├── framer/
│   │   ├── header.jsx
│   │   ├── hero.jsx
│   │   ├── features.jsx
│   │   ├── pricing.jsx
│   │   ├── footer.jsx
│   │   └── styles.css
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts
```

## 5. Build the home page

Import `styles.css` once at the top of your app, then compose your page from the exported components:

```tsx
// src/App.tsx
import './framer/styles.css'
import Header from './framer/header'
import Hero from './framer/hero'
import Features from './framer/features'
import Pricing from './framer/pricing'
import Footer from './framer/footer'

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

Use `.Responsive` for any component that has **breakpoint variants** (desktop/tablet/mobile). Components without variants can be used directly.

<Aside>
  <Warning>
    **Disable React Strict Mode** in `main.tsx`. Remove the `<StrictMode>` wrapper or Framer animations may break.
  </Warning>
</Aside>

## 6. Add routing for multiple pages

If your Framer site has multiple pages (About, Pricing, Contact), set up **react-router**:

```bash
npm install react-router react-router-dom
```

```tsx
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './framer/styles.css'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'

createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
        </Routes>
    </BrowserRouter>
)
```

Each page file imports the relevant Framer components:

```tsx
// src/pages/Home.tsx
import Header from '../framer/header'
import Hero from '../framer/hero'
import Footer from '../framer/footer'

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

## 7. Enable client navigation

Framer components contain internal links. To make them use **client-side routing** instead of full page reloads, wrap your app with `UnframerProvider`:

```tsx
// src/main.tsx
import { useNavigate } from 'react-router-dom'
import { UnframerProvider } from 'unframer'

function Providers({ children }: { children: React.ReactNode }) {
    const navigate = useNavigate()
    return (
        <UnframerProvider navigate={navigate}>
            {children}
        </UnframerProvider>
    )
}
```

## 8. Add dark mode (optional)

If your Framer project has dark mode color styles, toggle it by adding the `dark` class to a parent element:

```tsx
<div className={isDarkMode ? 'dark' : ''}>
    <Header />
    <Hero.Responsive />
    <Footer />
</div>
```

The exported `styles.css` already contains both light and dark values for all your `--unframer-*` CSS variables.

## 9. Deploy

Your site is now a standard React app. Deploy it anywhere:

**Vercel:**

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

**Cloudflare Pages:**

```bash
npm run build
npx wrangler pages deploy dist
```

**Netlify:**

```bash
npm run build
npx netlify deploy --dir=dist --prod
```

## 10. Keep it updated

When you make changes in Framer:

1. **Publish** your Framer site (click the Publish button)
2. Re-run the CLI: `npx unframer {projectId} --outDir ./src/framer`
3. Rebuild and redeploy your app

For continuous updates, use the `--watch` flag during development:

```bash
npx unframer {projectId} --outDir ./src/framer --watch
```

## What's next

* [Styling & dark mode](/styling) — customize sizes, colors, and responsive behavior
* [Troubleshooting](/troubleshooting) — fix common export issues
* [Connect Framer MCP](/mcp/connect) — let AI assistants modify your Framer project