Libraries

Updated

Share components, variables, and assets across your Workspace or leverage layouts from the community with Libraries.

Libraries are collections of reusable design resources — like components, variables, assets, and layouts — that can be installed on your site. Libraries allow for rapid reuse of similar designs (e.g., navbars, CTAs, forms, etc.) to ensure consistency and efficiency when building sites.

Types of Libraries

Library types include:

  • Shared Library — components, variables, and assets shared by your team, available to install on any site in your Workspace
  • Starter Library — layouts built by Webflow, pre-installed on every site
  • Marketplace Library — layouts built by the community, available to install on any site via the Webflow Marketplace

Shared Libraries

Note

Shared Libraries are available on Growth, Agency, and Enterprise Workspace plans. If you’re on Starter, Freelancer, or Core, you’ll need to upgrade your Workspace plan to use Shared Libraries.

Libraries let you share components, variables, and assets across multiple sites in a Workspace. This provides improved and accelerated workflows for design teams managing multiple websites that use the same styles, assets, or structure.

How to share a Library

Shared Libraries consist of existing components, variables, and assets on a site. When a Library is shared, it’s tied to the site it was shared from — this is called the source site.

Pro tip

We recommend creating a separate “Design System” website to contain the components, variables, and assets associated with your design system.

To share a Library across sites in your Workspace:

  1. Open the site in Webflow
  2. Go to the Components, Variables, or Assets panel
  3. Click the Manage libraries icon
  4. Click Share with Workspace
  5. (Optional) Click Asset settings to choose which asset folders to share
  6. Click Share library

The Library is now available for installation on all sites within that Workspace. Workspace members who don't have access to the Library’s source site will still be able to see and install the Library on their sites.

Note

You can’t share Libraries across different Workspaces or share a Library on a site with one or more shared Libraries already installed.

You can manage your Workspace’s shared Libraries by going to Workspace settings > Libraries & Templates > Shared. From there, you can view all shared Libraries in your Workspace and access each Library’s source site and Site settings.

Note that each Library in the list shares its name with the source site. You can open the source site in Webflow by clicking the Library name, or by clicking the “more optionsdots and choosing Source site from the menu.

To access the source site’s settings, click the “more optionsdots and choose Site settings.

Note

If you don’t have access to the source site or if it’s been archived, you won’t be able to open it or access its Site settings.

How to install a shared Library

You can install a shared Library onto any site within the Workspace to which it was shared. Shared Libraries can't be installed on sites that have already been shared as a Library. To install a Library on a site:

  1. Go to the Components, Variables, or Assets panel
  2. Click the “Manage Libraries” icon
  3. Click Install for the Library you’d like to install onto your site

Then, you’ll have access to components, assets and variables from the Library via the Components, Assets, and/or Variables panels.

Important

If you archive a source site, the Library is also archived and can no longer be installed on additional sites. You can’t change a Library’s source site.

Auto-install (Enterprise only)

If you’re a Workspace owner or admin on an Enterprise plan, you can install a shared Library by default on new sites in your Workspace. This is useful for starting every new site in your Workspace with a consistent set of components, variables, and assets.

To enable this setting, go to Workspace settings > Libraries & Templates > Shared and toggle Auto-install to on next to the Library you want to install by default.

Note

Setting a Library to install by default only applies when creating new sites. It doesn’t apply to existing sites or to sites created by duplicating another.

View and access a Library’s installations

You can view and access the sites where a Library is installed (i.e., installations) in Workspace settings or in the Libraries modal on the source site.

To view and access installations in Workspace settings:

Go to Workspace settings > Libraries & Templates > Shared. Under the Installations column, you’ll see the number of sites using the Library. Click the number to open the list of installations. Click a site name to open it in Webflow.

You can also open this list by clicking the “more optionsdots and choosing Installations from the menu.

To view and access installations in the source site:

  1. Go to the Components, Variables, or Assets panel
  2. Click the “Manage Libraries” icon
  3. Click the number of sites in the This site’s library section
  4. Click a site name to open it in Webflow

Note

The installations count includes all sites where a Library is installed, including archived sites and sites you may not have access to. When you open the list, you’ll only see the sites that aren’t archived and you have access to.

How to use Library components, variables, and assets

Using shared Library components

You can access Library components in the Components panel, below your site components. You can only edit the main component on the Library’s source site, but instances can be customized using component properties.

You can convert a Library component to a site component via the right-click menu on any component instance or the Duplicate action in the Components panel. The new site component will not receive updates from the Library.

Using shared Library assets

You can access shared Library assets when designing and building in Webflow from the Assets panel, below your site assets. Learn more about using assets on your site.

