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

---
title: Vite Integration
sidebarTitle: Vite
description: Set up a Vite + React project with exported Framer components.
icon: lucide:zap
---

# Vite integration

The simplest way to use exported Framer components. Vite gives you fast development, instant HMR, and an optimized production build.

## Setup

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

## Disable Strict Mode

Open `src/main.tsx` and remove the `<StrictMode>` wrapper:

```tsx
// src/main.tsx
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)
```

## Import styles and 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 Footer from './framer/footer'

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

Run `npm run dev` and open `http://localhost:5173`.

## Adding routing

For multi-page sites, add **react-router**:

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

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

function App() {
    return (
        <BrowserRouter>
            <UnframerProviderWrapper>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </UnframerProviderWrapper>
        </BrowserRouter>
    )
}

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

createRoot(document.getElementById('root')!).render(<App />)
```

<Aside>
  <Tip>
    `UnframerProvider` must be **inside** `BrowserRouter` because it uses `useNavigate()`. Wrap it in a separate component as shown above.
  </Tip>
</Aside>

## Production build

```bash
npm run build
```

The `dist/` folder contains a static site you can deploy to **Vercel**, **Cloudflare Pages**, **Netlify**, or any static hosting.

## Dark mode

Toggle dark mode by adding the `dark` class to a parent element. A simple implementation:

```tsx
import { useState } from 'react'

export default function App() {
    const [dark, setDark] = useState(false)

    return (
        <div className={dark ? 'dark' : ''}>
            <button onClick={() => { setDark(!dark) }}>
                Toggle dark mode
            </button>
            <Hero.Responsive />
        </div>
    )
}
```

All `--unframer-*` CSS variables automatically switch to their dark values when the `dark` class is present.