Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

Vite integration

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

Setup

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:
// src/main.tsx
import { createRoot } from 'react-dom/client'
import App from './App'

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

Import styles and components

// 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:
npm install react-router react-router-dom
// 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 />)
UnframerProvider must be inside BrowserRouter because it uses useNavigate(). Wrap it in a separate component as shown above.

Production build

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:
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.
Powered byHolocron