Components in Kirki let you turn any element, along with its child elements, into a reusable block.

Perfect for repeating sections like headers, footers, or CTAs, Components help maintain consistency across your site while simplifying updates. Edit once, and the changes reflect everywhere.

Create a Component

1. Right-click an element from the canvas or layers and select Create Component.

2. In the Create New Component dialog, enter a name for your Component.

3. Click Create.

Your new Component will now appear in the Components section, ready for reuse.

Reuse Your Component

1. From the left sidebar, go to the Pages panel.

2. Switch to the Assets tab.

3. From the Components section, drag and drop any Component onto the canvas.

Detach a Component

You can also turn a Component instance into an element that you can edit independently without affecting the main Component.

This can be done in two ways:

From the Canvas

1. Right-click the Component instance on the canvas.

2. Select Detach from Component.

From the Right Panel

1. Select the Component you want to detach.

2. From the Right Panel, click the ellipsis (…) icon next to Component.

3. Select Detach from Component.

Once detached, the instance becomes a standalone element that’s fully editable. It’s no longer linked to the main Component, so future edits to the main Component won’t affect it.

But for that reason, it also won’t be reusable. To make it reusable with your changes included, turn it into a new Component.

Manage a Component

From the Components section, click the ellipsis (…) icon next to any Component to:

Rename a Component

1. Select Rename from the list of options.

2. Type the new name.

3. Click anywhere or press Enter to save your changes.

Edit a Component

1. Select Edit from the list of options, or double-click a Component directly on the canvas.

2. This opens the Component in edit mode.

3. In edit mode, you can see and edit the Component across each breakpoint – Desktop, Tablet, Landscape, and Mobile – shown side by side on the canvas.

4. Make your changes, then click Save at the bottom of the screen to apply them, or click Cancel to discard them. 

Edit the Component once, and the change reflects on the main instance, as well as everywhere it’s used across the site.

Delete a Component

1. Select Delete from the list of options to remove a Component.

2. A confirmation dialog will appear. Click Confirm to go ahead, or Cancel to keep the Component.

Set a Component as Header or Footer

You can also set a Component as your site’s header or footer, so it automatically appears across every page.

Learn more about Headers and Footers.