Webflow Component Library

$39

50+ production Webflow components: pricing tables, feature sections, testimonials, CTAs, footers, and responsive navigation.

📁 67 files

Markdown

📄 Product Preview

Try the interactive reader and demo tools below, or get the full product with all content unlocked.

📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample

📁 File Structure 67 files

webflow-component-library/ ├── LICENSE ├── README.md ├── components/ │ ├── cta/ │ │ ├── cta-banner.html │ │ ├── cta-countdown.html │ │ ├── cta-floating-bar.html │ │ ├── cta-gradient.html │ │ ├── cta-minimal.html │ │ ├── cta-newsletter.html │ │ └── cta-split.html │ ├── features/ │ │ ├── features-alternating.html │ │ ├── features-bento.html │ │ ├── features-cards.html │ │ ├── features-comparison.html │ │ ├── features-grid-icons.html │ │ ├── features-tabs.html │ │ └── features-timeline.html │ ├── footers/ │ │ ├── footer-app-download.html │ │ ├── footer-centered.html │ │ ├── footer-four-column.html │ │ ├── footer-mega.html │ │ ├── footer-minimal.html │ │ └── footer-newsletter.html │ ├── forms/ │ │ ├── form-checkout.html │ │ ├── form-contact.html │ │ ├── form-login.html │ │ ├── form-multi-step.html │ │ ├── form-newsletter.html │ │ ├── form-signup.html │ │ └── form-survey.html │ ├── hero/ │ │ ├── hero-animated.html │ │ ├── hero-app-showcase.html │ │ ├── hero-centered.html │ │ ├── hero-gradient.html │ │ ├── hero-minimal.html │ │ ├── hero-split.html │ │ └── hero-video-bg.html │ ├── navigation/ │ │ ├── navbar-announcement.html │ │ ├── navbar-centered.html │ │ ├── navbar-hamburger.html │ │ ├── navbar-mega-menu.html │ │ ├── navbar-sidebar.html │ │ ├── navbar-simple.html │ │ ├── navbar-sticky.html │ │ └── navbar-transparent.html │ ├── pricing/ │ │ ├── pricing-cards.html │ │ ├── pricing-comparison.html │ │ ├── pricing-enterprise.html │ │ ├── pricing-minimal.html │ │ ├── pricing-three-tier.html │ │ └── pricing-toggle.html │ └── testimonials/ │ ├── testimonials-avatar-row.html │ ├── testimonials-cards.html │ ├── testimonials-masonry.html │ ├── testimonials-quote.html │ ├── testimonials-slider.html │ └── testimonials-video.html ├── free-sample.zip ├── guide/ │ ├── 01_CLASS-NAMING.md │ ├── 02_IMPORT-GUIDE.md │ └── 03_RESPONSIVE-GUIDE.md ├── guides/ │ ├── CLASS-NAMING.md │ ├── IMPORT-GUIDE.md │ └── RESPONSIVE-GUIDE.md ├── index.html ├── preview/ │ └── index.html └── styles/ ├── reset.css └── variables.css

📖 Documentation Preview README excerpt

Webflow Component Library

54 copy-paste-ready HTML + CSS components for Webflow projects. Every component is self-contained, fully responsive, and works without JavaScript. Open a file, copy the code, paste it into a Webflow Embed element — done.

Why This Library?

Webflow's native component ecosystem is limited. Third-party UI kits cost $200+ and lock you into specific design styles. This library gives you raw HTML + CSS that you own completely:

No JavaScript dependencies. Interactive elements (tabs, toggles, multi-step forms) use CSS-only patterns.
Consistent design tokens. One CSS file (styles/variables.css) controls colors, fonts, spacing, and shadows across all 54 components. Change three variables to retheme everything.
BEM class naming with wf- prefix. Classes like .wf-hero-split__title never collide with Webflow's generated classes or other embed code.
Mobile-first responsive. Every component works from 320px to 2560px with fluid typography, flexible grids, and sensible breakpoints.
Accessibility built in. ARIA labels, focus-visible outlines, prefers-reduced-motion support, and semantic HTML throughout.

Quick Start

1. Add the design tokens (one-time setup)

Open styles/variables.css, copy its contents, and paste into your Webflow project:

Project Settings → Custom Code → Head Code


<style>
  /* Paste the entire contents of styles/variables.css here */
</style>

This gives all components access to your brand colors, fonts, and spacing scale.

2. (Optional) Add the CSS reset

If you're using many components, also paste styles/reset.css into the Head Code. It normalizes browser defaults for Embed elements that don't receive Webflow's built-in normalization.

3. Use a component

1. Open any .html file from the components/ folder (e.g., components/hero/hero-split.html).

2. Copy the entire file contents — the <style> block and the HTML markup.

3. In Webflow, add an Embed element where you want the component.

4. Paste the code into the Embed's HTML editor.

5. Update the text, images, links, and colors to match your project.

4. Preview the full catalog

Open preview/index.html in your browser to browse all 54 components organized by category with descriptions and feature tags.

Component Catalog

Navigation (8 components)

File	Description	Features
`navbar-simple.html`	Horizontal navbar with logo, links, and CTA	Responsive, ARIA labels
`navbar-transparent.html`	Overlay navbar for hero sections	Backdrop blur, light text

... continues with setup instructions, usage examples, and more.

📄 Content Sample guides/CLASS-NAMING.md

Class Naming Convention

This library follows a strict naming convention to prevent conflicts with Webflow's native styles, your custom CSS, and third-party embeds.

The Pattern


.wf-{component}-{element}
.wf-{component}__{child-element}
.wf-{component}__{child-element}--{modifier}

This is a modified [BEM (Block Element Modifier)](https://getbem.com/) approach with a wf- namespace prefix.

Anatomy of a Class Name


.wf-hero-split__title--large
 │   │         │       │
 │   │         │       └── Modifier: visual variant
 │   │         └── Element: child within the block
 │   └── Block: the component name
 └── Namespace: "wf-" prevents collisions

Why This Matters in Webflow

Webflow generates its own class names (e.g., .heading-2, .paragraph-large). Without namespacing, your embedded component styles could accidentally override Webflow's styles — or vice versa.

The wf- prefix creates a clean boundary:

Layer	Example Class	Controlled By
Webflow native	`.heading-2`	Webflow style panel
This library	`.wf-hero-split__title`	Embed code block
Your custom	`.my-special-heading`	Custom code section

Rules

1. Always use the `wf-` prefix

Every class in this library starts with wf-. Never remove it.

2. Component names are kebab-case


wf-hero-split       (correct)
wf-heroSplit        (wrong — no camelCase)
wf-hero_split       (wrong — no underscores in component name)

... and much more in the full download.

Buy Now — $39 Back to Products