How To Delete A Component In Webflow

Quick summary

To delete a component in Webflow, you must first unlink all instances of that component before removing it from the Components panel. This step-by-step process ensures no active instances block the deletion, keeping your Webflow project clean and organized.

Steps

1. Open your project to enter the Webflow editor.
2. Select your component on the canvas.
3. Right-click on the component instance, open the context menu, and choose Unlink Instance from the bottom of the menu. Repeat this for every instance of the component, as active instances cannot be deleted.
4. Alternatively, use the keyboard shortcut Shift + Ctrl + A to unlink instances faster, especially if the task is repetitive.
5. In the left sidebar, open the Components panel.
6. Confirm that the component shows 0 instances beneath it, indicating all instances have been unlinked.
7. Click the small pencil icon next to the component name.
8. Click Delete to initiate removal of the component.
9. Confirm the deletion by clicking Delete again in the confirmation prompt.
10. Your component has been deleted from the Webflow project.