Developers

Search

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. See Intro to components in Framer.

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.

If you double-click the component to edit it, a popup will prompt you to “Unlink Instance.” Unlinking adds it 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.

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

  2. Paste the import statement into your code.

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.

If the problem persists after following these steps, feel free to reach out to us through our contact page for further help.

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. See Intro to components in Framer.

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.

If you double-click the component to edit it, a popup will prompt you to “Unlink Instance.” Unlinking adds it 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.

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

  2. Paste the import statement into your code.

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.

If the problem persists after following these steps, feel free to reach out to us through our contact page for further help.

FAQ

  • How do I add a component to my Framer library so it’s available across all projects in my Workspace?

    Go to the Assets panel, click the three-dot icon next to the component name, and select “Add to Library” from the dropdown menu. This will make the component available across all your projects in the Workspace.

  • How can I update shared components in my projects if I make changes to the source component?

    If you make changes to the source (primary) component, all projects using the component instance (without detaching) can pull the latest updates. Click the “Update” button in the Assets panel to apply changes to individual components. You can also undo updates if needed.

  • Can I use Framer components in a React project outside of Framer, and how do I do it?

    Yes, Framer components can be used in any React environment outside of Framer. Click the three dots next to the component and select “Copy Import.” Then, paste the import statement into your code. You can place it before your component's main function or override it to customize its behavior.

Updated

Related articles

Unlinking components

Using event variables

Using layout templates

Using text styles

Using Triggers