Libraries

Libraries are collections of reusable design elements — like components, variables, 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 and variables 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 Marketplace

Shared Libraries

Libraries let you share components and variables across multiple sites in a Workspace. This provides improved and accelerated workflows for design teams managing multiple websites that use the same styles or structure. Shared Libraries are available to Growth, Agency, and Enterprise Workspace plans.

How to share a Library

Note: Shared Libraries are named using the site name where the Library is initially created. We recommend creating a separate “Design System” website to contain the variables and components associated with your design system.

Shared Libraries consist of existing variables and components on a site. To share a Library across sites in your Workspace:

1. Go to the Components or Variables panel
2. Click the “Manage libraries” icon
3. Click Share with Workspace
4. Click Share library

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

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

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 cannot be installed on sites that have already been shared as as a Library. To install a Library on a site:

1. Go to the Components or Variables 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 and variables from the Library via the Components and/or Variables panels.

How to use Library components and variables

Using shared Library components

You can access Library components in the Components panel, below your site components. You can only edit the 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 variables

You can access shared Library variables on any element styling for which variables are available. Note that you can only edit variable values on the source site.

Updating Library components and variables

Changes to components and variables on the source site can be shared to the Library at any time:

1. Go to the Components or Variables panel on the source site
2. Click the “Manage Libraries” icon
3. Click Review updates and review the changelog as needed
4. Click Share updates

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

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

Deleting Library components and variables

When you delete shared Library components or variables from the source site (i.e., from the Library), they’ll be converted to site components and/or site variables when accepting the update on the sites on which they’ve been 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 or Variables panel on the site in 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/variables in use on the site will be converted to site components/variables.

Unsharing a Library

To unshare a shared Library in your Workspace:

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

All existing Library installs will continue to work across your Workspace but you won’t be able to install the Library on any other sites.

Shareable 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 are not 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 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 1 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 1 or multiple existing site(s) to add the library to
6. Click Install
7. Click Open in Designer in the popup modal window to open the site in the Designer

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

The Designer will automatically open to 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 site plans. Make sure you have the correct 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