Components overview

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

Components give you the power to create customizable blocks from 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.

How to create a component

You can create a component from an element or group of elements, and choose if each instance is identical across your site or allows changes to its content, layout, or style:

• 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 props and slots.
• Different style 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 style variants let you customize the design of each instance without needing to create separate components.

To create a component:

1. Select the element you want to turn into a component
2. Open the Components panel, Style panel or Element settings panel
3. Click the “create component” icon at the top of the panel
4. Give your component a name and optional description and click Create

You can also duplicate an existing component by selecting the component, clicking the “more options” dots, and choosing Duplicate.

You’ll be inside the main component after you’ve created a component — meaning any changes to the main component update across all instances of that component. At any time, you can enter the main component on any component instance by:

• Double-clicking the component instance
• Right-clicking the instance and clicking Edit component
• Selecting the instance and clicking the “pencil” icon in the label
• Selecting the instance and clicking the “wrench” icon in the top-right of the right panel

Learn more about editing the main component. 

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. Click and drag the desired component to any page in your site
4. Drop the component instance directly on the canvas or into the 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.  

You can double-click a component to enter the main component and view the component’s element hierarchy in the Navigator panel. 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 walk 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

To make the same changes across all instances of a component, you’ll need to edit the main component. You can edit the main component on any component instance by:

• Double-clicking the component instance
• Right-clicking the instance and clicking Edit component
• Selecting the instance and clicking the “pencil” icon in the label
• Selecting the instance and clicking the “wrench” icon in the top-right of the right panel

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. 

For example, you might have a card design that’s set up as a component. The card component contains a heading element, a paragraph element, and a button element — with the button element placed at the very bottom of the card. If you edit the main component of the card and move the button from the bottom of the card to the top, that change will affect all instances of the card component across your site.

Component props, slots, and style 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.
• Style variants — define multiple design options for a single component, allowing you to adapt its appearance for different use cases. For example, you can offer style 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. Go to the Style panel
3. Click the “component variants” icon in the Style selector
4. Click the “plus” icon
5. Give the variant a unique name
6. Press the Enter/Return key on your keyboard to confirm

Once you’ve created a component variant, it’ll automatically inherit the base variant's styles. You can adjust the styles on any element within the component without affecting the base variant. For example, if your base component has three cards in a horizontal layout using flex, you could create a vertical layout variant by changing the flex direction to vertical. You can then choose which variant to use for each instance of your component.

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 Props panel.

To change the name of the variant prop:

1. Edit the main component
2. Go to the Props panel
3. Click the Variant property
4. Enter a unique property name
5. Press the Enter/Return key on your keyboard to confirm

To add the variant prop to a property group:

1. Edit the main component
2. Go to the Props 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 Enter/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. Go to the Props 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 Props panel
2. Choose the variant for this instance from the Variants dropdown

Reorder, rename, duplicate, or delete component style variants

In design mode, you 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. Go to the Style panel
3. Click the “component variants” icon in the Style selector
4. Click and drag a variant to move it to a new position

To rename a variant:

1. Edit the main component
2. Go to the Style panel
3. Click the “component variants” icon in the Style selector
4. Hover over the variant and click the “more options” icon
5. Click Rename
6. Enter a new, unique variant name
7. Press the Enter/Return key on your keyboard to confirm

To duplicate a variant:

1. Edit the main component
2. Go to the Style panel
3. Click the “component variants” icon in the Style selector
4. Hover over the variant and click the “more options” icon
5. Click Duplicate
6. Enter a new, unique variant name
7. Press the Enter/Return key on your keyboard to confirm

To delete a variant:

1. Edit the main component
2. Go to the Style panel
3. Click the “component variants” icon in the Style selector
4. Hover over the variant and click the “more options” icon
5. Click Delete
6. Click Delete in the pop-up modal to confirm

Exit the main component

Once you’re done editing the main component, you can exit the main component by:

• Clicking the “back” arrow at the upper-left corner of the Designer
• Clicking outside the component on the canvas 
• 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.

Edit components in the Editor

If you’ve invited content editors to update your site’s content in the Editor, any changes they make to component elements that are not modified with a component property and are consistent across all instances, will apply to all other instances.

Alternatively, if the content editor makes changes to component elements that are modified via a component property, those changes will only apply to the component instance they’re editing.

Change a component name or description

To change a component name or description: 

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

Group components

To organize your components into groups:

1. Open the Components panel
2. Hover over a component name and click the “more options” dots that appear
3. Choose Edit settings
4. Choose an existing group from the Group dropdown, or type to create a new group

To rename or ungroup a component group, hover over the group title and click the “more options” dots.

Delete a component

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 components across sites with Libraries

You can share 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.