Shared components

A navbar, a footer, a pricing card: most designs repeat the same pieces across pages. Shared components make those pieces first-class: a component is defined once, used on any number of pages, and edited in one place, with every page updating together.

What a component is

A shared component is a real, self-contained web component in your project: its markup, styles, and a set of props (the text, images, and links each usage can customize) live in one source file. Pages reference it instead of carrying their own copy, so there is exactly one truth for what a navbar looks like.

Creating and using components

Ask for one in the design chat ("make the navbar a shared component and use it on every page") or let Modus propose them during generation: repeated structures naturally become components rather than near-identical copies. Components appear on the canvas alongside pages, each with its own card.

Props & variants

• Props are the per-usage knobs: the logo image, the CTA label, the links. Change a prop on one page without touching the others.
• Variants are named looks of the same component: a light and a dark navbar, a compact and an expanded footer. Each usage picks its variant, and style or text edits you make while a variant is active scope to that variant only.

Editing flows back

Edit a component the same way you edit a page: click into it in the visual editor and change text, styles, images, or structure directly. The edit persists into the component's source, not the page you happened to be viewing, so every page using the component picks it up, including previews that are already open.

Composition

Components can use other components: a header component can contain the button component. Modus resolves the dependencies automatically when a page loads; the one rule is no cycles (a component cannot contain itself, directly or through another).