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

Next.js integration

This guide covers how to use Unframer's exported Framer components in a Next.js App Router project with server-side rendering, client navigation, and proper font loading.

Setup

npx create-next-app@latest my-site --typescript --app
cd my-site
npm install unframer react@19 react-dom@19
npx unframer {projectId} --outDir ./src/framer

Import styles globally

Add the Framer styles import to your root layout:
// src/app/layout.tsx
import '../framer/styles.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    )
}

Use components in pages

Framer components are client components (they use browser APIs for animations). Mark your pages with 'use client' or wrap the Framer imports in a client component:
// src/app/page.tsx
'use client'

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>
    )
}
Framer components support SSR out of the box. They render on the server and hydrate on the client, giving you good Lighthouse scores. The 'use client' directive is needed because they use React hooks internally.

Client-side navigation

Set up UnframerProvider in your layout so Framer's internal links use Next.js routing:
// src/app/providers.tsx
'use client'

import { useRouter } from 'next/navigation'
import { UnframerProvider } from 'unframer'

export function Providers({ children }: { children: React.ReactNode }) {
    const router = useRouter()

    return (
        <UnframerProvider navigate={router.push}>
            {children}
        </UnframerProvider>
    )
}
// src/app/layout.tsx
import '../framer/styles.css'
import { Providers } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <Providers>{children}</Providers>
            </body>
        </html>
    )
}

Dark mode

Toggle dark mode by adding the dark class to the <html> element. If you use next-themes:
// src/app/layout.tsx
import { ThemeProvider } from 'next-themes'

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" suppressHydrationWarning>
            <body>
                <ThemeProvider attribute="class">
                    <Providers>{children}</Providers>
                </ThemeProvider>
            </body>
        </html>
    )
}
The dark class activates all --unframer-* CSS variable dark values automatically.

Disable Strict Mode

Next.js enables React Strict Mode by default. Disable it in next.config.ts:
// next.config.ts
const nextConfig = {
    reactStrictMode: false,
}
export default nextConfig

Multiple pages

Create additional routes by adding page files:
src/app/
├── page.tsx          # Home (/)
├── about/
│   └── page.tsx      # About (/about)
├── pricing/
│   └── page.tsx      # Pricing (/pricing)
├── providers.tsx
└── layout.tsx
Each page imports the Framer components it needs. Shared components like Header and Footer go in the layout.

Example project

See the Next.js example app for a complete working project. A live demo is deployed at unframer-nextjs-app.vercel.app.
Powered byHolocron