diff --git a/ui/package-lock.json b/ui/package-lock.json
index 04eae9f83cc6..9e8b5922bb9e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@prefecthq/ui",
       "version": "2.8.0",
       "dependencies": {
-        "@prefecthq/prefect-design": "2.7.16",
+        "@prefecthq/prefect-design": "2.12.1",
         "@prefecthq/prefect-ui-library": "2.9.13",
         "@prefecthq/vue-charts": "2.0.3",
         "@prefecthq/vue-compositions": "1.11.4",
@@ -510,6 +510,73 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.5.tgz",
+      "integrity": "sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@floating-ui/utils": "^0.2.8",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@fontsource-variable/inconsolata": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.1.0.tgz",
+      "integrity": "sha512-ZijDHmf182b65LHGtCwcuNi4iq1k1FDBYSrWJvLkZfISWPSv5ODUS4f1T6jgdQvDCUW+fgh4dZoaVaO2CPJJ4g=="
+    },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz",
+      "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg=="
+    },
     "node_modules/@heroicons/vue": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.17.tgz",
@@ -551,6 +618,22 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
+      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -812,10 +895,12 @@
       }
     },
     "node_modules/@prefecthq/prefect-design": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/@prefecthq/prefect-design/-/prefect-design-2.7.16.tgz",
-      "integrity": "sha512-iaZy4yZ6CNgjnaJkBkUZ9xIfSVpaAgxK44m3Ylk5+bW+rh1/6sDaWCOX/AKYD3ydhDM7nNlM9SRqMiOqgSu/VA==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/@prefecthq/prefect-design/-/prefect-design-2.12.1.tgz",
+      "integrity": "sha512-YB8wRlLQmByVahWnPJpoCQSDvGzhItplnIiZo0A9MjLhx4XY4iYWUsRdeywxtQpsfp3sHHYs9EIACPFcj4NxBA==",
       "dependencies": {
+        "@fontsource-variable/inconsolata": "^5.0.18",
+        "@fontsource-variable/inter": "^5.0.18",
         "@heroicons/vue": "2.0.17",
         "@tailwindcss/aspect-ratio": "^0.4.0",
         "@tailwindcss/forms": "^0.5.0",
@@ -824,15 +909,16 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "date-fns": "3.6.0",
-        "dompurify": "3.1.0",
-        "highlight.js": "11.9.0",
+        "dompurify": "3.1.6",
+        "highlight.js": "11.10.0",
         "lodash.debounce": "4.0.8",
         "marked": "4.3.0",
-        "tailwind-merge": "^2.3.0"
+        "radix-vue": "1.9.2",
+        "tailwindcss-animate": "^1.0.7"
       },
       "peerDependencies": {
         "@prefecthq/vue-compositions": "^1.11.0",
-        "vue": "^3.4.4",
+        "vue": "^3.4.27",
         "vue-router": "^4.1.6"
       }
     },
@@ -1132,6 +1218,14 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -1165,6 +1259,30 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz",
+      "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.10.8.tgz",
+      "integrity": "sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -1258,6 +1376,11 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
@@ -1685,6 +1808,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
       "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -1794,6 +2000,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -2715,6 +2932,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
+    },
     "node_modules/delaunator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
@@ -2775,9 +2997,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.0.tgz",
-      "integrity": "sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA=="
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
     },
     "node_modules/earcut": {
       "version": "2.2.4",
@@ -3346,8 +3568,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
@@ -3827,9 +4048,9 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
-      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
       "engines": {
         "node": ">=12.0.0"
       }
@@ -5433,6 +5654,44 @@
         }
       ]
     },
+    "node_modules/radix-vue": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.2.tgz",
+      "integrity": "sha512-XXwEMmXJmzcy9SebywbQdrZg8UE1jueqPMpxKK6NoquRC0CP4dvlBcuzp4lDWNSsqOgmkXa6CNbwEzdCX96umg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7",
+        "@floating-ui/vue": "^1.1.0",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.8.1",
+        "@vueuse/core": "^10.11.0",
+        "@vueuse/shared": "^10.11.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.7"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/radix-vue/node_modules/nanoid": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5883,18 +6142,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
-      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
-      "dependencies": {
-        "@babel/runtime": "^7.24.1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
@@ -5931,6 +6178,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
@@ -6104,8 +6359,7 @@
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-      "dev": true
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -6823,6 +7077,56 @@
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true
     },
+    "@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "requires": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
+    "@floating-ui/vue": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.5.tgz",
+      "integrity": "sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.0",
+        "@floating-ui/utils": "^0.2.8",
+        "vue-demi": ">=0.13.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
+    "@fontsource-variable/inconsolata": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.1.0.tgz",
+      "integrity": "sha512-ZijDHmf182b65LHGtCwcuNi4iq1k1FDBYSrWJvLkZfISWPSv5ODUS4f1T6jgdQvDCUW+fgh4dZoaVaO2CPJJ4g=="
+    },
+    "@fontsource-variable/inter": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz",
+      "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg=="
+    },
     "@heroicons/vue": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.17.tgz",
