Shared Libraries to use components & variables across a Workspace — Webflow tutorial

Shared Libraries in Webflow enable you to share and update components and variables across your entire Workspace, ensuring consistent brand alignment across all your sites. One Webflow site can serve as your design system — the central source of truth for your components and variables — which can then be shared across your Workspace. Whether you're managing one site or many, Shared Libraries keep everything in sync, streamlining your web design process.

00:00 — Shared Libraries in Webflow
00:47 — Share a library
01:40 — Install a library
02:31 — Push and accept updates to a library
03:39 — Convert to a site component
05:35 — Uninstall a library
06:01 — Unshare a library

----------

[rask]

While you can convert a component from a shared library to a site component (local), you can't do the same for color variables. If your component in the library has colors bound to variables and you convert the component to a site component, the colors are still bound to the library. So, if you want to change the colors, you need to do that at the source or manually re-bind the colors to site (local) variables. In the video, it's presented as a feature, not a limitation, and sure, if you want to create multiple websites all with the same colors, it makes sense. But if you want to use the shared library as a starting point for various, different projects, then it becomes pretty much useless.

[HudsonOliveira-mk]

That's super awesome! One more step towards a true reusable component model. The only thing I'm still missing is the option to make components that can hold totally custom structures inside. For example: I have a bunch of sites that use the same header structure, with a logo and a menu, but have totally different menu items with dropdown submenu items. I thought slots were suposed to do that, just like slots in React, but sadly not yet. We'll get there! 🚀🚀🚀🚀

[developedbyvarun]

This is soo good, somewhat like github push pull...loved it guys <3

[HiuChang-ho]

Shared libraries seems not working if you have link inside and they are linking to related pages in the main component. eg: I shared a top nav & footer component from main site, the links destination inside are all fixed and link to different pages in main site, when I share the component to a campaign site, those links destination become a # only, that means I need to link all the links once again in campaign site??

[NazariiStelmakh]

Very cool and useful functionality!
I have a few websites with the same styling and components. let me know please how can I grab them all and merge/link to one parent component right now?
or even more, how can I move/duplicate my components from the current website to the separate library "home" website and not destroy the connection (new library website - parent components, current website - children components)?
Ty in advance

[bhukyadayakar]

Hey, we did not get any short tutorials on slots yet like we did for components etc. Why?

[LuizFSWally]

Incredible, a shame that it is only available for enterprise plans and they never respond to any emails contacting the sales team