Libraries

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

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 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. 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 Library’s variables

Some Library creators include color variables in their 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 Library’s color variable to change every instance of the color variable on the canvas.

How to search Library layouts

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

Some useful keywords to search for:

  • Navbar
  • Hero
  • Tab
  • CTA
  • Footer
  • Pricing
  • Form
  • Logo
  • Testimonial
  • Content
  • Button
  • Dropdown
  • Contact

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”)
The “Search library” bar is highlighted in the Layouts tab of the Add panel.

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”)
The “Search all libraries” bar is highlighted in the Layouts tab 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. 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 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. 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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top