diff --git a/package.json b/package.json
index 67d8f2054..f6ea83107 100644
--- a/package.json
+++ b/package.json
@@ -44,15 +44,13 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.1",
     "@floating-ui/react": "^0.27.19",
     "@kapaai/react-sdk": "^0.9.10",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@octokit/graphql": "^9.0.3",
     "@phosphor-icons/react": "^2.1.10",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@sentry/browser": "^10.47.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f3c870b02..53a7be008 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
 
   .:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.7.0
+        version: 1.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@fingerprintjs/fingerprintjs-pro-react':
         specifier: ^2.7.1
         version: 2.7.1
@@ -39,15 +42,6 @@ importers:
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.16
-        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.8
-        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@react-three/drei':
         specifier: ^10.7.7
         version: 10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)
@@ -531,6 +525,33 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@braintree/sanitize-url@7.1.2':
     resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
 
@@ -1264,15 +1285,27 @@ packages:
   '@floating-ui/core@1.7.5':
     resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
   '@floating-ui/dom@1.7.6':
     resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
 
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
   '@floating-ui/react-dom@2.1.8':
     resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/react@0.27.19':
     resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
     peerDependencies:
@@ -1282,6 +1315,9 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@google/model-viewer@4.2.0':
     resolution: {integrity: sha512-RjpAI5cLs9CdvPcMRsOs8Bea/lNmGTTyaPyl16o9Fv6Qn8VSpgBMmXFr/11yb0hTrsojp2dOACEcY77R8hVUVA==}
     engines: {node: '>=6.0.0'}
@@ -2349,32 +2385,6 @@ packages:
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.1.7':
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -2406,15 +2416,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-dismissable-layer@1.1.11':
     resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
@@ -2428,19 +2429,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.16':
-    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-focus-guards@1.1.3':
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
@@ -2472,32 +2460,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-menu@2.1.16':
-    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.2.8':
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -2550,19 +2512,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.11':
-    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -2581,19 +2530,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-tooltip@1.2.8':
-    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -2639,40 +2575,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.3':
-    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
   '@react-three/drei@10.7.7':
     resolution: {integrity: sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==}
     peerDependencies:
@@ -5996,6 +5898,9 @@ packages:
     resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
     engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
 
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
   resend@6.10.0:
     resolution: {integrity: sha512-i7CwZpYj4Oho1RxsTpLcCUkO08+HiL4NXrm6jLJ2WzJ89UGI8eROSieLONJA3hnUrf1OYnCyfq5F6POnHUMv1Q==}
     engines: {node: '>=20'}
@@ -7062,6 +6967,29 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@base-ui/react@1.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@base-ui/utils': 0.3.2(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@base-ui/utils@0.3.2(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@braintree/sanitize-url@7.1.2': {}
 
   '@chevrotain/cst-dts-gen@11.1.2':
@@ -7510,17 +7438,32 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/dom@1.7.6':
     dependencies:
       '@floating-ui/core': 1.7.5
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/react-dom@2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@floating-ui/dom': 1.7.6
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   '@floating-ui/react@0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -7531,6 +7474,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@floating-ui/utils@0.2.12': {}
+
   '@google/model-viewer@4.2.0(three@0.183.2)':
     dependencies:
       '@monogrid/gainmap-js': 3.4.0(three@0.183.2)
@@ -8423,27 +8368,6 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -8478,12 +8402,6 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.3)':
-    dependencies:
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -8497,21 +8415,6 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -8536,50 +8439,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -8618,23 +8477,6 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
@@ -8649,26 +8491,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -8703,31 +8525,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.3)':
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/rect@1.1.1': {}
-
   '@react-three/drei@10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12280,6 +12077,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  reselect@5.2.0: {}
+
   resend@6.10.0:
     dependencies:
       postal-mime: 2.7.4
