Webflow Components and Props: Building Reusable Sections

Why it matters

Webflow describes components as customizable blocks of elements and child elements that you reuse across your site. Without them, you copy and paste a section, then fix it in many places.

A component with no props is rigid. Every instance shows the same content. Webflow says components with identical content in every instance do not need props.

Props let one design carry different content. A pricing card or a hero can change text and images per page. You keep one source of truth for the layout.

Props also reach the CMS. Webflow says you can connect props to Collection fields, such as plain text, image, link or rich text. Each instance then shows that field's content, provided the field has data.

How to check it

1. Find repeated sections. Look for blocks you copied across pages. Check for slight differences between them.
2. Open the Components panel. See which components exist and how many instances each has.
3. Open a main component. Check the Props panel. Are there properties? Are they connected? Webflow says a property stays disconnected until you connect it to an element.
4. Find disconnected props. An unused prop does nothing. Remove it or connect it.
5. Check instances. Select one. Connected elements show a dotted green outline.
6. Look for unlinked copies. Webflow says unlinked instances ignore later edits to the main component.
7. Check variants. Look at the Variants dropdown on an instance.
8. Check hidden content. Webflow says hidden elements are removed from the DOM, so assistive technologies do not read them.

How to fix it in Webflow

1. Create the component. Select the section. Open the Component panel, click the new component icon and choose Convert selection. Name it and click Create. You can also choose Create blank.
2. Decide what changes. Typical parts are a heading, an image, a button link and a text block. Keep the rest fixed.
3. Create a property. Select the element. In Element settings, click the purple dot next to the value. Choose Create & connect new property. Set a default and click Create.
4. Or use the Props panel. Open the main component, click the plus icon, choose a type and name it. Connect it to an element afterward.
5. Pick the right type. Webflow lists text, image, video, link, rich text and number. It also lists visibility properties, which show or hide elements, and Collection list properties.
6. Set defaults. Webflow says deleting a connected property replaces its content with the default.
7. Group and label. Webflow lets you add tooltips and assign property groups. Use clear names so editors know what each field does.
8. Add variants for looks. Variants cover differences like layout or color, such as solid and outline buttons. Creating a variant automatically creates a variant prop. A component can have only one variant property, but any number of variants.
9. Add slots for whole blocks. Go to Add panel, then Structure, and drag a Slot onto the canvas. Editors can drop other components into it. Webflow says you cannot place a component instance inside its own slot.
10. Connect to the CMS where it fits. Connect props to Collection fields. Webflow says Collection lists cannot be nested inside components.
11. Test instances. Edit values on an instance. Use Reset all properties to check defaults.

Checklist

• Repeated sections are components.
• Only the parts that change have props.
• Every prop is connected to an element.
• Defaults are set.
• Props have clear names, and groups where needed.
• Variants cover layout and color changes.
• Slots are used for flexible blocks.
• CMS fields are connected where they fit.
• Instances were tested with different content.
• No unlinked copies were left behind by mistake.

FAQ

Can props change styles?

Webflow says styles cannot be changed through properties. It points to the class custom attribute for more advanced cases. Use variants for common style differences.

What happens when I edit the main component?

Webflow says changes to content or design update every instance. The exception is an instance with props set on specific elements.

What is the difference between a variant and a slot?

A variant changes how a component looks. A slot holds other components inside it. Webflow describes slots as placeholders you fill with components on each instance.

Dealing with this on a live Webflow site? It is the kind of work I do in CMS and development. Send me your site and I will tell you what I would fix first.