# Install a component library in a Webflow project Tutorial3 minPublished on Mar 20, 2023Updated on ![Library / Webflow component library](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123391ce5fddd605c82574_64760069e93084646c9ef1c3_636d20ef62d7e4721d0299b2_Open-Graph-webflow-librairie-composant.webp)Table of contents [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Use AI to summarize this article[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Key pointsDuring the Webflow Conf' 2022, one of the major updates was the **native addition** of **component libraries** in Webflow. We were already familiar with **Made In Webflow** for copying components from other projects or the Relume Library where we can insert various types of components (navbar, footer, hero, form, etc.) into our website projects. With this new feature, Webflow raises the bar even higher. We can now, directly from the Webflow Designer, insert **components created and provided by and for the community**! A powerful demonstration of the [power of the Webflow community](/blog/power-of-community-webflow-conf). Here’s a summary of the steps to **use community components from the Webflow Designer**. ## Inserting Libraries into a Project ### Step 1: Create a Project in Webflow First and foremost, it is **recommended** to have an **existing project** before attempting to add libraries to it. Libraries are specific to each project. I can add certain libraries to one project and different ones to another, and so on. If you do not yet have a project, we recommend **cloning the Client-First project** to develop landings, web applications, or websites optimized for SEO and web accessibility. Discover the [Client-First method by Finsweet](https://finsweet.com/client-first). ### Step 2: Open the Library Marketplace Once your project is created, you will need to navigate to the new space created by Webflow (the new version), accessible from each user’s Dashboard or another page in the tool. From the dropdown menu, click on "**Marketplace**", then select "**Libraries**". Here’s the direct link to [Webflow component libraries](https://webflow.com/libraries?utm_source=digidop). ![Webflow Libraries Marketplace](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123392ce5fddd605c82657_64760069e93084646c9eeefd_636d2122d855358ed2b2f93c_webflow-marketplace-librairies.webp) ### Step 3: Choose a Library to Install Once you are in this space, you will see that there are already **more than ten existing libraries** available (Finsweet's Accessible components, Flow Ninja's Flow Library, Relume's Relume Library Lite, Flowbase's FlowUI Component Library, etc.). Select the one that interests you (you can see the number of components in the library at the bottom left of the cards) by clicking on it. For example, let’s consider the Conversion Flow Library from Conversion Flow. ![Conversion Flow Component Library](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123392ce5fddd605c82653_64760069e93084646c9eeefe_636d21370a6ad6646255a1b1_librairie-composant-webflow.webp) ### Step 4: Install the Component Library After clicking on the library you wish to add to your project, similar to the Made In Webflow projects, you will see a description and a link to view the live project. To install the components from this library, simply click on the "**Install library — Free"** button. Currently, all libraries are free (available for all types of users), but in the future (similar to templates), you may need to pay. ### Step 5: Choose a Webflow Project When you click on the installation button, a pop-up will appear asking **which project** you want to install the library on. You can **select as many projects as you wish** within a specific workspace. If you want to start with a blank project, you can click on "**Create site and install library**". Otherwise, select your projects and click on "**Install**". ![Install a component library in Webflow projects](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123392ce5fddd605c8265a_64760069e93084646c9eeefb_636d2153b3b6633ecb3c7099_installer-biblotheque-composants-webflow.webp) ### Step 6: Use Components If you install a library on multiple projects, a validation message will quickly appear; otherwise, you will be redirected directly to the selected project. To use the components, you will need to **go to the Designer** of your project, and then: - Click on the "Add Element" button (or use the keyboard shortcut A) - Select the "Layout" tab instead of "Elements" - Choose a library - Drag and drop (yes it's No Code!) a component onto your page - Customize the component / elements to fit your design It's that simple! ![Add a component from a library directly in the Webflow Designer](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123392ce5fddd605c82650_64760069e93084646c9eeefa_636d217a9d8b9dd99e6e403f_utiliser-composants-bibliotheque-webflow.webp) Note that the components you use may not follow the same class naming conventions or structure that you do. Be sure to customize these components to maintain a clean and optimized project (no need to develop from scratch anymore). To have an **optimized Webflow site**, you can read the [Client-First documentation in French.](https://www.finsweet.com/client-first/fr/guide-v1-v2) ## Contributing to New Webflow Library Additions Component libraries are a significant advantage in Webflow, a true **time-saver** in development. This concept of sharing to help the community is fundamental. You should know that you can also try your luck in proposing your component library in this marketplace to gain visibility. To do this, you can fill out the form to join the [waitlist for component library creators](https://webflow.com/libraries/submit). That wraps up this short tutorial on how to utilize community resources for your projects and develop more quickly. If you wish to discover the **other features of Webflow**, I invite you to read our article on the [announcements from the first day of Webflow Conf' 2022](/blog/recap-first-day-webflow-conf-2022)! [ ](#)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[ ](/team/thibaut-legrand)[ ](https://www.linkedin.com/in/thibaut-legrand-digidop/)[ ](https://twitter.com/lgd_thibaut)+1200 readers ## Stay ahead of the curve! Subscribe now for expert insights. [Subscribe ](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter ](https://digidop.substack.com/) ## Suggested articles ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post ### Top 20 Web & Digital Agencies for B2B SaaS in 2026 [Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post ### Webflow launches Source. Our take on this shift. [Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post ### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers [Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles ](/blog)Every great website   starts with a conversation[Talk to an expert ](/contact)[Book a call ](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)