Help center

FAQ

Sharing Components

Search

Sharing Components

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

To make components more accessible across all your projects, add them to your Workspace 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.

Inserting Components

In the Library, you can browse all shared components and search for specific ones by name. Use the ⌘ K shortcut and choose "Browse Library" from the Quick Actions menu.

A badge will appear within the Search bar that displays the name of your Workspace. This indicates which Workspace Library you are currently viewing. You can navigate using the up and down arrow keys, and insert any component by pressing Enter ⏎.

Updating Components

If you make any changes to the source (primary) component, whether it's in the library or simply pasted onto other projects, any project that uses the component instance (without detaching) will be able to pull in the latest updates. There's no need to manually republish anything. You can click the "Update" button within the Assets panel to update any individual component, and you can undo if you'd like to revert back to the previous version after updating.

Add Component to you project by using Copy URL

You can copy any component and paste it into your project. Go to the Assets panel, click the three dots next to the component, and click "Copy URL". Then, go to your project and paste it into the canvas.

If you double-click the component to edit it, you will see a popup that tells you to "Unlink Instance". If you unlink it, it will be added to your Assets library.

Import Component in a Code Component or React Project

Framer components can be used in any React environment outside of Framer. To do this, you'll need to use an import statement to fetch the component into your code. You can find this import statement by clicking the three dots next to your component and selecting "Copy Import". This copies a line of text to your clipboard, which you can then paste into your code. This import statement can also be used in a Framer code component to call the native component in your code.

For example, if you have designed a button in Framer and want it to appear only under specific conditions, such as when the URL contains certain parameters or when the visitor is from a particular page, you can use the "Copy Import" option to obtain the import statement. Subsequently, you can position it before the main function of your component or override it to utilize your native component within your code component.