Shared assets can only be managed (renamed, replaced, deleted etc.) on the Library’s source site. If you want to use a shared asset and make changes to it that shouldn’t be reflected across all of the sites using it, you can duplicate the shared asset to make a local copy and add it to your site assets:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to make a local copy of
  3. Click the “more options” icon to open the contextual menu
  4. Click Duplicate

Note

Any changes made to the duplicated asset will only apply on that individual site. The original shared Library asset will remain unchanged, and future Library updates won’t affect the duplicated version.

Learn more about managing your site assets.

Using shared Library variables

You can access shared Library variables and variable modes on any element styling for which variables are available. Note that you can only edit variable values (including mode values) on the Library’s source site.

Updating Library components, variables, and assets

Changes to components, variables, and assets on the source site can be shared to the Library at any time. Any variable collections, groups, and modes will also be shared to the Library. To share updates to a Library:

  1. Go to the Components, Variables, or Assets panel on the Library’s source site
  2. Click the “Manage Libraries” icon
  3. Click Review updates and review the changelog as needed
  4. (Optional) Click Asset settings to change which asset folders are shared
  5. Click Share updates

Review and accept Library updates

To review and accept updates on a site where the Library is installed:

  1. Go to the Components, Variables, or Assets panel
  2. Click the “Manage Libraries” icon
  3. Click Review Updates and review the changelog as needed
  4. Click Accept all updates

You can check if sites using a shared Library have updates available by going to Workspace settings > Libraries & Templates > Shared — a number next to the installations count in the Libraries list indicates how many sites have updates to review and accept.

Click the installations or update count and then click Review updates to open the site in Webflow.

Note

You can only review and accept updates in design mode.

Deleting Library components, variables, and assets

When you delete shared Library components, variables, or assets from the source site (i.e., from the Library), they’ll be converted to site components, assets, and/or site variables when you accept the update on sites where the Library is installed.

When you delete a prop from a shared Library component on the source site, you can choose what to do when reviewing the update:

  • accept the update to the component on the site on which it has been installed (i.e., all instances will be updated to match the new design)
  • convert the component to a site component on the site on which it has been installed

Uninstalling a shared Library from a site

To uninstall a shared Library from a site:

  1. Go to the Components, Variables, or Assets panel on the site on which the Library was installed
  2. Click the “Manage Libraries” icon
  3. Hover over Installed next to the Library you want to uninstall
  4. Click Uninstall

Note that any shared Library components, assets, and/or variables in use on the site will be converted to site components, assets, and/or variables.

Unsharing a Library

Unsharing a Library removes it from the list of available shared Libraries in your Workspace. All existing Library installs continue to work, but the Library can’t be installed on any other sites. You can unshare a Library from Workspace settings or from the Libraries modal on the source site.

To unshare a Library from Workspace settings:

  1. Go to Workspace settings > Libraries & Templates > Shared
  2. Click the “more optionsdots next to the Library you want to unshare
  3. Choose Unshare from the menu
  4. Click Unshare to confirm

To unshare a Library from the source site:

  1. Go to the Components, Variables, or Assets panel on the Library’s source site
  2. Click the “Manage Libraries” icon
  3. Click Review Updates
  4. Click Unshare
  5. Click Unshare to confirm

Note

When you archive a source site, the Library is also archived and automatically unshared. An archived Library will still appear in the Libraries list in Workspace settings if it has at least one existing installation. To unarchive a Library, you’ll need to unarchive the source site.

Shared Library limitations

Elements

When sharing a Library, components with any of the following elements will be hidden: background video, Collection list, Locales list, Search, Map, reCAPTCHA, or any elements specific to Webflow Users or Webflow Ecommerce.

Custom code

Library classes are namespaced to prevent collision with your site styles — in many cases, this won’t work with custom CSS. We recommend using custom properties rather than custom code.

Page branching

You can’t manage a Library from a page branch. Additionally, you cannot uninstall a shared Library if there is an existing page branch on your site.

Localization

Content or styles from secondary locales are not included in the shared Library. You can re-localize content on the site to which the Library was added (although styles on shared Library components aren’t editable).

Starter Library

The Starter Library is a default, Webflow-built Library of 34 layouts that you can use on any site. The 34 layouts are divided into the following categories:

  • Navigation
  • Hero
  • Team
  • Logos
  • Gallery
  • Features
  • Pricing
  • Testimonial
  • Footer

Learn more about the different layouts in our Starter Library article.

Marketplace Library