@@ -6852,6 +7156,22 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "@internationalized/date": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
+      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -7069,10 +7389,12 @@
       }
     },
     "@prefecthq/prefect-design": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/@prefecthq/prefect-design/-/prefect-design-2.7.16.tgz",
-      "integrity": "sha512-iaZy4yZ6CNgjnaJkBkUZ9xIfSVpaAgxK44m3Ylk5+bW+rh1/6sDaWCOX/AKYD3ydhDM7nNlM9SRqMiOqgSu/VA==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/@prefecthq/prefect-design/-/prefect-design-2.12.1.tgz",
+      "integrity": "sha512-YB8wRlLQmByVahWnPJpoCQSDvGzhItplnIiZo0A9MjLhx4XY4iYWUsRdeywxtQpsfp3sHHYs9EIACPFcj4NxBA==",
       "requires": {
+        "@fontsource-variable/inconsolata": "^5.0.18",
+        "@fontsource-variable/inter": "^5.0.18",
         "@heroicons/vue": "2.0.17",
         "@tailwindcss/aspect-ratio": "^0.4.0",
         "@tailwindcss/forms": "^0.5.0",
@@ -7081,11 +7403,12 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "date-fns": "3.6.0",
-        "dompurify": "3.1.0",
-        "highlight.js": "11.9.0",
+        "dompurify": "3.1.6",
+        "highlight.js": "11.10.0",
         "lodash.debounce": "4.0.8",
         "marked": "4.3.0",
-        "tailwind-merge": "^2.3.0"
+        "radix-vue": "1.9.2",
+        "tailwindcss-animate": "^1.0.7"
       },
       "dependencies": {
         "date-fns": {
@@ -7271,6 +7594,14 @@
       "dev": true,
       "optional": true
     },
+    "@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -7296,6 +7627,19 @@
         "postcss-selector-parser": "6.0.10"
       }
     },
+    "@tanstack/virtual-core": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz",
+      "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA=="
+    },
+    "@tanstack/vue-virtual": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.10.8.tgz",
+      "integrity": "sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ==",
+      "requires": {
+        "@tanstack/virtual-core": "3.10.8"
+      }
+    },
     "@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -7389,6 +7733,11 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
@@ -7689,6 +8038,46 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
       "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ=="
     },
+    "@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="
+    },
+    "@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "requires": {
+        "vue-demi": ">=0.14.8"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -7768,6 +8157,14 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "array-buffer-byte-length": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -8395,6 +8792,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
+    },
     "delaunator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
@@ -8443,9 +8845,9 @@
       }
     },
     "dompurify": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.0.tgz",
-      "integrity": "sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA=="
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
     },
     "earcut": {
       "version": "2.2.4",
@@ -8885,8 +9287,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.3.1",
@@ -9223,9 +9624,9 @@
       "dev": true
     },
     "highlight.js": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
-      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ=="
     },
     "html-encoding-sniffer": {
       "version": "4.0.0",
@@ -10352,6 +10753,31 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "radix-vue": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.2.tgz",
+      "integrity": "sha512-XXwEMmXJmzcy9SebywbQdrZg8UE1jueqPMpxKK6NoquRC0CP4dvlBcuzp4lDWNSsqOgmkXa6CNbwEzdCX96umg==",
+      "requires": {
+        "@floating-ui/dom": "^1.6.7",
+        "@floating-ui/vue": "^1.1.0",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.8.1",
+        "@vueuse/core": "^10.11.0",
+        "@vueuse/shared": "^10.11.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.7"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "5.0.7",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+          "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ=="
+        }
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10665,14 +11091,6 @@
         "tslib": "^2.5.0"
       }
     },
-    "tailwind-merge": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
-      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
-      "requires": {
-        "@babel/runtime": "^7.24.1"
-      }
-    },
     "tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
@@ -10713,6 +11131,12 @@
         }
       }
     },
+    "tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "requires": {}
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -10834,8 +11258,7 @@
     "tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-      "dev": true
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "type-check": {
       "version": "0.4.0",
diff --git a/ui/package.json b/ui/package.json
index 2a2346a679e9..ea9d6933824b 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,7 +10,7 @@
     "validate:types": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@prefecthq/prefect-design": "2.7.16",
+    "@prefecthq/prefect-design": "2.12.1",
     "@prefecthq/prefect-ui-library": "2.9.13",
     "@prefecthq/vue-charts": "2.0.3",
     "@prefecthq/vue-compositions": "1.11.4",