How to Use Third-Party Components in Framer

When building a Framer project, we often need to use components from third-party sources, whether to enhance the visual appeal of the page or to speed up development. This need may arise when you discover ideal components while browsing other projects, or when you have multiple Framer accounts and want to share components across them.

This article will provide a detailed guide on how to copy components from third-party projects in Framer and apply them to your own new projects—even if those components are not under your current account. I will explain three feasible methods, each of which can help you successfully import and reuse components. You can choose the most convenient approach based on your personal preferences or project requirements.

1. Get Component URL from Remix Project and Paste into Current Framer Project

Copying a component’s link from a Remix Project and importing it into your current Framer project is one of the most straightforward methods. Simply follow the project structure to locate the page containing the desired component. Within the page, you can find the component either by navigating the “Layers” panel on the left workspace or by searching for it directly in the Assets panel’s component list.

Once you have selected the target component, right-click and choose Copy > Copy Link to copy its unique reference URL.

Next, switch to the Framer project you are working on and paste the link directly onto the canvas or into the component tree. This will import the component, and the system will automatically recognize and load its content and styles as a usable referenced module.

This approach is simple to execute and requires no additional plugins, making it ideal for quickly reusing excellent components from others’ projects in your own designs. It is especially suitable for modular components with clear structures and minimal dependencies.

2. Copy Third-Party Component Code and Add It to the Current Framer Project

Directly copying the source code of a third-party component and importing it into your current Framer project is another flexible and highly customizable approach. This method is especially suitable for users with some coding experience who want to customize and modify the component. The entire process can be completed in just two steps.

As shown in the image above, first navigate to the code editing interface of the target component within the Remix Project. By clicking on the component and selecting "Edit Code," you can enter the code view. Then, select all the component’s code and copy it.

Next, switch back to your Framer project, and in the left Assets panel, click on “Code” > “New Code File” to create a new code file. Paste the copied code into this file and save it. The system will automatically recognize it as a callable custom component. You can then drag it onto the canvas like any other Framer component or call it within other code modules.

This method not only gives you full control over the component’s logic and styling but also makes it easier to deeply customize the original component. It is a common approach for advanced users to reuse project modules.

3. Use Remix Link to Copy Another's Project to Our Framer Account and Then Copy Components

This is a commonly used and reliable method that involves using a Remix Link to fully copy a third-party Framer project into your own Framer account, and then extracting the required components from the copied project.

The specific steps are as follows: first, obtain the Remix Link provided by the other party. When you click it, the system will prompt you to duplicate the project into your Framer workspace. Once the project is copied, it will appear in your account as an independent project ready for editing. Next, open the copied project and locate the component you need—this can be done by navigating the page structure or by searching for the component name directly in the Asset panel. After finding the target component, right-click and select copy, then switch to your current Framer project and paste it. This will fully import the component into your current project for use.

Conclusion

With the three methods introduced in this article—whether copying component links, importing component code, or using Remix Link to duplicate an entire project—you can easily integrate third-party Framer components into your own projects. This not only significantly improves development efficiency but also provides greater flexibility and creative space for your page design. By choosing the method that best fits your project needs and personal workflow, you can make your Framer experience more efficient and professional.

If you need more advanced technical support while using Framer, or if you prefer to entrust the design and development of your Framer projects to a professional team, please contact Jane Framer Studio for comprehensive Framer website design and development services.