Marketplace Libraries are Webflow-reviewed collections of layouts made by top Creators in the Webflow community. You can access them from the Webflow Marketplace, or from the Add panel > Layouts tab, to add them to your sites. Learn more about adding a Marketplace Library to your site.

How to install a Marketplace Library

Once you’ve selected a Marketplace Library you’d like to use, you can add the Library to your site directly from the Webflow Marketplace. Keep in mind there is a limit of 5 Libraries per site.

You can only install Libraries to sites in the same Workspace. To add a Marketplace Library to one or multiple existing site(s):

  1. Go to Marketplace > Libraries
  2. Click the Library you want to add to your site
  3. Click Install Library
  4. Select a Workspace from the Workspace dropdown
  5. Select one or multiple existing site(s) to add the library to
  6. Click Install

Then, you can access the Library in your site.

To add a Marketplace Library to a new site:

  1. Go to Marketplace > Libraries
  2. Click the Library you want to add to your site
  3. Click Install Library
  4. Select a Workspace from the Workspace dropdown
  5. Click Create site and install library

Webflow will automatically open a new site with the Library installed. By default, the site will be named after the Library (e.g., if you install a library named “Cool library” to a new site, your site will be named “Cool library site” in your Dashboard). You can change your site’s name in Site settings > General tab > General settings > Name field.

Note

If you add a layout to the canvas that has a class already in existence on your site, the class name will appear with an incremented number. For instance, if you already have a “Button” class in your site and you add a layout that contains the same “Button” class, the layout class name will become “Button-2” in the Selector field.

Note

Marketplace Libraries may include custom code embeds or form file upload elements, which are only available on some Workspace or Site plans. Make sure you have the correct Workspace and/or Site plan to ensure these elements function correctly.

How to use Marketplace or Starter Libraries

You can access Marketplace or Starter Libraries in the Webflow Designer by going to Add panel > Layouts tab or by using Quick find. In the Add panel, you’ll find each Library labeled by name.

How to access the layouts in a Library

Each Marketplace and Starter Library comes with layouts (e.g., navigation bars, hero sections, footers) that you can add to your site. To access the layouts within a Marketplace or Starter Library:

  1. Open Add panel > Layouts tab
  2. Choose a Library whose layouts you want to use
  3. Click a layout category dropdown to display the layouts in that section (e.g., if you want to access the navigation layouts in the Starter Library, click Navigation)

Then, you can use the Library’s layouts like you would use any other element. To add a layout from your Library to the Webflow canvas, you can:

  • Click on the layout in the Layouts tab to add it to the canvas
  • Drag the layout onto the canvas
  • Drag it into the Navigator

Note

If you add a layout to the canvas that has a class already in existence on your site, the class name will appear with an incremented number. For instance, if you already have a “Button” class in your site and you add a layout that contains the same “Button” class, the layout class name will become “Button-2” in the Selector field.

How to view a magnified version of a layout

If you want to see a layout in a larger view before adding it to the canvas, you can view a magnified version. To view a magnified version of a layout from the Add panel:

  1. Open Add panel > Layouts tab
  2. Hover over the layout to see a magnified version

How to use a Marketplace Library’s variables

Some Library creators include color variables in their Marketplace Libraries, which let you reuse the Library’s color scheme in your designs. The variables appear in the Variables panel when you add a layout to the canvas that uses those color variables. You can edit a Marketplace Library’s color variable to change every instance of the color variable on the canvas.

Searching Marketplace or Starter Library layouts

You can search for Library layouts within a Library, or across all Libraries installed on your site. To search within a Library:

  1. Open Add panel > Layouts tab
  2. Choose a Library whose layouts you want to search
  3. Type a layout keyword into the Search library bar (e.g., “navbar”)

To search across all Libraries installed on your site:

  1. Open Add panel > Layouts tab
  2. Type a layout keyword into the Search all libraries bar (e.g., “navbar”)

How to view information about a Marketplace Library

You can view information about a Library, such as its name, version number, and who installed it into the site. To view information about a Library:

  1. Open Add panel > Layouts tab
  2. Hover over the Library name and click the settings “cog” that appears to the right of the Library’s name

This opens a Library information modal window.

How to uninstall a Marketplace Library

You can uninstall a Marketplace Library from your site if you no longer want it available in your Add panel. Uninstalling a Marketplace Library will not affect any of the Library’s layouts you have previously added to your site. You can reinstall the Library at any time.

To uninstall a Marketplace Library:

  1. Open Add panel > Layouts tab
  2. Hover over the name of the Library you want to uninstall
  3. Click the settings “cog” to the right of the Library name
  4. Click Uninstall library in the “Edit library” modal window
  5. Click Uninstall in the “Uninstall library” modal window