Create and reuse a component

Turn a repeated element into a main component, then place linked instances on a page. Changes to the main component reach its instances while respecting their overrides.

Before you start

Work on Primary in a local page. Have a small frame or stack containing text, such as a card, ready to reuse. Select that element rather than the outer page root.

Create and insert

1. Select the element in Layers. Give it a descriptive name, such as Info card.
2. Open Components and choose Create component from selection. MODO uses the selected element to create the main component and leaves an instance in its place.
3. Open the component with Open Info card in Components. Confirm the Main component indicator before editing.
4. Change the main component's padding or text color. Return to the page through Pages and inspect the instance.
5. Select the page container where another card should go. In Components, choose Insert Info card. You now have another linked instance.

Customize an instance with a prop

A prop is a field the main component exposes for each instance to customize.

1. Open the main component. In Components → Props, choose Add prop. Set Prop name to label, keep Type as Text, and enter a Default such as A thoughtful detail.
2. Select the main component's text layer. In Design, open the ring-shaped Link control beside Text and select label under Component props. The text now reads from that prop.
3. Return to the page and select one card instance. In Design, find its Instance properties and change label.
4. Check the other instance. It should keep its own value or the component default.

Use the reset control for a prop to return to its default. Detach instance converts an instance to ordinary nodes, ending its link to the component.

Check your result

A shared design change appears in both cards, while a customized text prop affects only the selected instance.

Common problems

• An internal layer cannot be edited directly: edit the main component or expose the field as a prop.
• Component creation is blocked on Mobile: return to Primary for component-definition changes.
• A component cannot be inserted: check that you are not inserting it into itself.
• Deleting the main component warns about instances: the listed instances become plain nodes. Review the effect before confirming.

Related guides

• Control spacing and sizing
• Use tokens for reusable colors