After structuring and styling elements, you will quickly need to reuse them across multiple screens. Reusable Components allow you to turn any structured section into a single, modular building block. This process is the first, essential step toward efficient, scalable design in Shipcode.

The Principle of Component Reusability

A Reusable Component (sometimes called a Custom Component) is a saved blueprint of a structured and styled interface element.

• Efficiency: You build it once and use it everywhere in your project.
• Consistency: Every instance of the component adheres to the same look and behavior.
• Centralized Control: When you update the original master version of the component, every instance across your entire project updates automatically.

Creating a Reusable Component

Convert a highly structured element, such as a View that groups multiple Text and Image components, into a Reusable Component.

• Select the Parent Element Open the Structure Panel and select the top-level View Component you wish to convert—the element that acts as a container for all the children you want to group.
• Convert to Component
• • Right-click on the selected component in the Structure Panel.
  • Select Convert to Component.

• A modal will prompt you to name the new Reusable Component (e.g., "CustomHeader" or "CallToAction").
• Click Save.

The original element on your Layout is now an instance of your new component. It will appear with a unique icon in the Structure Panel and is now added to your component library in the Component Panel under Reusable Components.

📍📍📍 Note 📍📍📍

When you convert an element, Shipcode automatically opens a new editing window for the master version of your Reusable Component. Any change you make in this master window instantly applies to every instance of the component throughout your project.

Using the New Component

Once a component is saved, you can treat it just like a basic Text or View component.

1. Open a New Layout Navigate to any other Layout in your project.
2. Locate the Component Open the Component Panel on the left and find your new component listed under Reusable Components.
3. Add to Canvas Drag the new component from the Component Panel onto your Layout's Canvas.

You have now created a second instance of the component. To test its centralized control, double-click the component instance on the Canvas to jump to the master version and change a style (like the border color). Both instances of the component will update instantly.

Overrides

You may notice that all instances of your new component display the exact same content. To make them truly flexible (e.g., to have different text or images on each instance), you need the ability to change the content or styling on one instance without changing the master blueprint. This is accomplished using Overrides.

Mastering Overrides is the focus of the next-level training (Design & Layout 201), as it introduces new concepts necessary for building dynamic and flexible interfaces.