Back to all lessons
Lesson library

Libraries

Rapidly reuse designs and manage layouts in a single, accessible location with Libraries.

This video features an old UI. Updated version coming soon!

Libraries are collections of reusable layouts that you can add to your site. Libraries allow for rapid reuse of similar designs (e.g., navbars, CTAs, forms, etc.) to ensure continuity and efficiency when building sites. You can add Libraries to your site from the Webflow Marketplace, or use the pre-existing Starter Library.

In this lesson, you’ll learn about:

  1. Types of Libraries
  2. How to use Libraries
  3. How to uninstall a Library

Types of Libraries

There are different types of Libraries, which differ on 2 characteristics: who creates the Libraries and where the Libraries are from.

The Library types include:

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
The Starter Library is highlighted in the Layouts tab of the Add panel.

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.

Important: At the moment, only customers with a Workspace account are able to install Libraries from the Webflow Marketplace. Learn how to check if your account is on Workspaces.

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.
The Libraries homepage in the Webflow Marketplace.
An example Library’s description page in the Webflow Marketplace.
The Install Library modal window.

How to use Libraries

You can access 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 Library comes with layouts (e.g., navigation bars, hero sections, footers) that you can add to your site. To access the layouts within a Library:

  1. Go to 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)
The navigation layouts are visible in the Navigation section of the Starter Library.

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.
The Layouts tab is highlighted in the Add panel.
The quick find results list available layouts by the layout name and the Library they’re in.

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. Go to Add panel > Layouts tab
  2. Hover over the layout to see a magnified version
Hovering over one of the Library’s layouts makes a magnified version of that layout appear to the right of the Add panel.

How to view information about a 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. Go to 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.

The Library information modal window shows the Library’s name, version, and who installed it.

How to uninstall a Library

You can uninstall a Library from your site if you no longer want it available in your Add panel. Uninstalling a 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 Library:

  1. Go to 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
The “Uninstall library” button is highlighted in the Edit library modal window.
The “Uninstall” button is highlighted in the “Uninstall library” modal window.
Try Webflow — it's free