diff --git a/src/components/AuthenticatedUserMenu.tsx b/src/components/AuthenticatedUserMenu.tsx
index d5a2d2aa4..6a0310a1e 100644
--- a/src/components/AuthenticatedUserMenu.tsx
+++ b/src/components/AuthenticatedUserMenu.tsx
@@ -37,54 +37,64 @@ export function AuthenticatedUserMenu({
 }: AuthenticatedUserMenuProps) {
   return (
     <Dropdown>
-      <DropdownTrigger>
-        <div className="flex items-center gap-1 cursor-pointer h-[26px]">
-          <Avatar
-            image={user?.image}
-            oauthImage={user?.oauthImage}
-            name={user?.name}
-            email={user?.email}
-            size="xs"
-            className="w-[26px] h-[26px]"
-          />
-          <CaretDownIcon className="w-3 h-3 opacity-50" />
-        </div>
-      </DropdownTrigger>
+      <DropdownTrigger
+        render={
+          <div className="flex items-center gap-1 cursor-pointer h-[26px]">
+            <Avatar
+              image={user?.image}
+              oauthImage={user?.oauthImage}
+              name={user?.name}
+              email={user?.email}
+              size="xs"
+              className="w-[26px] h-[26px]"
+            />
+            <CaretDownIcon className="w-3 h-3 opacity-50" />
+          </div>
+        }
+      />
       <DropdownContent align="end">
         <div className="px-2 py-1.5 text-xs text-gray-500 dark:text-gray-400">
           {user?.email}
         </div>
         <DropdownSeparator />
-        <DropdownItem asChild>
-          <Link to="/account" className="flex items-center gap-2">
-            <GearIcon className="w-4 h-4" />
-            <span>Account</span>
-          </Link>
-        </DropdownItem>
-        <DropdownItem asChild>
-          <Link to="/account/submissions" className="flex items-center gap-2">
-            <SparkleIcon className="w-4 h-4" />
-            <span>My Showcases</span>
-          </Link>
-        </DropdownItem>
-        {canApiKeys && (
-          <DropdownItem asChild>
-            <Link
-              to="/account/integrations"
-              className="flex items-center gap-2"
-            >
-              <KeyIcon className="w-4 h-4" />
-              <span>Integrations</span>
+        <DropdownItem
+          render={
+            <Link to="/account" className="flex items-center gap-2">
+              <GearIcon className="w-4 h-4" />
+              <span>Account</span>
             </Link>
-          </DropdownItem>
+          }
+        />
+        <DropdownItem
+          render={
+            <Link to="/account/submissions" className="flex items-center gap-2">
+              <SparkleIcon className="w-4 h-4" />
+              <span>My Showcases</span>
+            </Link>
+          }
+        />
+        {canApiKeys && (
+          <DropdownItem
+            render={
+              <Link
+                to="/account/integrations"
+                className="flex items-center gap-2"
+              >
+                <KeyIcon className="w-4 h-4" />
+                <span>Integrations</span>
+              </Link>
+            }
+          />
         )}
         {canAdmin && (
-          <DropdownItem asChild>
-            <Link to="/admin" className="flex items-center gap-2">
-              <LockIcon className="w-4 h-4" />
-              <span>Admin</span>
-            </Link>
-          </DropdownItem>
+          <DropdownItem
+            render={
+              <Link to="/admin" className="flex items-center gap-2">
+                <LockIcon className="w-4 h-4" />
+                <span>Admin</span>
+              </Link>
+            }
+          />
         )}
         <DropdownSeparator />
         <DropdownItem onSelect={onSignOut}>
diff --git a/src/components/AvatarCropModal.tsx b/src/components/AvatarCropModal.tsx
index 47772969c..1d625ae04 100644
--- a/src/components/AvatarCropModal.tsx
+++ b/src/components/AvatarCropModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import Cropper from 'react-easy-crop'
 import type { Area, Point } from 'react-easy-crop'
 import { XIcon } from '@phosphor-icons/react'
@@ -107,17 +107,17 @@ export function AvatarCropModal({
   }, [open])
 
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
-        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[1000] w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-6 shadow-xl">
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
+        <Dialog.Popup className="fixed left-1/2 top-1/2 z-[1000] w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-6 shadow-xl">
           <div className="flex items-center justify-between mb-4">
-            <DialogPrimitive.Title className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            <Dialog.Title className="text-lg font-semibold text-gray-900 dark:text-gray-100">
               Crop Profile Picture
-            </DialogPrimitive.Title>
-            <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
+            </Dialog.Title>
+            <Dialog.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
               <XIcon className="w-5 h-5 text-gray-500" />
-            </DialogPrimitive.Close>
+            </Dialog.Close>
           </div>
 
           <div className="relative w-full aspect-square bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden">
@@ -169,8 +169,8 @@ export function AvatarCropModal({
               {isProcessing ? 'Processing...' : 'Save'}
             </Button>
           </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }
diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
index 4400ee29a..9c22978cd 100644
--- a/src/components/BlogAuthorFilter.tsx
+++ b/src/components/BlogAuthorFilter.tsx
@@ -34,46 +34,48 @@ export function BlogAuthorFilter({
   return (
     <div className={twMerge('w-full', className)}>
       <Dropdown>
-        <DropdownTrigger>
-          <button
-            type="button"
-            className={twMerge(
-              'relative w-full flex items-center gap-2 rounded-md py-1.5 px-2 text-left text-sm cursor-pointer transition-colors',
-              'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
-              activeAuthor
-                ? 'bg-blue-50 dark:bg-blue-950/40 ring-1 ring-blue-500/50 text-blue-700 dark:text-blue-200'
-                : 'hover:bg-gray-500/10',
-            )}
-          >
-            <span
+        <DropdownTrigger
+          render={
+            <button
+              type="button"
               className={twMerge(
-                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden shrink-0',
-                activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
+                'relative w-full flex items-center gap-2 rounded-md py-1.5 px-2 text-left text-sm cursor-pointer transition-colors',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+                activeAuthor
+                  ? 'bg-blue-50 dark:bg-blue-950/40 ring-1 ring-blue-500/50 text-blue-700 dark:text-blue-200'
+                  : 'hover:bg-gray-500/10',
               )}
             >
-              <img
-                height={20}
-                width={20}
-                src={
-                  activeAuthor
-                    ? getAuthorAvatar(activeAuthor)
-                    : authorFallbackAvatar
-                }
-                alt=""
-                className="w-full h-full object-cover"
-              />
-            </span>
-            <span className="truncate font-medium flex-1">
-              {activeAuthor ?? 'All authors'}
-            </span>
-            <span className="flex items-center pr-1">
-              <CaretUpDownIcon
-                className="h-4 w-4 opacity-40"
-                aria-hidden="true"
-              />
-            </span>
-          </button>
-        </DropdownTrigger>
+              <span
+                className={twMerge(
+                  'flex items-center justify-center w-6 h-6 rounded border overflow-hidden shrink-0',
+                  activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
+                )}
+              >
+                <img
+                  height={20}
+                  width={20}
+                  src={
+                    activeAuthor
+                      ? getAuthorAvatar(activeAuthor)
+                      : authorFallbackAvatar
+                  }
+                  alt=""
+                  className="w-full h-full object-cover"
+                />
+              </span>
+              <span className="truncate font-medium flex-1">
+                {activeAuthor ?? 'All authors'}
+              </span>
+              <span className="flex items-center pr-1">
+                <CaretUpDownIcon
+                  className="h-4 w-4 opacity-40"
+                  aria-hidden="true"
+                />
+              </span>
+            </button>
+          }
+        />
         <DropdownContent
           align="start"
           className="max-h-80 overflow-auto min-w-[16rem]"
diff --git a/src/components/BrandContextMenu.tsx b/src/components/BrandContextMenu.tsx
index 2f7bbbf2c..3599cadb9 100644
--- a/src/components/BrandContextMenu.tsx
+++ b/src/components/BrandContextMenu.tsx
@@ -61,18 +61,21 @@ export function BrandContextMenu({ children, ...rest }: BrandContextMenuProps) {
     <div onContextMenu={onContextMenu} {...rest}>
       {children}
       <Dropdown open={open} onOpenChange={setOpen} modal>
-        <DropdownTrigger asChild={false}>
-          <span
-            ref={virtualTriggerRef}
-            style={{
-              position: 'fixed',
-              left: coords.x,
-              top: coords.y,
-              width: 1,
-              height: 1,
-            }}
-          />
-        </DropdownTrigger>
+        <DropdownTrigger
+          nativeButton={false}
+          render={
+            <span
+              ref={virtualTriggerRef}
+              style={{
+                position: 'fixed',
+                left: coords.x,
+                top: coords.y,
+                width: 1,
+                height: 1,
+              }}
+            />
+          }
+        />
         <DropdownContent
           sideOffset={4}
           align="start"
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 6a5974f66..d84222cd5 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -48,34 +48,41 @@ export function Breadcrumbs({
         )}
         {showTocToggle && (
           <Dropdown>
-            <DropdownTrigger>
-              <button
-                className={twMerge(
-                  hiddenClass,
-                  'whitespace-nowrap inline-flex items-center gap-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors cursor-pointer',
-                )}
-              >
-                <span>On this page</span>
-                <CaretDownIcon className="w-3.5 h-3.5" />
-              </button>
-            </DropdownTrigger>
+            <DropdownTrigger
+              render={
+                <button
+                  className={twMerge(
+                    hiddenClass,
+                    'whitespace-nowrap inline-flex items-center gap-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors cursor-pointer',
+                  )}
+                >
+                  <span>On this page</span>
+                  <CaretDownIcon className="w-3.5 h-3.5" />
+                </button>
+              }
+            />
             <DropdownContent align="end" sideOffset={8} className={hiddenClass}>
               {headings.map((heading) => (
-                <DropdownItem key={`breadcrumb-toc-${heading.id}`} asChild>
-                  <Link
-                    to="."
-                    hash={heading.id}
-                    style={{
-                      paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
-                    }}
-                    resetScroll={false}
-                    hashScrollIntoView={{
-                      behavior: 'smooth',
-                    }}
-                  >
-                    <span dangerouslySetInnerHTML={{ __html: heading.text }} />
-                  </Link>
-                </DropdownItem>
+                <DropdownItem
+                  key={`breadcrumb-toc-${heading.id}`}
+                  render={
+                    <Link
+                      to="."
+                      hash={heading.id}
+                      style={{
+                        paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
+                      }}
+                      resetScroll={false}
+                      hashScrollIntoView={{
+                        behavior: 'smooth',
+                      }}
+                    >
+                      <span
+                        dangerouslySetInnerHTML={{ __html: heading.text }}
+                      />
+                    </Link>
+                  }
+                />
               ))}
             </DropdownContent>
           </Dropdown>
diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index c30907653..6e2f5e718 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -315,18 +315,20 @@ export function CopyPageDropdown({
         )}
       </Button>
       <Dropdown open={open} onOpenChange={setOpen}>
-        <DropdownTrigger>
-          <Button
-            type="button"
-            variant="ghost"
-            size="xs"
-            rounded="none"
-            className="border-0 px-1.5"
-            aria-label={`More ${label} options`}
-          >
-            <CaretDownIcon className="w-3 h-3" />
-          </Button>
-        </DropdownTrigger>
+        <DropdownTrigger
+          render={
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              rounded="none"
+              className="border-0 px-1.5"
+              aria-label={`More ${label} options`}
+            >
+              <CaretDownIcon className="w-3 h-3" />
+            </Button>
+          }
+        />
         <DropdownContent align="end" className="min-w-72">
           {menuItems.map((item) => (
             <DropdownItem
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 2754c6a1e..7440e2b02 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Menu } from '@base-ui/react/menu'
 import { twMerge } from 'tailwind-merge'
 
 type DropdownProps = {
@@ -10,9 +10,11 @@ type DropdownProps = {
 }
 
 type DropdownTriggerProps = {
-  children: React.ReactNode
+  render: React.ReactElement
   className?: string
-  asChild?: boolean
+  // Set false when `render` is not a native <button> — e.g. the virtual anchor
+  // BrandContextMenu positions at the cursor.
+  nativeButton?: boolean
 }
 
 type DropdownContentProps = {
@@ -27,10 +29,10 @@ type DropdownContentProps = {
 }
 
 type DropdownItemProps = {
-  children: React.ReactNode
+  children?: React.ReactNode
   className?: string
   onSelect?: () => void
-  asChild?: boolean
+  render?: React.ReactElement
 }
 
 type DropdownSeparatorProps = {
@@ -44,21 +46,23 @@ export function Dropdown({
   modal = false,
 }: DropdownProps) {
   return (
-    <DropdownMenu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+    <Menu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
       {children}
-    </DropdownMenu.Root>
+    </Menu.Root>
   )
 }
 
 export function DropdownTrigger({
-  children,
+  render,
   className,
-  asChild = true,
+  nativeButton,
 }: DropdownTriggerProps) {
   return (
-    <DropdownMenu.Trigger asChild={asChild} className={className}>
-      {children}
-    </DropdownMenu.Trigger>
+    <Menu.Trigger
+      className={className}
+      render={render}
+      nativeButton={nativeButton}
+    />
   )
 }
 
@@ -73,58 +77,62 @@ export function DropdownContent({
   onPointerLeave,
 }: DropdownContentProps) {
   const content = (
-    <DropdownMenu.Content
-      align={align}
-      sideOffset={sideOffset}
-      onFocus={onFocus}
-      onPointerEnter={onPointerEnter}
-      onPointerLeave={onPointerLeave}
-      className={twMerge(
-        'dropdown-content z-[1200] min-w-48 rounded-lg p-1.5',
-        'border border-gray-200 dark:border-gray-700',
-        'bg-white dark:bg-gray-800',
-        'shadow-lg',
-        className,
-      )}
-    >
-      {children}
-    </DropdownMenu.Content>
+    <Menu.Positioner align={align} sideOffset={sideOffset} className="z-[1200]">
+      <Menu.Popup
+        onFocus={onFocus}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
+        className={twMerge(
+          'dropdown-content min-w-48 rounded-lg p-1.5',
+          'border border-gray-200 dark:border-gray-700',
+          'bg-white dark:bg-gray-800',
+          'shadow-lg',
+          className,
+        )}
+      >
+        {children}
+      </Menu.Popup>
+    </Menu.Positioner>
   )
 
   if (!portal) {
     return content
   }
 
-  return <DropdownMenu.Portal>{content}</DropdownMenu.Portal>
+  return <Menu.Portal>{content}</Menu.Portal>
 }
 
 export function DropdownItem({
   children,
   className,
   onSelect,
-  asChild,
+  render,
 }: DropdownItemProps) {
+  const itemClassName = twMerge(
+    'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 outline-none',
+    'text-sm text-gray-700 dark:text-gray-300',
+    'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+    'data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-700/50',
+    'transition-colors duration-150',
+    className,
+  )
+
+  if (render) {
+    return (
+      <Menu.Item onClick={onSelect} className={itemClassName} render={render} />
+    )
+  }
+
   return (
-    <DropdownMenu.Item
-      asChild={asChild}
-      onSelect={onSelect}
-      className={twMerge(
-        'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 outline-none',
-        'text-sm text-gray-700 dark:text-gray-300',
-        'hover:bg-gray-100 dark:hover:bg-gray-700/50',
-        'focus:bg-gray-100 dark:focus:bg-gray-700/50',
-        'transition-colors duration-150',
-        className,
-      )}
-    >
+    <Menu.Item onClick={onSelect} className={itemClassName}>
       {children}
-    </DropdownMenu.Item>
+    </Menu.Item>
   )
 }
 
 export function DropdownSeparator({ className }: DropdownSeparatorProps) {
   return (
-    <DropdownMenu.Separator
+    <Menu.Separator
       className={twMerge('my-1 h-px bg-gray-200 dark:bg-gray-700', className)}
     />
   )
diff --git a/src/components/LibrariesBrowser.tsx b/src/components/LibrariesBrowser.tsx
index 539c4a00f..1776a5c41 100644
--- a/src/components/LibrariesBrowser.tsx
+++ b/src/components/LibrariesBrowser.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
 import { Check as CheckIcon } from '@phosphor-icons/react/Check'
 import { type Framework } from '~/libraries'
@@ -109,9 +109,9 @@ export function LibrariesBrowser({
               />
             ) : null}
             {variant === 'dialog' ? (
-              <DialogPrimitive.Title className="font-ds-display text-3xl font-medium text-text-primary">
+              <Dialog.Title className="font-ds-display text-3xl font-medium text-text-primary">
                 {title}
-              </DialogPrimitive.Title>
+              </Dialog.Title>
             ) : (
               <h1 className="font-ds-display text-3xl font-medium text-text-primary">
                 {title}
@@ -119,7 +119,7 @@ export function LibrariesBrowser({
             )}
           </div>
           {variant === 'dialog' ? (
-            <DialogPrimitive.Description
+            <Dialog.Description
               className={
                 activeFrameworkOption
                   ? 'mt-2 max-w-2xl font-ds-mono text-xs leading-relaxed text-text-secondary'
@@ -127,7 +127,7 @@ export function LibrariesBrowser({
               }
             >
               {description}
-            </DialogPrimitive.Description>
+            </Dialog.Description>
           ) : (
             <p
               className={
@@ -142,26 +142,28 @@ export function LibrariesBrowser({
         </div>
 
         <Dropdown>
-          <DropdownTrigger>
-            <button
-              type="button"
-              className="inline-flex shrink-0 items-center gap-2 rounded-lg corner-squircle border border-black/[0.06] bg-background-surface px-3 py-2 font-ds-mono text-xs text-text-primary transition-colors hover:border-border-strong dark:border-white/[0.08] dark:bg-[#0a0a0a]"
-            >
-              {activeFrameworkOption ? (
-                <img
-                  src={activeFrameworkOption.logo}
-                  alt=""
-                  className="h-4 w-4 object-contain opacity-80 brightness-0 dark:invert"
-                />
-              ) : null}
-              <span>
-                {activeFrameworkOption
-                  ? activeFrameworkOption.label
-                  : 'All frameworks'}
-              </span>
-              <CaretDownIcon className="size-3 text-text-secondary" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button
+                type="button"
+                className="inline-flex shrink-0 items-center gap-2 rounded-lg corner-squircle border border-black/[0.06] bg-background-surface px-3 py-2 font-ds-mono text-xs text-text-primary transition-colors hover:border-border-strong dark:border-white/[0.08] dark:bg-[#0a0a0a]"
+              >
+                {activeFrameworkOption ? (
+                  <img
+                    src={activeFrameworkOption.logo}
+                    alt=""
+                    className="h-4 w-4 object-contain opacity-80 brightness-0 dark:invert"
+                  />
+                ) : null}
+                <span>
+                  {activeFrameworkOption
+                    ? activeFrameworkOption.label
+                    : 'All frameworks'}
+                </span>
+                <CaretDownIcon className="size-3 text-text-secondary" />
+              </button>
+            }
+          />
           <DropdownContent
             align="end"
             className="max-h-[60vh] overflow-y-auto font-ds-mono"
diff --git a/src/components/LibrariesOverlay.tsx b/src/components/LibrariesOverlay.tsx
index 375a61a28..91c1fc330 100644
--- a/src/components/LibrariesOverlay.tsx
+++ b/src/components/LibrariesOverlay.tsx
@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
 import { X as XIcon } from '@phosphor-icons/react/X'
 import { LibrariesBrowser } from '~/components/LibrariesBrowser'
@@ -13,22 +13,26 @@ export function LibrariesOverlay({
   onClose: () => void
 }) {
   return (
-    <DialogPrimitive.Root
+    <Dialog.Root
       open={open}
-      onOpenChange={(next) => {
-        if (!next) onClose()
+      onOpenChange={(next, eventDetails) => {
+        if (next) return
+
+        if (eventDetails.reason === 'outside-press') {
+          const target = eventDetails.event.target
+          if (target instanceof Element && target.closest('[role="menu"]')) {
+            eventDetails.cancel()
+            return
+          }
+        }
+
+        onClose()
       }}
     >
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="animate-library-overlay-in libraries-overlay-glass fixed inset-0 z-[110]" />
-        <DialogPrimitive.Content
+      <Dialog.Portal>
+        <Dialog.Backdrop className="animate-library-overlay-in libraries-overlay-glass fixed inset-0 z-[110]" />
+        <Dialog.Popup
           className="animate-library-overlay-in libraries-overlay-scroll fixed inset-0 z-[111] flex flex-col overflow-y-auto outline-none"
-          onInteractOutside={(event) => {
-            const target = event.detail.originalEvent.target
-            if (target instanceof Element && target.closest('[role="menu"]')) {
-              event.preventDefault()
-            }
-          }}
           onClick={(event) => {
             if (event.target === event.currentTarget) onClose()
           }}
@@ -43,15 +47,15 @@ export function LibrariesOverlay({
               Back to menu
             </button>
           ) : null}
-          <DialogPrimitive.Close
+          <Dialog.Close
             aria-label="Close"
             className="fixed right-4 top-4 z-[112] flex size-11 items-center justify-center rounded-full corner-squircle text-text-secondary transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/10 min-[900px]:right-6 min-[900px]:top-6 min-[900px]:size-14"
           >
             <XIcon className="size-7 min-[900px]:size-10" weight="light" />
-          </DialogPrimitive.Close>
+          </Dialog.Close>
           <LibrariesBrowser variant="dialog" />
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }
diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
index eeabf7fa7..e24f7e89f 100644
--- a/src/components/LibraryLayout.tsx
+++ b/src/components/LibraryLayout.tsx
@@ -1297,7 +1297,7 @@ export function LibraryLayout({
         onPointerLeave={(e) => {
           if (e.pointerType === 'touch') return
           // Keep sidebar open while a dropdown opened from inside it is active (e.g. FrameworkSelect, VersionSelect)
-          if (expandedMenuRef.current?.querySelector('[data-state="open"]'))
+          if (expandedMenuRef.current?.querySelector('[data-popup-open]'))
             return
           if (window.innerWidth < 1280) {
             leaveTimer.current = setTimeout(() => {
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 30ec4dd84..a1fad690b 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { X as XIcon } from '@phosphor-icons/react/X'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
@@ -42,17 +42,17 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
   }
 
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
-        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[1000] w-full max-w-xs -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-6 shadow-xl">
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
+        <Dialog.Popup className="fixed left-1/2 top-1/2 z-[1000] w-full max-w-xs -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-6 shadow-xl">
           <div className="flex items-center justify-between mb-4">
-            <DialogPrimitive.Title className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            <Dialog.Title className="text-lg font-semibold text-gray-900 dark:text-gray-100">
               Sign in to continue
-            </DialogPrimitive.Title>
-            <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
+            </Dialog.Title>
+            <Dialog.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
               <XIcon className="w-5 h-5 text-gray-500" />
-            </DialogPrimitive.Close>
+            </Dialog.Close>
           </div>
 
           <div className="space-y-3">
@@ -73,8 +73,8 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
               Continue with Google
             </button>
           </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e81eb1310..90a644113 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1697,42 +1697,47 @@ function SocialStack() {
 
   return (
     <Dropdown>
-      <DropdownTrigger>
-        <button
-          type="button"
-          aria-label="TanStack social channels"
-          title="Social channels"
-          className="group/social inline-flex h-8 items-center px-0"
-        >
-          <span className="relative inline-flex items-center">
-            {stackTop.map(({ label, Icon }, i) => (
-              <span
-                key={label}
-                className={twMerge(
-                  'inline-flex h-8 w-8 items-center justify-center rounded-full border border-border-default bg-background-default text-icon-default shadow-sm transition-[transform,color,background-color] group-hover/social:text-text-primary',
-                  i > 0 && '-ml-3',
-                )}
-                style={{ zIndex: stackTop.length - i }}
-              >
-                <Icon className="size-4" />
-              </span>
-            ))}
-          </span>
-        </button>
-      </DropdownTrigger>
+      <DropdownTrigger
+        render={
+          <button
+            type="button"
+            aria-label="TanStack social channels"
+            title="Social channels"
+            className="group/social inline-flex h-8 items-center px-0"
+          >
+            <span className="relative inline-flex items-center">
+              {stackTop.map(({ label, Icon }, i) => (
+                <span
+                  key={label}
+                  className={twMerge(
+                    'inline-flex h-8 w-8 items-center justify-center rounded-full border border-border-default bg-background-default text-icon-default shadow-sm transition-[transform,color,background-color] group-hover/social:text-text-primary',
+                    i > 0 && '-ml-3',
+                  )}
+                  style={{ zIndex: stackTop.length - i }}
+                >
+                  <Icon className="size-4" />
+                </span>
+              ))}
+            </span>
+          </button>
+        }
+      />
       <DropdownContent align="center" sideOffset={8} className="min-w-44">
         {SOCIAL_LINKS.map(({ label, href, Icon }) => (
-          <DropdownItem key={href} asChild>
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`TanStack on ${label}`}
-            >
-              <Icon className="size-4" />
-              <span>{label}</span>
-            </a>
-          </DropdownItem>
+          <DropdownItem
+            key={href}
+            render={
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`TanStack on ${label}`}
+              >
+                <Icon className="size-4" />
+                <span>{label}</span>
+              </a>
+            }
+          />
         ))}
       </DropdownContent>
     </Dropdown>
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index ecb9a3861..bab2cc68b 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { Command } from 'cmdk'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -1308,27 +1308,29 @@ function KapaHistoryButton({
         }
       }}
     >
-      <DropdownTrigger>
-        <button
-          type="button"
-          disabled={isBusy}
-          aria-label="Chat history"
-          title="Chat history"
-          className={twMerge(
-            'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
-            compact
-              ? compactChatControlClass
-              : 'gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
-          )}
-        >
-          <ClockCounterClockwiseIcon className="w-3 h-3" />
-          {compact ? (
-            <ChatControlTooltip>Chat history</ChatControlTooltip>
-          ) : (
-            <span className="hidden sm:inline">History</span>
-          )}
-        </button>
-      </DropdownTrigger>
+      <DropdownTrigger
+        render={
+          <button
+            type="button"
+            disabled={isBusy}
+            aria-label="Chat history"
+            title="Chat history"
+            className={twMerge(
+              'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+              compact
+                ? compactChatControlClass
+                : 'gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+            )}
+          >
+            <ClockCounterClockwiseIcon className="w-3 h-3" />
+            {compact ? (
+              <ChatControlTooltip>Chat history</ChatControlTooltip>
+            ) : (
+              <span className="hidden sm:inline">History</span>
+            )}
+          </button>
+        }
+      />
       <DropdownContent
         align="end"
         sideOffset={8}
@@ -3159,27 +3161,29 @@ function LibraryRefinement({ compact = false }: SearchScopePickerProps) {
 
   return (
     <Dropdown modal={false}>
-      <DropdownTrigger>
-        <button
-          type="button"
-          className={twMerge(
-            'flex min-w-0 items-center gap-1 p-0.5 cursor-pointer font-bold rounded focus:ring-2 text-gray-900 dark:text-gray-100',
-            compact ? 'max-w-[10rem] text-xs' : 'text-sm',
-          )}
-        >
-          {currentLibrary ? (
-            <span className="min-w-0 truncate uppercase font-black">
-              <span className="opacity-50">TanStack</span>{' '}
-              <span className={currentLibrary.textStyle}>
-                {currentLibrary.id.toUpperCase()}
+      <DropdownTrigger
+        render={
+          <button
+            type="button"
+            className={twMerge(
+              'flex min-w-0 items-center gap-1 p-0.5 cursor-pointer font-bold rounded focus:ring-2 text-gray-900 dark:text-gray-100',
+              compact ? 'max-w-[10rem] text-xs' : 'text-sm',
+            )}
+          >
+            {currentLibrary ? (
+              <span className="min-w-0 truncate uppercase font-black">
+                <span className="opacity-50">TanStack</span>{' '}
+                <span className={currentLibrary.textStyle}>
+                  {currentLibrary.id.toUpperCase()}
+                </span>
               </span>
-            </span>
-          ) : (
-            <span className="truncate">All Libraries</span>
-          )}
-          <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
-        </button>
-      </DropdownTrigger>
+            ) : (
+              <span className="truncate">All Libraries</span>
+            )}
+            <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
+          </button>
+        }
+      />
       <DropdownContent align="end" className="max-h-[60vh] w-64 overflow-auto">
         <DropdownItem
           onSelect={() => setSelectedLibrary('')}
@@ -3231,33 +3235,35 @@ function FrameworkRefinement({ compact = false }: SearchScopePickerProps) {
 
   return (
     <Dropdown modal={false}>
-      <DropdownTrigger>
-        <button
-          type="button"
-          className={twMerge(
-            'flex min-w-0 items-center gap-1 p-0.5 font-bold rounded cursor-pointer focus:ring-2 text-gray-900 dark:text-gray-100',
-            compact ? 'max-w-[9rem] text-xs' : 'text-sm',
-          )}
-        >
-          {currentFramework && (
-            <img
-              src={currentFramework.logo}
-              alt=""
-              aria-hidden="true"
-              className={twMerge(
-                'shrink-0',
-                compact ? 'w-3.5 h-3.5' : 'w-4 h-4',
-              )}
-            />
-          )}
-          <span className="truncate">
-            {currentFramework
-              ? capitalize(currentFramework.label)
-              : 'All Frameworks'}
-          </span>
-          <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
-        </button>
-      </DropdownTrigger>
+      <DropdownTrigger
+        render={
+          <button
+            type="button"
+            className={twMerge(
+              'flex min-w-0 items-center gap-1 p-0.5 font-bold rounded cursor-pointer focus:ring-2 text-gray-900 dark:text-gray-100',
+              compact ? 'max-w-[9rem] text-xs' : 'text-sm',
+            )}
+          >
+            {currentFramework && (
+              <img
+                src={currentFramework.logo}
+                alt=""
+                aria-hidden="true"
+                className={twMerge(
+                  'shrink-0',
+                  compact ? 'w-3.5 h-3.5' : 'w-4 h-4',
+                )}
+              />
+            )}
+            <span className="truncate">
+              {currentFramework
+                ? capitalize(currentFramework.label)
+                : 'All Frameworks'}
+            </span>
+            <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
+          </button>
+        }
+      />
       <DropdownContent align="end" className="max-h-[60vh] w-52 overflow-auto">
         <DropdownItem onSelect={() => handleSelect('')} className="font-bold">
           All Frameworks
@@ -3363,13 +3369,9 @@ function isSearchModalPortalTarget(target: EventTarget | null) {
   return target instanceof Element && !!target.closest('.dropdown-content')
 }
 
-const searchModalTransitionMs = 140
-
 export function SearchModal() {
   const { isOpen, closeSearch } = useSearchContext()
   const contentRef = React.useRef<HTMLDivElement>(null)
-  const bodyPointerEventsRef = React.useRef('')
-  const [shouldRenderSearch, setShouldRenderSearch] = React.useState(isOpen)
   const [isFullHeight, setIsFullHeight] = React.useState(() => {
     if (typeof window === 'undefined') return false
     return localStorage.getItem('search-full-height') === 'true'
@@ -3383,22 +3385,6 @@ export function SearchModal() {
     })
   }, [])
 
-  React.useEffect(() => {
-    if (isOpen) {
-      setShouldRenderSearch(true)
-      return
-    }
-
-    const timeout = window.setTimeout(() => {
-      setShouldRenderSearch(false)
-      requestAnimationFrame(() => {
-        document.body.style.pointerEvents = bodyPointerEventsRef.current
-      })
-    }, searchModalTransitionMs)
-
-    return () => window.clearTimeout(timeout)
-  }, [isOpen])
-
   React.useEffect(() => {
     if (!isOpen) {
       return
@@ -3413,94 +3399,53 @@ export function SearchModal() {
     return () => cancelAnimationFrame(frame)
   }, [isOpen])
 
-  React.useEffect(() => {
-    if (typeof document === 'undefined') {
-      return
-    }
-
-    if (isOpen) {
-      document.body.style.pointerEvents = 'none'
-      return
-    }
-
-    const frame = requestAnimationFrame(() => {
-      document.body.style.pointerEvents = bodyPointerEventsRef.current
-    })
-
-    return () => cancelAnimationFrame(frame)
-  }, [isOpen])
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined') {
-      return
-    }
-
-    bodyPointerEventsRef.current =
-      document.body.style.pointerEvents === 'none'
-        ? ''
-        : document.body.style.pointerEvents
-
-    return () => {
-      document.body.style.pointerEvents = bodyPointerEventsRef.current
-    }
-  }, [])
-
-  const shouldMountSearch = isOpen || shouldRenderSearch
-
   return (
-    <DialogPrimitive.Root
+    <Dialog.Root
       open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          closeSearch()
+      onOpenChange={(open, eventDetails) => {
+        if (open) return
+
+        if (
+          eventDetails.reason === 'outside-press' &&
+          isSearchModalPortalTarget(eventDetails.event.target)
+        ) {
+          eventDetails.cancel()
+          return
         }
+
+        closeSearch()
       }}
     >
-      <DialogPrimitive.Portal forceMount>
-        {shouldMountSearch ? (
-          <>
-            <DialogPrimitive.Overlay
-              forceMount
-              className="search-modal-overlay fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm xl:bg-black/30"
-            />
-            <DialogPrimitive.Content
-              forceMount
-              ref={contentRef}
-              className={twMerge(
-                'search-modal-content fixed z-[1000] inset-0 sm:inset-auto sm:top-4 sm:left-1/2 sm:-translate-x-1/2 sm:w-[96%] xl:w-full sm:max-w-4xl text-left outline-none',
-                isFullHeight && 'sm:bottom-4',
-              )}
-              onInteractOutside={(event) => {
-                if (isSearchModalPortalTarget(event.target)) {
-                  event.preventDefault()
-                }
-              }}
+      <Dialog.Portal>
+        <Dialog.Backdrop className="search-modal-overlay fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm xl:bg-black/30" />
+        <Dialog.Popup
+          ref={contentRef}
+          className={twMerge(
+            'search-modal-content fixed z-[1000] inset-0 sm:inset-auto sm:top-4 sm:left-1/2 sm:-translate-x-1/2 sm:w-[96%] xl:w-full sm:max-w-4xl text-left outline-none',
+            isFullHeight && 'sm:bottom-4',
+          )}
+        >
+          <Dialog.Title className="sr-only">Search TanStack</Dialog.Title>
+          <Dialog.Description className="sr-only">
+            Search TanStack and open TanStack AI from the current query.
+          </Dialog.Description>
+          <div className="search-modal-panel-transition h-full">
+            <InstantSearch
+              searchClient={searchClient}
+              indexName={searchIndexName}
             >
-              <DialogPrimitive.Title className="sr-only">
-                Search TanStack
-              </DialogPrimitive.Title>
-              <DialogPrimitive.Description className="sr-only">
-                Search TanStack and open TanStack AI from the current query.
-              </DialogPrimitive.Description>
-              <div className="search-modal-panel-transition h-full">
-                <InstantSearch
-                  searchClient={searchClient}
-                  indexName={searchIndexName}
-                >
-                  <SearchFiltersProvider resetFiltersOnOpen={isOpen}>
-                    <DynamicFilters />
-                    <CommandSearchPanel
-                      isFullHeight={isFullHeight}
-                      onToggleFullHeight={toggleFullHeight}
-                    />
-                  </SearchFiltersProvider>
-                </InstantSearch>
-              </div>
-            </DialogPrimitive.Content>
-          </>
-        ) : null}
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+              <SearchFiltersProvider resetFiltersOnOpen={isOpen}>
+                <DynamicFilters />
+                <CommandSearchPanel
+                  isFullHeight={isFullHeight}
+                  onToggleFullHeight={toggleFullHeight}
+                />
+              </SearchFiltersProvider>
+            </InstantSearch>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }
 
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index a4dfc01c8..2268ed315 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -43,34 +43,38 @@ export function Select<T extends SelectOption>({
   return (
     <div className={twMerge('w-full', className)}>
       <Dropdown>
-        <DropdownTrigger>
-          <button
-            type="button"
-            className="relative items-center w-full gap-2 flex hover:bg-gray-500/10 cursor-pointer rounded-md py-1.5 px-2 text-left focus:outline-none text-sm"
-          >
-            {icon ? (
-              <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
-                {icon}
+        <DropdownTrigger
+          render={
+            <button
+              type="button"
+              className="relative items-center w-full gap-2 flex hover:bg-gray-500/10 cursor-pointer rounded-md py-1.5 px-2 text-left focus:outline-none text-sm"
+            >
+              {icon ? (
+                <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
+                  {icon}
+                </span>
+              ) : selectedOption.logo ? (
+                <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
+                  <img
+                    height={16}
+                    width={16}
+                    src={selectedOption.logo}
+                    alt={`${selectedOption.label} logo`}
+                  />
+                </span>
+              ) : null}
+              <span className="truncate font-medium">
+                {selectedOption.label}
               </span>
-            ) : selectedOption.logo ? (
-              <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
-                <img
-                  height={16}
-                  width={16}
-                  src={selectedOption.logo}
-                  alt={`${selectedOption.label} logo`}
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <CaretUpDownIcon
+                  className="h-4 w-4 opacity-40"
+                  aria-hidden="true"
                 />
               </span>
-            ) : null}
-            <span className="truncate font-medium">{selectedOption.label}</span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <CaretUpDownIcon
-                className="h-4 w-4 opacity-40"
-                aria-hidden="true"
-              />
-            </span>
-          </button>
-        </DropdownTrigger>
+            </button>
+          }
+        />
         <DropdownContent align="start" className="max-h-80 overflow-auto">
           {available.map((option) => (
             <DropdownItem
diff --git a/src/components/application-builder/parts.tsx b/src/components/application-builder/parts.tsx
index b4b1315d1..46c77c69a 100644
--- a/src/components/application-builder/parts.tsx
+++ b/src/components/application-builder/parts.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Tooltip } from '@base-ui/react/tooltip'
 import { CheckIcon, CopyIcon, SparkleIcon, XIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -72,9 +72,9 @@ export function StarterTooltipProvider({
   children: React.ReactNode
 }) {
   return (
-    <TooltipPrimitive.Provider delayDuration={1000} skipDelayDuration={500}>
+    <Tooltip.Provider delay={1000} timeout={500}>
       {children}
-    </TooltipPrimitive.Provider>
+    </Tooltip.Provider>
   )
 }
 
@@ -615,19 +615,16 @@ function StarterHoverTooltip({
   content: React.ReactNode
 }) {
   return (
-    <TooltipPrimitive.Root>
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-          side="bottom"
-          align="center"
-          sideOffset={8}
-          className="z-[500] transition-opacity duration-150 data-[state=closed]:opacity-0 data-[state=delayed-open]:opacity-100"
-        >
-          {content}
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger render={children} />
+      <Tooltip.Portal>
+        <Tooltip.Positioner side="bottom" align="center" sideOffset={8}>
+          <Tooltip.Popup className="z-[500] transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0">
+            {content}
+          </Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   )
 }
 
diff --git a/src/components/charts/ChartControls.tsx b/src/components/charts/ChartControls.tsx
index 3cc5eb1ef..40f1b2756 100644
--- a/src/components/charts/ChartControls.tsx
+++ b/src/components/charts/ChartControls.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from '~/components/npm-stats/DropdownMenu'
 import { twMerge } from 'tailwind-merge'
 import {
   type TimeRange,
@@ -44,12 +44,14 @@ export function ChartControls({
   return (
     <div className={twMerge('flex gap-1 items-center', className)}>
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button className={buttonStyles.base}>
-            {timeRangeOptions.find((r) => r.value === timeRange)?.label}
-            <CaretDownIcon className="w-3 h-3" />
-          </button>
-        </DropdownMenuTrigger>
+        <DropdownMenuTrigger
+          render={
+            <button className={buttonStyles.base}>
+              {timeRangeOptions.find((r) => r.value === timeRange)?.label}
+              <CaretDownIcon className="w-3 h-3" />
+            </button>
+          }
+        />
         <DropdownMenuContent className="min-w-[120px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-1 z-50">
           {timeRangeOptions.map(({ value, label }) => (
             <DropdownMenuItem
@@ -68,17 +70,20 @@ export function ChartControls({
       </DropdownMenu>
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            className={twMerge(
-              buttonStyles.base,
-              binType !== defaultBinForRange[timeRange] && buttonStyles.active,
-            )}
-          >
-            {binningOptions.find((b) => b.value === binType)?.label}
-            <CaretDownIcon className="w-3 h-3" />
-          </button>
-        </DropdownMenuTrigger>
+        <DropdownMenuTrigger
+          render={
+            <button
+              className={twMerge(
+                buttonStyles.base,
+                binType !== defaultBinForRange[timeRange] &&
+                  buttonStyles.active,
+              )}
+            >
+              {binningOptions.find((b) => b.value === binType)?.label}
+              <CaretDownIcon className="w-3 h-3" />
+            </button>
+          }
+        />
         <DropdownMenuContent className="min-w-[100px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-1 z-50">
           {binningOptions.map(({ value, label }) => (
             <DropdownMenuItem
diff --git a/src/components/ds/BrandAssets.tsx b/src/components/ds/BrandAssets.tsx
index 92d2847d8..bcfc32a66 100644
--- a/src/components/ds/BrandAssets.tsx
+++ b/src/components/ds/BrandAssets.tsx
@@ -234,12 +234,14 @@ function BrandLogoPicker() {
     <div className="relative overflow-hidden rounded-xl border border-border-default bg-background-surface">
       <div className="absolute inset-x-0 top-0 z-10 flex flex-wrap items-center gap-3 p-4">
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span>{logo.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span>{logo.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-44">
             {BRAND_LOGOS.map((option) => (
               <DropdownItem
@@ -256,17 +258,19 @@ function BrandLogoPicker() {
         </Dropdown>
 
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span
-                aria-hidden="true"
-                className="size-4 rounded-full border border-border-default"
-                style={{ background: color.swatch }}
-              />
-              <span>{color.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span
+                  aria-hidden="true"
+                  className="size-4 rounded-full border border-border-default"
+                  style={{ background: color.swatch }}
+                />
+                <span>{color.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-44">
             {availableColors.map((option) => (
               <DropdownItem
@@ -288,12 +292,14 @@ function BrandLogoPicker() {
         </Dropdown>
 
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span>{format.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span>{format.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-36">
             {BRAND_FORMATS.map((option) => (
               <DropdownItem
@@ -416,12 +422,14 @@ function SocialLogoPicker() {
     <div className="relative overflow-hidden rounded-xl border border-border-default bg-background-surface">
       <div className="absolute inset-x-0 top-0 z-10 flex flex-wrap items-center gap-3 p-4">
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span>{orientation.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span>{orientation.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-44">
             {SOCIAL_ORIENTATIONS.map((option) => (
               <DropdownItem
@@ -438,17 +446,19 @@ function SocialLogoPicker() {
         </Dropdown>
 
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span
-                aria-hidden="true"
-                className="size-4 rounded-full border border-border-default"
-                style={{ background: color.swatch }}
-              />
-              <span>{color.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span
+                  aria-hidden="true"
+                  className="size-4 rounded-full border border-border-default"
+                  style={{ background: color.swatch }}
+                />
+                <span>{color.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-44">
             {SOCIAL_COLORS.map((option) => (
               <DropdownItem
@@ -470,12 +480,14 @@ function SocialLogoPicker() {
         </Dropdown>
 
         <Dropdown>
-          <DropdownTrigger>
-            <button type="button" className={socialControlClass}>
-              <span>{format.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button type="button" className={socialControlClass}>
+                <span>{format.label}</span>
+                <CaretDown size={13} className="text-text-muted" />
+              </button>
+            }
+          />
           <DropdownContent align="start" className="min-w-36">
             {SOCIAL_FORMATS.map((option) => (
               <DropdownItem
diff --git a/src/components/ds/ui/index.tsx b/src/components/ds/ui/index.tsx
index f494de6c1..e345f3e9f 100644
--- a/src/components/ds/ui/index.tsx
+++ b/src/components/ds/ui/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Menu } from '@base-ui/react/menu'
 import { Link } from '@tanstack/react-router'
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
 import { CircleNotch as CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
@@ -705,26 +705,20 @@ export function Dropdown({
   modal?: boolean
 }) {
   return (
-    <DropdownMenu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+    <Menu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
       {children}
-    </DropdownMenu.Root>
+    </Menu.Root>
   )
 }
 
 export function DropdownTrigger({
-  children,
+  render,
   className,
-  asChild = true,
 }: {
-  children: React.ReactNode
+  render: React.ReactElement
   className?: string
-  asChild?: boolean
 }) {
-  return (
-    <DropdownMenu.Trigger asChild={asChild} className={className}>
-      {children}
-    </DropdownMenu.Trigger>
-  )
+  return <Menu.Trigger className={className} render={render} />
 }
 
 export function DropdownContent({
@@ -739,18 +733,22 @@ export function DropdownContent({
   sideOffset?: number
 }) {
   return (
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content
+    <Menu.Portal>
+      <Menu.Positioner
         align={align}
         sideOffset={sideOffset}
-        className={twMerge(
-          'z-[1200] min-w-48 rounded-lg border border-border-default bg-background-elevated p-1.5 shadow-lg',
-          className,
-        )}
+        className="z-[1200]"
       >
-        {children}
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
+        <Menu.Popup
+          className={twMerge(
+            'min-w-48 rounded-lg border border-border-default bg-background-elevated p-1.5 shadow-lg',
+            className,
+          )}
+        >
+          {children}
+        </Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
   )
 }
 
@@ -758,30 +756,34 @@ export function DropdownItem({
   children,
   className,
   onSelect,
-  asChild,
+  render,
 }: {
-  children: React.ReactNode
+  children?: React.ReactNode
   className?: string
   onSelect?: () => void
-  asChild?: boolean
+  render?: React.ReactElement
 }) {
+  const itemClassName = twMerge(
+    'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors hover:bg-background-subtle hover:text-text-primary data-highlighted:bg-background-subtle data-highlighted:text-text-primary',
+    className,
+  )
+
+  if (render) {
+    return (
+      <Menu.Item onClick={onSelect} className={itemClassName} render={render} />
+    )
+  }
+
   return (
-    <DropdownMenu.Item
-      asChild={asChild}
-      onSelect={onSelect}
-      className={twMerge(
-        'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors hover:bg-background-subtle hover:text-text-primary focus:bg-background-subtle focus:text-text-primary',
-        className,
-      )}
-    >
+    <Menu.Item onClick={onSelect} className={itemClassName}>
       {children}
-    </DropdownMenu.Item>
+    </Menu.Item>
   )
 }
 
 export function DropdownSeparator({ className }: { className?: string }) {
   return (
-    <DropdownMenu.Separator
+    <Menu.Separator
       className={twMerge('my-1 h-px bg-border-subtle', className)}
     />
   )
@@ -822,32 +824,37 @@ export function Breadcrumbs({
       )}
       {showTocToggle ? (
         <Dropdown>
-          <DropdownTrigger>
-            <button
-              className={twMerge(
-                hiddenClass,
-                'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-text-muted transition-colors hover:text-text-primary',
-              )}
-            >
-              <span>On this page</span>
-              <CaretDownIcon className="h-3.5 w-3.5" />
-            </button>
-          </DropdownTrigger>
+          <DropdownTrigger
+            render={
+              <button
+                className={twMerge(
+                  hiddenClass,
+                  'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-text-muted transition-colors hover:text-text-primary',
+                )}
+              >
+                <span>On this page</span>
+                <CaretDownIcon className="h-3.5 w-3.5" />
+              </button>
+            }
+          />
           <DropdownContent align="end" sideOffset={8} className={hiddenClass}>
             {headings.map((heading) => (
-              <DropdownItem key={`breadcrumb-toc-${heading.id}`} asChild>
-                <Link
-                  to="."
-                  hash={heading.id}
-                  style={{
-                    paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
-                  }}
-                  resetScroll={false}
-                  hashScrollIntoView={{ behavior: 'smooth' }}
-                >
-                  <span dangerouslySetInnerHTML={{ __html: heading.text }} />
-                </Link>
-              </DropdownItem>
+              <DropdownItem
+                key={`breadcrumb-toc-${heading.id}`}
+                render={
+                  <Link
+                    to="."
+                    hash={heading.id}
+                    style={{
+                      paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
+                    }}
+                    resetScroll={false}
+                    hashScrollIntoView={{ behavior: 'smooth' }}
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: heading.text }} />
+                  </Link>
+                }
+              />
             ))}
           </DropdownContent>
         </Dropdown>
diff --git a/src/components/npm-stats/BaselineSection.tsx b/src/components/npm-stats/BaselineSection.tsx
index c634fb33a..43f4991f7 100644
--- a/src/components/npm-stats/BaselineSection.tsx
+++ b/src/components/npm-stats/BaselineSection.tsx
@@ -13,7 +13,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from './DropdownMenu'
 import { twMerge } from 'tailwind-merge'
 import { Tooltip } from '~/components/Tooltip'
 import { PackageSearch } from './PackageSearch'
@@ -150,15 +150,17 @@ export function BaselineSection({
   const presetsMenu = (
     <DropdownMenu>
       <Tooltip content="Apply a curated baseline preset">
-        <DropdownMenuTrigger asChild>
-          <button
-            className="flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded
+        <DropdownMenuTrigger
+          render={
+            <button
+              className="flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded
               text-blue-700 dark:text-blue-300 hover:bg-blue-500/10 font-medium"
-          >
-            Presets
-            <ChevronDown className="w-3 h-3" />
-          </button>
-        </DropdownMenuTrigger>
+            >
+              Presets
+              <ChevronDown className="w-3 h-3" />
+            </button>
+          }
+        />
       </Tooltip>
       <DropdownMenuContent
         className="min-w-[320px] max-w-[400px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50 border border-gray-200 dark:border-gray-700"
@@ -173,10 +175,8 @@ export function BaselineSection({
           .map((preset) => (
             <DropdownMenuItem
               key={preset.id}
-              onSelect={(e) => {
-                e.preventDefault()
-                onApplyPreset(preset)
-              }}
+              closeOnClick={false}
+              onSelect={() => onApplyPreset(preset)}
               className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/10 outline-none cursor-pointer flex items-center gap-2"
             >
               <div
@@ -201,10 +201,8 @@ export function BaselineSection({
           .map((preset) => (
             <DropdownMenuItem
               key={preset.id}
-              onSelect={(e) => {
-                e.preventDefault()
-                onApplyPreset(preset)
-              }}
+              closeOnClick={false}
+              onSelect={() => onApplyPreset(preset)}
               className="w-full px-2 py-2 text-left text-sm rounded hover:bg-gray-500/10 outline-none cursor-pointer"
             >
               <div className="font-medium text-gray-900 dark:text-gray-100">
diff --git a/src/components/npm-stats/ChartControls.tsx b/src/components/npm-stats/ChartControls.tsx
index 24fbba6c0..4b24519dd 100644
--- a/src/components/npm-stats/ChartControls.tsx
+++ b/src/components/npm-stats/ChartControls.tsx
@@ -19,7 +19,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from './DropdownMenu'
 import { Tooltip } from '~/components/Tooltip'
 import {
   type TimeRange,
@@ -159,11 +159,13 @@ export function ChartControls({
       {/* Time Range */}
       <DropdownMenu>
         <Tooltip content="Select time range">
-          <DropdownMenuTrigger asChild>
-            <button className={twMerge(dropdownButtonStyles.base)}>
-              {timeRanges.find((r) => r.value === range)?.label}
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button className={twMerge(dropdownButtonStyles.base)}>
+                {timeRanges.find((r) => r.value === range)?.label}
+              </button>
+            }
+          />
         </Tooltip>
         <DropdownMenuContent className={dropdownContentStyles}>
           <div className={dropdownHeaderStyles}>
@@ -188,16 +190,18 @@ export function ChartControls({
       {/* Binning Interval */}
       <DropdownMenu>
         <Tooltip content="Select binning interval">
-          <DropdownMenuTrigger asChild>
-            <button
-              className={twMerge(
-                dropdownButtonStyles.base,
-                binType !== 'weekly' && dropdownButtonStyles.active,
-              )}
-            >
-              {binningOptions.find((b) => b.value === binType)?.label}
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button
+                className={twMerge(
+                  dropdownButtonStyles.base,
+                  binType !== 'weekly' && dropdownButtonStyles.active,
+                )}
+              >
+                {binningOptions.find((b) => b.value === binType)?.label}
+              </button>
+            }
+          />
         </Tooltip>
         <DropdownMenuContent className={dropdownContentStyles}>
           <div className={dropdownHeaderStyles}>
@@ -318,18 +322,20 @@ export function ChartControls({
               : 'Relative change is only available for history line charts'
           }
         >
-          <DropdownMenuTrigger asChild>
-            <button
-              className={twMerge(
-                dropdownButtonStyles.base,
-                transform !== 'none' && dropdownButtonStyles.active,
-                !canUseTransform && 'opacity-50 cursor-not-allowed',
-              )}
-              disabled={!canUseTransform}
-            >
-              {transformOptions.find((opt) => opt.value === transform)?.label}
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button
+                className={twMerge(
+                  dropdownButtonStyles.base,
+                  transform !== 'none' && dropdownButtonStyles.active,
+                  !canUseTransform && 'opacity-50 cursor-not-allowed',
+                )}
+                disabled={!canUseTransform}
+              >
+                {transformOptions.find((opt) => opt.value === transform)?.label}
+              </button>
+            }
+          />
         </Tooltip>
         <DropdownMenuContent className={dropdownContentStyles}>
           <div className={dropdownHeaderStyles}>
@@ -364,21 +370,23 @@ export function ChartControls({
                 : 'Control how data is displayed'
           }
         >
-          <DropdownMenuTrigger asChild>
-            <button
-              className={twMerge(
-                dropdownButtonStyles.base,
-                showDataMode !== 'all' && dropdownButtonStyles.active,
-                showDataModeDisabled && 'opacity-50 cursor-not-allowed',
-              )}
-              disabled={showDataModeDisabled}
-            >
-              {
-                showDataModeOptions.find((opt) => opt.value === showDataMode)
-                  ?.label
-              }
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button
+                className={twMerge(
+                  dropdownButtonStyles.base,
+                  showDataMode !== 'all' && dropdownButtonStyles.active,
+                  showDataModeDisabled && 'opacity-50 cursor-not-allowed',
+                )}
+                disabled={showDataModeDisabled}
+              >
+                {
+                  showDataModeOptions.find((opt) => opt.value === showDataMode)
+                    ?.label
+                }
+              </button>
+            }
+          />
         </Tooltip>
         <DropdownMenuContent className={dropdownContentStyles}>
           <div className={dropdownHeaderStyles}>
diff --git a/src/components/npm-stats/DropdownMenu.tsx b/src/components/npm-stats/DropdownMenu.tsx
new file mode 100644
index 000000000..4c9643a6f
--- /dev/null
+++ b/src/components/npm-stats/DropdownMenu.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react'
+import { Menu } from '@base-ui/react/menu'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Base UI menu shaped like the flat `DropdownMenu*` API the stats and chart
+ * controls already use, so those call sites stay unchanged. Base UI splits the
+ * menu surface into `Positioner` + `Popup`; `DropdownMenuContent` keeps that
+ * split internal and applies the caller's className to the popup.
+ */
+
+export function DropdownMenu({
+  children,
+  open,
+  onOpenChange,
+  modal = false,
+}: {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  modal?: boolean
+}) {
+  return (
+    <Menu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+      {children}
+    </Menu.Root>
+  )
+}
+
+export function DropdownMenuTrigger({
+  render,
+  className,
+}: {
+  render: React.ReactElement
+  className?: string
+}) {
+  return <Menu.Trigger className={className} render={render} />
+}
+
+export function DropdownMenuContent({
+  children,
+  className,
+  align = 'start',
+  sideOffset = 4,
+  collisionPadding,
+}: {
+  children: React.ReactNode
+  className?: string
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  collisionPadding?: number
+}) {
+  return (
+    <Menu.Portal>
+      <Menu.Positioner
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className="z-50"
+      >
+        <Menu.Popup className={className}>{children}</Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
+  )
+}
+
+export function DropdownMenuItem({
+  children,
+  className,
+  onSelect,
+  disabled,
+  closeOnClick,
+}: {
+  children: React.ReactNode
+  className?: string
+  onSelect?: (event: React.MouseEvent) => void
+  disabled?: boolean
+  closeOnClick?: boolean
+}) {
+  return (
+    <Menu.Item
+      onClick={onSelect}
+      disabled={disabled}
+      closeOnClick={closeOnClick}
+      className={twMerge('outline-none', className)}
+    >
+      {children}
+    </Menu.Item>
+  )
+}
diff --git a/src/components/npm-stats/LatestBucketNavigator.tsx b/src/components/npm-stats/LatestBucketNavigator.tsx
index 67cecaad9..f560e51a8 100644
--- a/src/components/npm-stats/LatestBucketNavigator.tsx
+++ b/src/components/npm-stats/LatestBucketNavigator.tsx
@@ -15,7 +15,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from './DropdownMenu'
 import {
   binningOptionsByType,
   getLatestBucketOffsetBounds,
@@ -253,15 +253,17 @@ export function LatestBucketNavigator({
           )}
         </button>
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              aria-label="Bucket playback options"
-              className={borderedNavigatorButtonStyles}
-              type="button"
-            >
-              <MoreHorizontal className="size-3.5" />
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button
+                aria-label="Bucket playback options"
+                className={borderedNavigatorButtonStyles}
+                type="button"
+              >
+                <MoreHorizontal className="size-3.5" />
+              </button>
+            }
+          />
           <DropdownMenuContent
             align="start"
             className="z-50 min-w-[160px] rounded-md bg-white p-1.5 shadow-lg dark:bg-gray-800"
diff --git a/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx
index 6380f98a6..cdf21883b 100644
--- a/src/components/npm-stats/NPMStatsChart.tsx
+++ b/src/components/npm-stats/NPMStatsChart.tsx
@@ -31,7 +31,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from './DropdownMenu'
 import { twMerge } from 'tailwind-merge'
 import { Tooltip } from '~/components/Tooltip'
 import {
@@ -1533,16 +1533,18 @@ function ChartActions({
                 : 'Export chart'
           }
         >
-          <DropdownMenuTrigger asChild>
-            <button
-              aria-label="Export chart"
-              className={buttonStyles}
-              disabled={disabled}
-              type="button"
-            >
-              <DownloadIcon className="size-3" />
-            </button>
-          </DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <button
+                aria-label="Export chart"
+                className={buttonStyles}
+                disabled={disabled}
+                type="button"
+              >
+                <DownloadIcon className="size-3" />
+              </button>
+            }
+          />
         </Tooltip>
         <DropdownMenuContent
           className={chartActionDropdownContentStyles}
@@ -1713,15 +1715,17 @@ function EmbedChartAction({
   return (
     <DropdownMenu>
       <Tooltip content="Embed chart">
-        <DropdownMenuTrigger asChild>
-          <button
-            aria-label="Embed chart"
-            className={chartActionButtonStyles}
-            type="button"
-          >
-            <Code2 className="size-3" />
-          </button>
-        </DropdownMenuTrigger>
+        <DropdownMenuTrigger
+          render={
+            <button
+              aria-label="Embed chart"
+              className={chartActionButtonStyles}
+              type="button"
+            >
+              <Code2 className="size-3" />
+            </button>
+          }
+        />
       </Tooltip>
       <DropdownMenuContent
         align="end"
diff --git a/src/components/npm-stats/PackagePills.tsx b/src/components/npm-stats/PackagePills.tsx
index bb3e1861c..be29a21ec 100644
--- a/src/components/npm-stats/PackagePills.tsx
+++ b/src/components/npm-stats/PackagePills.tsx
@@ -12,7 +12,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+} from './DropdownMenu'
 import { Tooltip } from '~/components/Tooltip'
 import {
   type PackageGroup,
@@ -132,14 +132,16 @@ export function PackagePill({
                 }
               >
                 <Tooltip content="More options">
-                  <DropdownMenuTrigger asChild>
-                    <button className="px-0.5 hover:text-blue-500">
-                      <EllipsisVertical className="size-3.5" />
-                    </button>
-                  </DropdownMenuTrigger>
+                  <DropdownMenuTrigger
+                    render={
+                      <button className="px-0.5 hover:text-blue-500">
+                        <EllipsisVertical className="size-3.5" />
+                      </button>
+                    }
+                  />
                 </Tooltip>
                 <DropdownMenuContent
-                  className="z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[200px] overflow-y-auto rounded-lg bg-white p-2 shadow-lg dark:bg-gray-800"
+                  className="z-50 max-h-(--available-height) min-w-[200px] overflow-y-auto rounded-lg bg-white p-2 shadow-lg dark:bg-gray-800"
                   collisionPadding={8}
                   sideOffset={5}
                 >
diff --git a/src/components/shop/CartDrawer.tsx b/src/components/shop/CartDrawer.tsx
index e9582e004..661c77ed1 100644
--- a/src/components/shop/CartDrawer.tsx
+++ b/src/components/shop/CartDrawer.tsx
@@ -1,4 +1,4 @@
-import * as Dialog from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { Link } from '@tanstack/react-router'
 import {
   MinusIcon,
@@ -30,8 +30,8 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/40" />
-        <Dialog.Content
+        <Dialog.Backdrop className="cart-overlay fixed inset-0 z-[100] bg-black/40" />
+        <Dialog.Popup
           className={twMerge(
             'shop-scope cart-panel',
             'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
@@ -41,14 +41,15 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
             'bg-shop-bg-2 border border-shop-line text-shop-text',
             'shadow-2xl',
           )}
-          aria-describedby={undefined}
         >
           <header className="flex items-center justify-between px-5 py-3 border-b border-shop-line">
-            <Dialog.Title asChild>
-              <ShopLabel as="h2">
-                Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
-              </ShopLabel>
-            </Dialog.Title>
+            <Dialog.Title
+              render={
+                <ShopLabel as="h2">
+                  Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
+                </ShopLabel>
+              }
+            />
             <Dialog.Close
               aria-label="Close cart"
               className="p-1 rounded-md text-shop-text-2 hover:text-shop-text"
@@ -73,7 +74,7 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
           ) : (
             <DrawerEmpty onClose={() => onOpenChange(false)} />
           )}
-        </Dialog.Content>
+        </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>
   )
diff --git a/src/routes/ds.buttons.tsx b/src/routes/ds.buttons.tsx
index 75242d644..e58a8ceba 100644
--- a/src/routes/ds.buttons.tsx
+++ b/src/routes/ds.buttons.tsx
@@ -341,11 +341,13 @@ function ButtonsPage() {
           code={`<div className="inline-flex overflow-hidden rounded-lg">
   <Button rounded="none">Deploy</Button>
   <Dropdown>
-    <DropdownTrigger>
-      <Button rounded="none" aria-label="More deploy options" className="border-l border-white/20 px-2">
-        <CaretDownIcon />
-      </Button>
-    </DropdownTrigger>
+    <DropdownTrigger
+      render={
+        <Button rounded="none" aria-label="More deploy options" className="border-l border-white/20 px-2">
+          <CaretDownIcon />
+        </Button>
+      }
+    />
     <DropdownContent align="end">
       <DropdownItem>Deploy to production</DropdownItem>
       <DropdownItem>Deploy a preview</DropdownItem>
@@ -358,15 +360,17 @@ function ButtonsPage() {
           <div className="inline-flex overflow-hidden rounded-lg">
             <Button rounded="none">Deploy</Button>
             <Dropdown>
-              <DropdownTrigger>
-                <Button
-                  rounded="none"
-                  aria-label="More deploy options"
-                  className="border-l border-white/20 px-2"
-                >
-                  <CaretDownIcon className="h-4 w-4" />
-                </Button>
-              </DropdownTrigger>
+              <DropdownTrigger
+                render={
+                  <Button
+                    rounded="none"
+                    aria-label="More deploy options"
+                    className="border-l border-white/20 px-2"
+                  >
+                    <CaretDownIcon className="h-4 w-4" />
+                  </Button>
+                }
+              />
               <DropdownContent align="end">
                 <DropdownItem>Deploy to production</DropdownItem>
                 <DropdownItem>Deploy a preview</DropdownItem>
diff --git a/src/routes/ds.cards.tsx b/src/routes/ds.cards.tsx
index 784427899..249a946ac 100644
--- a/src/routes/ds.cards.tsx
+++ b/src/routes/ds.cards.tsx
@@ -100,7 +100,7 @@ function CardsPage() {
 
       <DsSection
         title="Tooltip"
-        description="Radix-powered tooltip. Hover or focus the trigger. Source: src/ui/Tooltip.tsx."
+        description="Base UI-powered tooltip. Hover or focus the trigger. Source: src/ui/Tooltip.tsx."
       >
         <ComponentPreview
           code={`<Tooltip content="Copied to clipboard">
diff --git a/src/routes/ds.dropdown.tsx b/src/routes/ds.dropdown.tsx
index a909c37fa..92ad31b54 100644
--- a/src/routes/ds.dropdown.tsx
+++ b/src/routes/ds.dropdown.tsx
@@ -21,7 +21,7 @@ export const Route = createFileRoute('/ds/dropdown')({
   head: () => ({
     meta: seo({
       title: 'Dropdown | TanStack Design System',
-      description: 'The Radix-powered Dropdown menu.',
+      description: 'The Base UI-powered Dropdown menu.',
     }),
   }),
 })
@@ -30,7 +30,7 @@ function DropdownPage() {
   return (
     <DsPage
       title="Dropdown"
-      description="A menu built on Radix primitives, composed from Dropdown + Trigger + Content + Item + Separator. Source: src/components/Dropdown.tsx."
+      description="A menu built on Base UI primitives, composed from Dropdown + Trigger + Content + Item + Separator. Source: src/components/Dropdown.tsx."
     >
       <DsSection
         title="Basic menu"
@@ -38,9 +38,9 @@ function DropdownPage() {
       >
         <ComponentPreview
           code={`<Dropdown>
-  <DropdownTrigger>
-    <Button variant="secondary">Account <CaretDownIcon /></Button>
-  </DropdownTrigger>
+  <DropdownTrigger
+    render={<Button variant="secondary">Account <CaretDownIcon /></Button>}
+  />
   <DropdownContent align="start">
     <DropdownItem><UserIcon /> Profile</DropdownItem>
     <DropdownItem><GearIcon /> Settings</DropdownItem>
@@ -50,11 +50,13 @@ function DropdownPage() {
 </Dropdown>`}
         >
           <Dropdown>
-            <DropdownTrigger>
-              <Button variant="secondary">
-                Account <CaretDownIcon className="h-4 w-4" />
-              </Button>
-            </DropdownTrigger>
+            <DropdownTrigger
+              render={
+                <Button variant="secondary">
+                  Account <CaretDownIcon className="h-4 w-4" />
+                </Button>
+              }
+            />
             <DropdownContent align="start">
               <DropdownItem>
                 <UserIcon className="h-4 w-4" /> Profile
diff --git a/src/routes/ds.iconography.lazy.tsx b/src/routes/ds.iconography.lazy.tsx
index 5f810d914..96a958a71 100644
--- a/src/routes/ds.iconography.lazy.tsx
+++ b/src/routes/ds.iconography.lazy.tsx
@@ -97,13 +97,15 @@ function IconographyPage() {
         <div className="mb-6 flex flex-wrap items-center gap-3">
           {/* Style (weight) — dropdown with a live preview per weight */}
           <Dropdown>
-            <DropdownTrigger>
-              <button type="button" className={triggerClass}>
-                <StarIcon weight={weight} size={17} />
-                <span className="capitalize">{weight}</span>
-                <CaretDownIcon size={13} className="text-text-muted" />
-              </button>
-            </DropdownTrigger>
+            <DropdownTrigger
+              render={
+                <button type="button" className={triggerClass}>
+                  <StarIcon weight={weight} size={17} />
+                  <span className="capitalize">{weight}</span>
+                  <CaretDownIcon size={13} className="text-text-muted" />
+                </button>
+              }
+            />
             <DropdownContent align="start" className="min-w-44">
               {WEIGHTS.map((w) => (
                 <DropdownItem key={w} onSelect={() => setWeight(w)}>
@@ -119,13 +121,15 @@ function IconographyPage() {
 
           {/* Size — dropdown with a scaling size glyph per option */}
           <Dropdown>
-            <DropdownTrigger>
-              <button type="button" className={triggerClass}>
-                <SizeGlyph px={size} />
-                <span className="tabular-nums">{size}px</span>
-                <CaretDownIcon size={13} className="text-text-muted" />
-              </button>
-            </DropdownTrigger>
+            <DropdownTrigger
+              render={
+                <button type="button" className={triggerClass}>
+                  <SizeGlyph px={size} />
+                  <span className="tabular-nums">{size}px</span>
+                  <CaretDownIcon size={13} className="text-text-muted" />
+                </button>
+              }
+            />
             <DropdownContent align="start" className="min-w-40">
               {SIZES.map((s) => (
                 <DropdownItem key={s} onSelect={() => setSize(s)}>
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx
index 472885b0b..535afac34 100644
--- a/src/routes/stats/npm/index.tsx
+++ b/src/routes/stats/npm/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
 import { useThrottledCallback, useThrottler } from '@tanstack/react-pacer'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import { QuestionIcon as HelpCircle, XIcon } from '@phosphor-icons/react'
 import { useQuery } from '@tanstack/react-query'
 import { Card } from '~/components/ds/ui'
@@ -1074,27 +1074,27 @@ function RouteComponent() {
           </div>
 
           {/* Combine Package Dialog */}
-          <DialogPrimitive.Root
+          <Dialog.Root
             open={combiningPackage !== null}
             onOpenChange={(open) => {
               if (!open) setCombiningPackage(null)
             }}
           >
-            <DialogPrimitive.Portal>
-              <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
-              <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[1000] w-[calc(100%-1rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-4 shadow-xl outline-none">
+            <Dialog.Portal>
+              <Dialog.Backdrop className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
+              <Dialog.Popup className="fixed left-1/2 top-1/2 z-[1000] w-[calc(100%-1rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-4 shadow-xl outline-none">
                 <div className="flex justify-between items-center mb-4">
-                  <DialogPrimitive.Title className="text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100">
+                  <Dialog.Title className="text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100">
                     Add packages to {combiningPackage}
-                  </DialogPrimitive.Title>
-                  <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500">
+                  </Dialog.Title>
+                  <Dialog.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500">
                     <XIcon className="w-4 h-4 sm:w-5 sm:h-5" />
-                  </DialogPrimitive.Close>
+                  </Dialog.Close>
                 </div>
-                <DialogPrimitive.Description className="sr-only">
+                <Dialog.Description className="sr-only">
                   Search for additional npm packages to combine with{' '}
                   {combiningPackage}.
-                </DialogPrimitive.Description>
+                </Dialog.Description>
                 {combiningPackage && (
                   <PackageSearch
                     onSelect={handleAddToGroup}
@@ -1103,9 +1103,9 @@ function RouteComponent() {
                     autoFocus={true}
                   />
                 )}
-              </DialogPrimitive.Content>
-            </DialogPrimitive.Portal>
-          </DialogPrimitive.Root>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
 
           {/* Color Picker Popover */}
           {colorPickerPackage && colorPickerPosition && (
diff --git a/src/styles/app.css b/src/styles/app.css
index 8d1db610c..1f483ae79 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -2174,7 +2174,7 @@ html:not(.dark) .library-landing-graphic [style*='drop-shadow'] {
   animation: dropdown-in 150ms ease-out;
 }
 
-.dropdown-content[data-state='closed'] {
+.dropdown-content[data-ending-style] {
   animation: dropdown-out 100ms ease-in;
 }
 
@@ -2219,11 +2219,11 @@ html:not(.dark) .library-landing-graphic [style*='drop-shadow'] {
   }
 }
 
-.search-modal-overlay[data-state='open'] {
+.search-modal-overlay[data-open] {
   animation: search-modal-overlay-in 140ms ease-out both;
 }
 
-.search-modal-overlay[data-state='closed'] {
+.search-modal-overlay[data-ending-style] {
   animation: search-modal-overlay-out 120ms ease-in both;
 }
 
@@ -2231,11 +2231,11 @@ html:not(.dark) .library-landing-graphic [style*='drop-shadow'] {
   transform-origin: top center;
 }
 
-.search-modal-content[data-state='open'] .search-modal-panel-transition {
+.search-modal-content[data-open] .search-modal-panel-transition {
   animation: search-modal-panel-in 140ms ease-out both;
 }
 
-.search-modal-content[data-state='closed'] .search-modal-panel-transition {
+.search-modal-content[data-ending-style] .search-modal-panel-transition {
   animation: search-modal-panel-out 120ms ease-in both;
 }
 
@@ -2287,19 +2287,19 @@ html:not(.dark) .library-landing-graphic [style*='drop-shadow'] {
   }
 }
 
-.cart-panel[data-state='open'] {
+.cart-panel[data-open] {
   animation: cart-panel-in 200ms ease-out;
 }
 
-.cart-panel[data-state='closed'] {
+.cart-panel[data-ending-style] {
   animation: cart-panel-out 150ms ease-in;
 }
 
-.cart-overlay[data-state='open'] {
+.cart-overlay[data-open] {
   animation: cart-overlay-in 200ms ease-out;
 }
 
-.cart-overlay[data-state='closed'] {
+.cart-overlay[data-ending-style] {
   animation: cart-overlay-out 150ms ease-in;
 }
 
diff --git a/src/ui/Tooltip.tsx b/src/ui/Tooltip.tsx
index bf9fa6e44..f19c9e8c4 100644
--- a/src/ui/Tooltip.tsx
+++ b/src/ui/Tooltip.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
 import { twMerge } from 'tailwind-merge'
 
 interface TooltipProps {
-  children: React.ReactNode
+  children: React.ReactElement
   content: React.ReactNode
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
@@ -24,29 +24,27 @@ export function Tooltip({
   }
 
   return (
-    <TooltipPrimitive.Provider delayDuration={delayDuration}>
-      <TooltipPrimitive.Root>
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Content
-            side={side}
-            align={align}
-            sideOffset={5}
+    <BaseTooltip.Root>
+      <BaseTooltip.Trigger delay={delayDuration} render={children} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner side={side} align={align} sideOffset={5}>
+          <BaseTooltip.Popup
             className={twMerge(
               'z-50 rounded-lg px-3 py-2 text-xs',
               'bg-background-inverse text-text-inverse',
               'shadow-lg',
-              'animate-in fade-in-0 zoom-in-95',
-              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-              '[transform-origin:var(--radix-tooltip-content-transform-origin)] motion-reduce:animate-none',
+              'origin-(--transform-origin) transition',
+              'data-starting-style:scale-95 data-starting-style:opacity-0',
+              'data-ending-style:scale-95 data-ending-style:opacity-0',
+              'motion-reduce:transition-none',
               className,
             )}
           >
             {content}
-            <TooltipPrimitive.Arrow className="fill-background-inverse" />
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
+            <BaseTooltip.Arrow className="fill-background-inverse" />
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
   )
 }