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

Export Framer to React

Install PluginGitHub

Unframer — Export Framer to React

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
Workbase
Gesserit
Rivet
Unchatgpt

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.

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

# 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
// 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 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 exposes your project as a set of tools that AI can call through the Model Context Protocol.
Set up Framer MCP →
Powered byHolocron