Sharing Components

In this guide, we explain how to add components to your library and use them across all projects in your Workspace. You'll learn how to share, insert, update, and import components efficiently.

How to add components to your library

You can add components to your library to make them available across all your projects in a Workspace.

adding components to the library

  1. Go to the Assets panel.

  2. Click the three-dot icon next to the component name.

  3. Select “Add to Library” from the dropdown menu.

Shows the Assets panel and the dropdown with the option ‘Add to Library’.

Inserting components

In the Library, you can browse all shared components and search for specific ones by name. Use the ⌘ K (Ctrl + K on Windows) shortcut and choose “Browse Library” from the Quick Actions menu.

A badge will appear in the search bar displaying your Workspace name, indicating which library you're viewing. Use the arrow keys to navigate and press Enter to insert a component.

Shows the Quick Actions bar in Framer

Updating components

If you make changes to the source (primary) component, all projects using the component instance (without detaching) can pull the latest updates. No manual republishing is needed.

Click the “Update” button in the Assets panel to apply changes to individual components. You can also undo updates if needed.

Shows all the components that can be manually updated in the Assets panel.

Add component to you project by using Copy URL

  1. In the Assets panel, click the three dots next to a component.

  2. Select “Copy URL”.

  3. Paste the component into your project canvas.

The Assets panel and the dropdown that shows the option “Copy URL”.

If you double-click the component to edit it, a popup will prompt you to “Unlink Instance.” Unlinking adds it to your Assets library.

Shows the modal when unlinking an component.

Import component in a code component or react project

Framer components can be used in any React environment outside of Framer.

  1. Click the three dots next to the component and select “Copy Import.”

  2. Paste the import statement into your code.

The Assets panel and the dropdown that shows the option “Copy Import”.

For example, if you design a button in Framer and want it to appear only under specific conditions (e.g., based on URL parameters or user location), use the “Copy Import” option to include it in your React code. You can place it before your component's main function or override it to customize its behavior.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.