diff --git a/apps/wing-console/console/app/demo/main.w b/apps/wing-console/console/app/demo/main.w
index d6cb57b78a7..5726030f5c0 100644
--- a/apps/wing-console/console/app/demo/main.w
+++ b/apps/wing-console/console/app/demo/main.w
@@ -176,7 +176,14 @@ class WidgetService {
       "Total widgets",
       inflight () => { return this.countWidgets(); },
       refreshRate: 5s,
-    );
+    ) as "TotalWidgets";
+
+    // a link field displays a clickable link
+    new ui.Field(
+      "Widgets Link",
+      inflight () => { return "https://winglang.io"; },
+      link: true,
+    ) as "WidgetsLink";
 
     // a button lets you invoke any inflight function
     new ui.Button("Add widget", inflight () => { this.addWidget(); });
diff --git a/apps/wing-console/console/ui/src/ui/custom-resource-item.tsx b/apps/wing-console/console/ui/src/ui/custom-resource-item.tsx
index dddeec33179..81f1dce8e56 100644
--- a/apps/wing-console/console/ui/src/ui/custom-resource-item.tsx
+++ b/apps/wing-console/console/ui/src/ui/custom-resource-item.tsx
@@ -42,6 +42,7 @@ export const CustomResourceUiItem = ({ item }: { item: UIComponent }) => {
         <CustomResourceUiFieldItem
           label={uiComponent.label}
           handlerPath={uiComponent.handler}
+          link={uiComponent.link}
         />
       )}
       {uiComponent.kind === "button" && (
diff --git a/apps/wing-console/console/ui/src/ui/custom-resource-ui-field.tsx b/apps/wing-console/console/ui/src/ui/custom-resource-ui-field.tsx
index 5534b87910d..29114c8f899 100644
--- a/apps/wing-console/console/ui/src/ui/custom-resource-ui-field.tsx
+++ b/apps/wing-console/console/ui/src/ui/custom-resource-ui-field.tsx
@@ -1,15 +1,18 @@
 import { Attribute } from "@wingconsole/design-system";
+import { Link } from "@wingconsole/design-system";
 
 import { trpc } from "../services/trpc.js";
 
 export interface CustomResourceUiFieldItemProps {
   label: string;
   handlerPath: string;
+  link: boolean;
 }
 
 export const CustomResourceUiFieldItem = ({
   label,
   handlerPath,
+  link,
 }: CustomResourceUiFieldItemProps) => {
   const field = trpc["uiField.get"].useQuery(
     {
@@ -17,5 +20,14 @@ export const CustomResourceUiFieldItem = ({
     },
     { enabled: !!handlerPath },
   );
-  return <Attribute name={label} value={field.data?.value ?? ""} />;
+  const fieldValue = field.data?.value ?? "";
+  return (
+    <Attribute name={label} value={link ? undefined : fieldValue}>
+      {link && (
+        <Link id={label} href={fieldValue} target="_blank">
+          {fieldValue}
+        </Link>
+      )}
+    </Attribute>
+  );
 };