React Export
Export your UI designs from Framer directly as React components. Maintain type safety and responsive attributes, making it easy to integrate complex UIs into code.
React Export is a plugin that allows you to directly export visually designed UI from Framer to production-ready React code. Using the unframer CLI, you can convert selected components in Framer into typed React components, making them easily usable in any React framework like Next.js or Remix.
Main Features
Complete Type Safety: Exported components come with
.d.tstype definition files, enabling code auto-completion and preventing build errors.Auto-Generated Props Interface: Variables and design tokens set in Framer automatically map to React props, simplifying code writing.
Responsive Breakpoint Support: Responsive properties set in Framer are directly applied to React components, ensuring functionality across various resolutions.
Universal Framework Compatibility: Easily usable in various React-based projects like Next.js, Remix, and more without restrictions.
Usage Instructions
Design the desired UI, such as headers, hero sections, or buttons, in Framer.
Select the components you wish to convert to React code.
Use the
unframerCLI to export selected components as React code, including TypeScript definition files.Import the converted components into your project and customize them using props for onClick events, text changes, link settings, and more.
How It Works
This plugin exports Framer components to JavaScript files, supporting the following features:
Server-Side Rendering (SSR)
Framer Variables
Fetch and Form Functionality
Design Settings like Color Styles and Dark Mode
When downloading Framer components using the unframer CLI, the exported JavaScript code includes TypeScript definition files. These files are automatically generated and cannot be manually edited; instead, use variables set in Framer for customization.
Important Notes
React development knowledge is required for use, and a paid plan subscription is necessary.
Individual Plan: $50/month
Business Plan: $250/month
Discounts available for open source/non-profit organizations (inquiry needed)
A 7-day free trial is available.
Explore More Plugins