Components overview

Use components to manage recurring layouts and content more efficiently across your site.

Components give you the power to create customizable blocks of elements and child elements to maintain a consistent, efficient, and scalable design workflow. You can reuse those blocks across your site and modify them in a single place to avoid individually revising each recurring layout.

• Identical content and design per instance — create a component for recurring layouts (e.g., navbars and footers) to reuse across your site. Any changes to the content or design automatically update every instance of the component.
• Unique content per instance — create a component with a consistent layout and design, but allow each instance to have different content, (e.g., a hero section layout that can have unique text, images, or videos per instance) using component properties and slots.
• Different variants per instance — create a component with predefined style and layout options, (e.g., solid and outline buttons, or horizontal and vertical card layouts). Component variants let you customize the design of each instance without needing to create separate components.

Component terminology

Main component — The component definition, including structure, styles, and configurability. Changes to the main component impact every instance of that component.

Component instance — An individual references to a main component. Each instance can have unique content and settings via props and slots, but structure and styles can only be edited on the main component.

Variant — You can create variants of a component with different layouts, colors, font styles etc. (e.g., solid or outline buttons, or horizontal and vertical card layouts) and choose which which variant to use on each instance of your component across your site.

Properties (props) — Component properties let you define specific elements within a component that can be modified with unique values on a component instance.

Slots — Elements you can place in existing components that act as placeholders for other components.

Designing components

Webflow supports designing the main component both in context, and on a dedicated component canvas.

• In-context — Designing a main component in the context of a component instance (e.g., on a page).
• Component Canvas — Designing a main component (and component variants) outside the page, with all variants visible side-by-side.

How to create a component

You can create a component from existing elements or from scratch.

Create a component from an existing element

Any elements on the canvas can be converted to a component for reuse across your site. To convert existing elements to a component:

1. Select the element you want to convert to a component
2. Open the Component panel or press Command + Shift + A (on Mac) or Control + Shift + A (on Windows)
3. This is also available from the Style panel and Settings panel
4. Click the “new component” icon at the top of the panel
5. Choose Convert selection (for creating a new component from selected elements)
6. Give your component a name
7. (Optional) Add your component to a group and give it a description
8. (Optional) If suggested props are available:
   1. Click the expand icon to review them
   2. Click the pencil icon to rename a prop
   3. Deselect any props you don’t want to create
9. Click Create

Duplicate a component

1. Open the Components panel
2. Click the “more options” icon
3. Click Duplicate
4. Give your component a name
5. (Optional) Add your component to a group and give it a description
6. Click Create

Create a component from scratch

You can build components from scratch on the Component Canvas — a dedicated space for creating and editing components outside the context of a page. This is especially useful for components that’ll have multiple variants. To create a component from scratch:

1. Open the Components panel
2. Click the “new component” icon at the top of the panel
3. Choose Create blank
4. Give your component a name
5. (Optional) Add your component to a group and give it a description
6. Click Create

After you click create, the Component Canvas opens with a single empty div block — this is the wrapper for your component. From here you can build your component's responsive layout, add content and interactions, and create variants. To exit the Component Canvas, click the “back” arrow next to your component’s name in the top bar.

How to use and reuse a component

Once you’ve created a component, you can reuse it anywhere on your site:

1. Open the Components panel
2. Hover over a component to view a preview
3. Drag and drop the component onto the canvas or Navigator

When you select a component instance, you’ll see it highlighted and outlined in green. Open the Components panel to see how many times each of your components has been used in your site.

To view a component’s element hierarchy in the Navigator panel, Hold Option + double-click (on Mac) or Hold Alt + double-click (on Windows) the component, or click the “edit main component” icon. You’ll only be able to see the component’s element hierarchy from the main component (i.e., you won’t be able to view the component’s element hierarchy from within a component instance).

How to edit a component

Let’s go through the various ways you can interact with and edit a component:

• Edit the main component
• Component props, slots, and style variants
• Create component style variants
• Manage the variant prop
• Change a component instance’s variant
• Reorder, rename, duplicate, or delete component style variants
• Exit the main component
• Edit components in the Editor
• Change a component name or description
• Group components
• Delete a component

Edit the main component

Edits to the main component will affect every component instance (unless that component instance has component properties applied to specific elements within the component). You can edit the main component either in-context (from an instance on a page) or on the Component Canvas.

Edits to the main component will affect every component instance (unless that component instance has component properties applied to specific elements within the component). When editing the main component, you can change the structure and element order to simultaneously affect all component instances across your site.

Edit the main component in-context

You can edit the main component from any component instance by:

1. Double-clicking the component instance on the canvas or in the Navigator
2. Hovering over the component instance in the Navigator and clicking the “edit component” icon
3. Right-clicking the instance and clicking Edit component
4. Selecting the instance and clicking the “edit component” icon in the label
5. Selecting the instance and clicking the “edit component” icon at the top of the right panel

Open the main component on the Component Canvas

To edit the main component on the Component Canvas:

1. Open the Components panel
2. Hover over the component you want to edit
3. Click the “open component” icon

You can also edit the main component on the Component Canvas by right-clicking an instance on the canvas and clicking Open component. To navigate from in-context editing, use the green banner.

Component props, slots, and variants

Component properties (props), slots, and style variants let you create unique configurations on each instance of a component:

