> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pagifye.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow Components

> Build faster with Pagifye’s Webflow components by starting with the Style Guide and using the Sync Extension for clean, modular design. 

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/ZaIb7QER6co" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Add the Pagifye Style Guide to Webflow

Before adding any components, clone the Webflow Style Guide from [webflow](https://webflow.com/made-in-webflow/website/root-ui-styleguide) or the pagifye component page into your project. This includes:

* Typography styles
* Button styles
* Spacing system
* Color, schema & variable settings
* Base layout structure

This ensures that every component you paste will use the same class names and design rules.

## Install the Pagifye Sync Extension

To keep everything clean and connected, we recommend installing the Pagifye Sync Extension for your browser.

The link to the Pagifye Sync is [here.](https://chromewebstore.google.com/detail/pagifye-sync/mmnggjoeahopipmgoakaiigccaoojmid)

This tool helps:

* Auto-connect class names
* Avoid class duplication
* Merge styles smoothly when pasting multiple components

It’s especially useful when building large projects with multiple pages.

## Copy a Webflow Component

In the Pagifye Component Library:

1. Find the section you want to use
2. Click the **Copy Webflow** button
3. The section is copied directly to your clipboard

You can choose from **Light**, **Gray**, **Dark**, or **Wireframe** versions depending on your style.

## Paste and Adjust in Webflow

1. Open your Webflow project
2. Paste the copied section into your page

The layout, styles, and class names will align with the style guide you imported.

You can now update the content, add animations, or rearrange sections without breaking the design system.

## Reuse and Build Faster

Each component is built to be modular. You can:

* Duplicate sections across pages
* Mix components from different categories
* Maintain a clean class structure throughout the project

**That’s It!**

You’re now ready to build with Pagifye + Webflow. All components are designed to be:

* Flexible
* Scalable
* Easy to integrate