A <components> block at the top of the document holds all component definitions. Instances reference a component by id and pass prop overrides as attributes.

components

tagcomponent system

A <components> block at the top of the document holds all component definitions. Instances reference a component by id and pass prop overrides as attributes.

<component> defines a single reusable component. <component-set> groups related variants. Each <variant> is a member of the set.

Declared props use a <props> block with <prop> entries. Ad-hoc overrides skip the props block and match by sanitized layer name.

Attr	Type	Description
`text`	`prop type`	Overrides value attr of the target layer.
`visible`	`prop type`	Hides target when set to "false".

Component + instance

<components>
  <component name="Card/Product" id="comp-card">
    <props>
      <prop name="title" type="text" target="title" />
    </props>
    <col w="320" radius="12" fill="#fff" p="16" gap="8">
      <text id="title" value="Product Name" font-size="16" font-weight="600" />
    </col>
  </component>
</components>

<instance component="comp-card" title="Nike Air Max 90" x="24" y="120" />