Create a component

There are two ways to create components in Nordcraft:

Create from scratch
Extract existing elements

Create from scratch

The create component dialog is open where you can choose a name for your component. The image is annotated corresponding to the list items below, showing the context menu that appears when click the plus button at the top of the project sidebar.

Live

To create a new component:

1
Open the project sidebar by clicking the folder icon or using Cmd/Ctrl + K
2
(A) Find the "Components" section and click the + button next to it or
(B) Click the + button next to the branch name at the top of the project sidebar and choose New component
3
Enter a name for your component and confirm with Create

Extract existing elements

The context menu that appears when you right-click an element in the HTML element tree is visible, showing extract as component highlighted. The create component dialog is visible at the center of the screen, allowing you to name the new component that you are extracting.

Live

To convert existing elements into a component:

1
Select the element you want to convert in the element tree
2
Right-click and select Extract as component from the context menu
3
Enter a name for the new component and confirm with Create

This method automatically:

Creates a new component with the selected element's structure
Replaces the original elements with an instance of the new component
Preserves the original appearance and behavior

Warning

If the extracted elements depend on variables or formulas from the original component or page, these connections will break after extraction. You will need to rearrange these dependencies.