React Export

Framer to React Exporter

Warning: To use this plugin you need React development knowledge. This plugin also requires a $50 (personal plan) or $250 (business plan) monthly subscription, with a 7 days free trial. If you are an open source project or non-profit organization you can get a discount by sending a message to the email on the right.

Framer to React Exporter is a powerful plugin that bridges the gap between Framer’s intuitive design environment and your production-ready React codebase. By selecting components directly in the Framer interface and then running the `unframer` CLI, you’ll instantly have fully typed React components—ready to integrate into your Next.js, Remix, or any other modern React framework.

Key Features

• Full Type Safety:

Every exported component ships with `.d.ts` TypeScript definition files. This ensures strong type safety, helping you catch errors at build time and enjoy seamless code completion in your IDE.

• Auto-Completed Props & Variables:

Dynamically generated prop interfaces mean that variables and design tokens in Framer map neatly to typed React props. This gives you instant IntelliSense and smart autocompletion when customizing components.

• Responsive Breakpoints:

Components respect the responsive behavior you set up in Framer. These breakpoints translate directly into React components that respond elegantly to different viewport sizes.

• Reusable Across Frameworks:

The exported components aren’t locked to a single environment. Use them in Next.js, Remix, or any other React-based framework with minimal configuration.

How It Works

1. Design in Framer:

Start by crafting your UI in Framer’s visual editor—create headers, footers, banners, hero sections, and more.

2. Select Components to Export:

Pick which components you want to bring into your codebase. This can be an entire section of your site or just a small UI element.

3. Run the `unframer` CLI:

Using the CLI, download the components as React files, accompanied by their `.d.ts` files for strict type checking and smooth developer experience.

4. Integrate into Your Project:

Import the generated components into your React project. You can fine-tune their styling, integrate them into your SSR setup, or even attach event handlers—like `onClick` or custom callbacks—directly in your code.

Beyond Static Exports

This plugin isn’t just about static components. With full type safety, SSR support, and custom event bindings, it allows you to design highly dynamic, interactive interfaces in Framer, then seamlessly bring them into your production stack.

No more redrawing components from scratch — Framer to React Export lets you leverage Framer’s cutting-edge design tools and translate that work directly into maintainable, type-safe React code.

How does it work?

This plugin exports your Framer components as JavaScript files, with full support for SSR and Framer features like variables, fetch, forms, color styles, dark mode. It uses the unframer cli to download your Framer components into javascript files you can later import and render in your own codebase. These files are still machine generated so you won't be able to edit them manually, instead you should use Framer variables to customize them, for example you can attach onClick event handlers, customize the text of some layers or update a button link using React props.