The React Export plugin allows you to use Framer components in your React codebase. It exports your Framer components as React components that you can use in your project.

Yes! Get a 7-day free trial for just $1 upfront. This gives you full access to all features. After the trial, your subscription will continue at the standard rate unless you cancel.

The Personal plan is for single-user Framer access for personal projects, while the Commercial plan is for companies with multiple users in Framer projects. Both plans support unlimited Framer projects. The plugin is free for open source and non-commercial projects.

For open source and non-commercial projects, the plugin is free. Simply send an email to [email protected] to request access.

Billing is connected to the first user who installed the Framer plugin. This user becomes the billing account owner for the subscription.

You can cancel your subscription directly in the plugin using the "Manage Subscription" button, or by sending an email to [email protected].

The generated code is machine-generated, but you can customize components using variables (which become React props) or color variables (which can be updated using CSS variables).

Yes, the components support dark mode through the .dark class. When you add this class to a parent element, all Framer components within will automatically switch to their dark mode styles.

The Personal plan is limited to single-user Framer access. The plugin can only be used with Framer projects that have 1 member, and it's accessible by only one user.

The Business plan is designed for companies with multiple users in Framer projects. It allows for team collaboration while maintaining access to all plugin features.

The exported components automatically adapt to different screen sizes if you've set up responsive variants in Framer. The components will automatically switch variants based on the current breakpoint without any additional configuration.

You can style the components using className or style props. Note that you may need to use !important to override certain styles already defined in Framer, such as width and height.

Framer components often have fixed sizes from their root element. To override this, you can use the style prop with width and height properties, or use a CSS class with high specificity.

You can change the locale by passing a locale prop to the component. The locale must be one of the country codes configured in your Framer project. You can also use UnframerProvider to set the locale for all components at once.

Unframer exports your Framer color styles as CSS variables that you can use in your own code. For example, you can use --unframer-primary in your own CSS or in Tailwind with bg-[--unframer-primary].

You should re-run the unframer CLI when you add a new component, change color styles, add new pages, add new locales, or change breakpoints. For existing components, running unframer will update them with any changes.

Yes, you can use the --watch flag (npx unframer {projectId} --watch) to automatically re-export components when they change in Framer. Note that you need to click the Publish button in Framer to trigger updates.

Common issues include: React warnings about element.ref in React 19, hydration warnings with SVG icons, and issues with animations in React Strict Mode. Most issues can be resolved by using React 19 and disabling Strict Mode for development.

Unframer extracts TypeScript types from the component's propertyControls field. Supported props include variants, event functions, scalar variables (String, Number, Boolean), image variables, link strings, rich text, colors, and React components.

If export fails with errors like "No matching export in package for import", use the --external option to externalize npm packages used by Framer, then install them manually with npm install. This happens because Framer sometimes uses legacy versions of packages.