Shared Component Libraries

If you are on an Agency or Enterprise workspace plan, then you have access to component libs.

A component library is a means to share components and variables with multiple sites in your workspace. It protects aspects of your design system centrally while allowing multiple sites to leverage those resources.

Useful Tips

• You can create multiple libraries. Each library will contain all of the components and variables within that project.
• A subscribing site can use subscribe to multiple libraries.
• Webflow has a robust system for managing changes between the central library, and the subscribing sites- they are not "pushed" automatically.
• Lib component cannot be internally modified or styled in a subscribing site. This protects the structure and styling, rather like Build mode does. Use component properties and variants to expose customizable aspects.
• Lib components can be converted to Site components if you do need to significantly customize it.

Limitations

As of this writing...

• Libs and Subscribing Sites must be in the same workspace. This means you cannot transfer a lib-using site to a client workspace.
• Sites which subscribe to a shared library cannot be made cloneable in Made in Webflow.

Advanced Tips

When you're using slots, you can slot any type of component inside of any type of component;

e.g. Site Component slots a Lib Component slots a Site Component.

This is very powerful since it lets you customize aspects at the site level.

On collection pages and in collection lists, you can also bind slotted components directly to content in the CMS context.

Use Cases

Hero example;

• A well designed reusable hero section in the lib, which contains a slot for inner content.
• The site then contains just the component for the inner content.
• It may further contain slots which pull in other useful pieces from the Lib

Nav example;

• Lib-based nav bar, with logo and key menu items, buttons, megamenus, etc.
  • Slots to fill in menu content and add new menu items.
• Lib-based slot menus, which can be embedded and configured at the site level.
• Wrap the entire nav in a Site-component, so that it can be copied to every page of that site and kept intact.

‍