---
title: "Reframe — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Steve Nzioka · Code. Reframe Turn Framer components into production-ready React code without rebuilding them by hand."
canonical: "https://framer.elliotli.dev/plugin/reframe"
---

[Home](/)/[Plugins](/plugins)/[Code](/plugins/category/code)/Reframe

# Reframe

Reframe (Framer to React code)

[View on Framer](https://framer.com/marketplace/plugins/reframe/?via=elliot-li)

![Reframe preview image 1](https://framer.elliotli.dev/og/plugin/reframe/ea7b2c9d9cad2302/1600x1200.jpg)

## Summary

Reframe Turn Framer components into production-ready React code without rebuilding them by hand.

## Description

## Reframe

Turn Framer components into production-ready React code without rebuilding them by hand.

Reframe lets you select a component in Framer, publish it, then pull it directly into your React project with the Reframe CLI.

### What Reframe does

-   Exports Framer components into reusable React code
    
-   Preserves styling, assets, fonts, responsive behavior, and component structure
    
-   Gives every published component a simple CLI install command
    
-   Supports updating and re-exporting components as your Framer design changes
    
-   Keeps your exported components private to your Reframe account
    
-   Works with both JavaScript and TypeScript projects
    

### How it works

1.  Open Reframe inside Framer
    
2.  Sign in to your Reframe account
    
3.  Select the component you want to export
    
4.  Publish it
    
5.  Copy the generated CLI command
    
6.  Run it inside your React project
    

Example:

`pnpx @reframejs/cli add <component-id>`

Reframe handles the rest.

### Built for developers using Framer

Reframe is designed for people who like designing visually in Framer but still want full control over the final application code.

Instead of recreating your Framer components manually in React, Reframe helps bridge the gap between design and development so you can move faster while keeping your own codebase.

### Plans

**Starter**

-   10 exports per billing cycle
    
-   1 linked Framer project
    

**Pro**

-   Unlimited exports
    
-   Unlimited Framer projects
    

**Lifetime Pro**

-   Unlimited exports
    
-   Unlimited projects
    
-   One-time purchase
    

Previously exported components remain available through the CLI even if your subscription later expires.

### Requirements

-   A Reframe account
    
-   A supported React project
    
-   The Reframe CLI
    

Learn more, manage your account, and view your exports from the [Reframe web app.](https://reframe.elxr.studio/docs)

## Rank history [How rankings work →](/terms#rankings)

-   All · #146

## Details

- **Author**: Steve Nzioka
- **Published**: 2026-09-12
- **Updated**: 2026-09-13
- **Added**: 2026-09-12
- **Categories**: Code

## More like this

-   [Upstream](/plugin/upstream) — Syauqizaidan Khairan Khalaf · Free — Pull code files from GitHub
-   [Framer to Code](/plugin/framer-to-code) — valorsic studio · Free — Framer to Code is an officially approved Framer plugin that exports your published Framer site into a structured code project.
-   [Framer to Next.js](/plugin/framer-to-next-js) — David Jones · Free — Next Js
-   [FrameBoiler - Plugin Starter Kit](/plugin/frameboiler-plugin-starter-kit) — Elias ALVES · Free — Ship your own Framer plugin faster