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

---
title: Unframer — Export Framer to React
sidebarTitle: Overview
description: Export your Framer components as React code. Works with Next.js, Remix, Vite, Astro, and any React framework.
icon: lucide:home
rendering: static
---

import { HeroSection } from '../components/hero-section.tsx'
import Books from '../framer/books.jsx'

<Above>
  <HeroSection />
</Above>

Unframer lets you **design in Framer** and **ship in React**. Export your Framer components as `.jsx` files, import them into Next.js, Remix, Vite, Astro, or any React framework. You get server-side rendering, JSDoc type annotations, responsive breakpoints, dark mode, and working animations out of the box. No iframes, no embeds, just React components.

Already deployed in thousands of websites

<Marquee duration={25} slowOnHover gap={64}>
  <Image className="light:invert" src="/logos/workbase.svg" alt="Workbase" width="157" height="27" disableZoom placeholder="" />

  <Image className="light:invert" src="/logos/gesserit.svg" alt="Gesserit" width="113" height="40" disableZoom placeholder="" />

  <Image className="light:invert" src="/logos/rivet.png" alt="Rivet" width="92" disableZoom height="53" placeholder="data:image/webp;base64,UklGRswAAABXRUJQVlA4WAoAAAAQAAAADwAACAAAQUxQSI0AAAABgJtt27Hnfp73t22jNJIMkFJdNrDtLGAbrW22NstMkRWyQ0QkACb8F0RGK7OOiZiFYGLX8+t0dEGAQAA6gtE72qxurUl4awpXy4r+RoM/A+elB/1jjcd7Pb+lr+Wh97Xr2I319rX0Z7bBeF0QPMB40zqGtzB9veJYz7CW5Wo1ZHIgYoRGACAAREQgAgAAVlA4IBgAAAAwAQCdASoQAAkAAsBMJaQAA3AA/veMAAA=" />

  <Image className="light:invert" src="/logos/unchatgpt.svg" alt="Unchatgpt" width="138" height="32" disableZoom placeholder="" />
</Marquee>

## See it in action

The component below was designed entirely in Framer and rendered here as a native React component via Unframer. No iframe, no screenshot, just real interactive React running on this page.

<Books style={{ width: '100%' }} />

## Features

* **Any React framework** — works with Next.js, Remix, Vite, Astro, and more
* **Server-side rendering** — components render on the server for great SEO and performance
* **JSDoc types** — autocomplete and type checking from your Framer component variables
* **Responsive breakpoints** — use `.Responsive` to automatically switch variants by screen size
* **Dark mode** — add the `dark` class and all color styles switch automatically
* **Framer animations** — hover effects, transitions, and scroll animations work out of the box
* **Color styles as CSS variables** — use `--unframer-*` variables in your own code or Tailwind
* **Localization** — pass `locale` prop to render components in different languages
* **Client navigation** — `UnframerProvider` integrates with your router for instant page transitions

## Quick start

```bash
# 1. Install
npm install unframer react@19 react-dom@19

# 2. Open the React Export plugin in Framer and select your components

# 3. Download components
npx unframer {projectId} --outDir ./src/framer
```

```tsx
// 4. Import and use
import './framer/styles.css'
import Hero from './framer/hero'

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

Read the full [Quickstart guide](/quickstart) for a step-by-step walkthrough.

## Framer MCP

Let AI assistants like **Claude**, **Cursor**, and **Copilot** read and modify your Framer project directly. The [Framer MCP plugin](/mcp/overview) exposes your project as a set of tools that AI can call through the Model Context Protocol.

[Set up Framer MCP →](/mcp/connect)