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, styles, and interactions 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.

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.

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.

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 existing elements

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)
   • This is also available from the Style panel and Element settings panel
3. Click the "new component" icon at the top of the panel
4. Choose Convert selection (for creating a new component from selected elements)
5. Give your component a name
6. (Optional) Add your component to a group and give it a description
7. (Optional) If suggested props are available:
   • Click the expand icon to review them
   • Click the pencil icon to rename a prop
   • Deselect any props you don't want to create
8. 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.

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 (use component properties to allow for configuration on each instance). You can edit the main component either in-context (from an instance on a page) or on the Component Canvas.

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:

• Double-clicking the component instance on the canvas or in the Navigator
• Hovering over the component instance in the Navigator and clicking the "edit component" icon
• Right-clicking the instance and clicking Edit component
• Selecting the instance and clicking the "edit component" icon in the label
• 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.

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
5. 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.

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

Learn how to delete component properties.

How to unlink a component instance from its main component

When unlinking a component instance from its main component, props will be converted to static settings, variants will be converted to styles, and slots will be converted to elements. If you want to "unlink" a component instance but not break the props, variants, and slots of the initial instance you can duplicate the component instance and unlink the duplicate instead.

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.

Share components across sites with Libraries

You can share Webflow components, code components, and AI 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 multiple sites in your Workspace.