• Props — connect individual element settings in the main component (e.g., text, links, images, or videos) to props. This allows you to customize these settings on each instance without changing the overall structure or design of the component. Props can also be connected to CMS fields to dynamically pull in content from your CMS Collections.
• Slots — slots are elements you can place in existing components that act as placeholders for other components. This lets you build components modularly, where each instance can include different components in the slot. Slots offer more flexibility and versatility, enabling you to design dynamic and reusable layouts.
• Variants — define multiple design options for a single component, allowing you to adapt its appearance for different use cases. For example, you can offer variants like solid or outline buttons, or horizontal and vertical card layouts, so each instance of the component fits its context without creating entirely new components.

Create component style variants

You can create variants of a component with different layouts, colors, font styles etc. (e.g., solid or outline buttons, or horizontal and vertical card layouts) and choose which which variant to use on each instance of your component across your site.

To create a component style variant:

1. Edit the main component
2. In the Navigator, click the “plus” icon next to Variants
3. Click the “plus” icon
4. Give the variant a unique name
5. Press the Enter/Return key on your keyboard to confirm

You can also add component variants on the Component Canvas by clicking the “+ Variant” button, or manage variants from the Style panel.

All variants inherit their styles from the base variant. You can adjust the styles on any element within the component without affecting the base variant.

Manage the variant prop

When you create a component style variant, a variant prop is automatically created for that component. You can change the variant prop’s name, add it to a property group, and set a default variant for the component in the Properties panel.

To change the name of the variant prop:

1. Edit the main component
2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel
3. Click the Variant property
4. Enter a unique property name
5. Press the Return key on your keyboard to confirm

To add the variant prop to a property group:

1. Edit the main component
2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel
3. Click the Variant property
4. Select a group or enter a unique name to create a new group
5. Click Create or press the Return key on your keyboard to confirm

Learn more about component property groups.

Set a default variant for a component:

1. Edit the main component
2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel
3. Click the Variant property
4. Choose a variant from the Defaults dropdown

Change a component instance’s variant

Like other component properties, you can choose the style variant for each instance of a component. To change a component instance’s variant:

1. Single-click the component to open the instance’s Properties panel
2. Choose the variant for this instance from the Variants dropdown

Reorder, rename, duplicate, or delete component style variants

Designers can manage component style variants (e.g., reorder, rename, duplicate, or delete variants).

To reorder a component’s variants:

1. Edit the main component
2. Open the Navigator
3. Click and drag a variant to move it to a new position

When you reorder component variants, their frames are automatically reordered on the Component Canvas also.

To rename a variant:

1. Edit the main component
2. Open the Navigator
3. Double-click the variant name
4. Enter a new, unique variant name
5. Press the Enter/Return key on your keyboard to confirm

To duplicate a variant:

1. Edit the main component
2. Open the Navigator
3. Hover over the variant and click the “more options” icon
4. Click Duplicate
5. Enter a unique variant name
6. Press the Enter/Return key on your keyboard to confirm

To delete a variant:

1. Edit the main component
2. Open the Navigator
3. Hover over the variant and click the “more options” icon
4. Click Delete
5. Click Delete in the pop-up modal to confirm

Note that the base variant can’t be deleted.

Exit the main component

Once you’re done editing the main component, you’ll need to exit the in-context editing view or Component Canvas to continue working on the rest of your site. To exit the main component, click the “back” arrow next to your component’s name in the top bar.

When editing in-context, you can also exit the main component by clicking outside the component on the canvas or pressing Escape on your keyboard.

After you’ve stopped editing the main component, keep in mind that any edits you make to elements in a component instance will only affect that specific component instance.

Change a component name, group, or description

To change a component name or description:

1. Open the Components panel or click the component name in the top bar while editing the component
2. Hover over a component name and click the “more options” dots that appear
3. Click Edit settings
4. Make your changes and Save

To change a component group, choose an existing group from the Group dropdown, or type to create a new group

Rename a component instance

You can rename individual component instances to make them easier to identify — this is especially helpful when reusing the same component multiple times on a page. Custom names appear and can be edited in the Navigator, at the top of the right panel, and on the canvas when the instance is selected.

To rename a component instance:

In the Navigator or at the top of the right panel:

1. Double-click the component name
2. Type the new name
3. Press Enter or click away to save your custom name

On the canvas:

1. Right-click the component instance
2. Click Rename
3. Type the new name
4. Press Enter or click away to save your custom name

To reset the name back to the original component name, delete the custom name during renaming or right-click the instance in the Navigator or on the canvas and click Reset name.

Note: Renaming a component instance doesn’t affect the main component or other instances. To view an instance’s original name, Hold Option (on Mac) or Hold Alt (on Windows) in the Navigator, or hover over the custom name at the top of the right panel.

Learn more about renaming elements and component instances.

Delete a component

Note that you can only delete a component with zero instances. To delete a component completely:

1. Remove or unlink all instances of the component from your site
2. Open the Components panel
3. Hover over a component name and click the “more options” dots that appear
4. Choose Edit settings
5. Click Delete and confirm

How to unlink a component instance from its main component

To unlink a component instance and make changes to it independent of the main component:

1. Right-click any component element in the instance you want to unlink
2. Click Unlink instance

Once unlinked, if you edit any other linked instance of that component in your design, it will not change the unlinked instance.

Sharing native and code components across sites with Libraries

You can share native and code components across sites in a Workspace with Libraries. This can accelerate your workflow and enhance your design system by providing a single place to update components that are used across multiples sites in your Workspace.