docs: Add Reference Designator (RefDes) to <footprint />

docs/elements/footprint.mdx

@@ -92,3 +92,93 @@ export default () => (
   </board>
 )
 `} />
+
+
+## Reference Designator 
+
+You can use `{NAME}`, `{REF}`, or `{REFERENCE}` in the `text` property of a [`<silkscreentext />`](../footprints/silkscreentext.mdx) element within a footprint. When the PCB is rendered, these variables are automatically replaced with the name (reference designator) of the component.
+
+This is the standard way to label components on the silkscreen layer.
+
+<CircuitPreview
+  hideSchematicTab
+  defaultView="pcb"
+  code={`
+export default () => (
+  <board width="30mm" height="30mm">
+    <chip
+      name="U1"
+      pcbX={0}
+      pcbY={0}
+      footprint={
+        <footprint>
+          <silkscreentext
+            text="{NAME}"
+            pcbX={0}
+            pcbY={4}
+            fontSize="1mm"
+          />
+           <platedhole
+            portHints={["4"]}
+            pcbX="3.2499299999998357mm"
+            pcbY="-2.249932000000058mm"
+            outerDiameter="1.9999959999999999mm"
+            holeDiameter="1.3000228mm"
+            shape="circle"
+          />
+          <platedhole
+            portHints={["2"]}
+            pcbX="3.2499299999998357mm"
+            pcbY="2.249932000000058mm"
+            outerDiameter="1.9999959999999999mm"
+            holeDiameter="1.3000228mm"
+            shape="circle"
+          />
+          <platedhole
+            portHints={["1"]}
+            pcbX="-3.2499299999999494mm"
+            pcbY="2.249932000000058mm"
+            outerDiameter="1.9999959999999999mm"
+            holeDiameter="1.3000228mm"
+            shape="circle"
+          />
+          <platedhole
+            portHints={["3"]}
+            pcbX="-3.2499299999999494mm"
+            pcbY="-2.249932000000058mm"
+            outerDiameter="1.9999959999999999mm"
+            holeDiameter="1.3000228mm"
+            shape="circle"
+          />
+          <silkscreenpath
+            route={[
+              { x: -2.2743160000001126, y: -2.999994000000015 },
+              { x: 2.274315999999999, y: -2.999994000000015 },
+            ]}
+          />
+          <silkscreenpath
+            route={[
+              { x: -2.999994000000129, y: 1.0999978000000965 },
+              { x: -2.999994000000129, y: -0.999998000000005 },
+            ]}
+          />
+          <silkscreenpath
+            route={[
+              { x: 3.0999937999998792, y: 1.0279888000000028 },
+              { x: 3.0999937999998792, y: -1.0999977999999828 },
+            ]}
+          />
+          <silkscreenpath
+            route={[
+              { x: -1.99999600000001, y: 2.999994000000015 },
+              { x: 2.274315999999999, y: 2.999994000000015 },
+            ]}
+          />
+
+            </footprint>
+      }
+    />
+  </board>
+)
+  `}
+/>