diff --git a/.changeset/real-dragons-hug.md b/.changeset/real-dragons-hug.md
new file mode 100644
index 00000000..afee3e17
--- /dev/null
+++ b/.changeset/real-dragons-hug.md
@@ -0,0 +1,10 @@
+---
+'@tanstack/devtools-client': patch
+'@tanstack/react-devtools': patch
+'@tanstack/solid-devtools': patch
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools-ui': patch
+'@tanstack/devtools': patch
+---
+
+Added plugin marketplace functionality into devtools
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 50ded764..1f100aa3 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -12,6 +12,7 @@
     "@tanstack/devtools-client": "0.0.2",
     "@tanstack/devtools-event-client": "0.3.3",
     "@tanstack/react-devtools": "^0.7.6",
+    "@tanstack/react-form": "^1.23.7",
     "@tanstack/react-query": "^5.90.1",
     "@tanstack/react-query-devtools": "^5.90.1",
     "@tanstack/react-router": "^1.131.50",
@@ -23,6 +24,7 @@
   "devDependencies": {
     "@tanstack/devtools-ui": "0.4.2",
     "@tanstack/devtools-vite": "0.3.6",
+    "@tanstack/react-form-devtools": "^0.1.7",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^4.7.0",
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
index 191f158c..04679e38 100644
--- a/examples/react/basic/src/setup.tsx
+++ b/examples/react/basic/src/setup.tsx
@@ -27,7 +27,6 @@ const rootRoute = createRootRoute({
     </>
   ),
 })
-
 const indexRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/',
@@ -46,17 +45,15 @@ function About() {
     </div>
   )
 }
-
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
   component: About,
 })
-
 const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
-
-const router = createRouter({ routeTree })
-
+const router = createRouter({
+  routeTree,
+})
 export default function DevtoolsExample() {
   return (
     <>
@@ -78,9 +75,9 @@ export default function DevtoolsExample() {
             render: () => <PackageJsonPanel />,
           },
           /* {
-            name: "The actual app",
-            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
-          } */
+      name: "The actual app",
+      render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+    } */
         ]}
       />
       <RouterProvider router={router} />
diff --git a/package.json b/package.json
index 4d39c4a9..bc949e0d 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/index.js",
-      "limit": "50 KB"
+      "limit": "60 KB"
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",
diff --git a/packages/devtools-client/src/index.ts b/packages/devtools-client/src/index.ts
index 939132e8..00dc0572 100644
--- a/packages/devtools-client/src/index.ts
+++ b/packages/devtools-client/src/index.ts
@@ -43,6 +43,15 @@ export interface OutdatedDeps {
   }
 }
 
+export interface PluginInjection {
+  packageName: string
+  pluginName: string
+  pluginImport?: {
+    importName: string
+    type: 'jsx' | 'function'
+  }
+}
+
 interface EventMap {
   'tanstack-devtools-core:ready': {
     packageJson: PackageJson | null
@@ -55,6 +64,25 @@ interface EventMap {
     packageJson: PackageJson | null
   }
   'tanstack-devtools-core:mounted': void
+  'tanstack-devtools-core:install-devtools': PluginInjection
+  'tanstack-devtools-core:devtools-installed': {
+    packageName: string
+    success: boolean
+    error?: string
+  }
+  'tanstack-devtools-core:add-plugin-to-devtools': PluginInjection
+  'tanstack-devtools-core:plugin-added': {
+    packageName: string
+    success: boolean
+    error?: string
+  }
+  'tanstack-devtools-core:bump-package-version': PluginInjection & {
+    devtoolsPackage: string
+    minVersion?: string
+  }
+  'tanstack-devtools-core:package-json-updated': {
+    packageJson: PackageJson | null
+  }
 }
 
 export class DevtoolsEventClient extends EventClient<EventMap> {
diff --git a/packages/devtools-ui/src/components/icons.tsx b/packages/devtools-ui/src/components/icons.tsx
index ee36e8af..3284d681 100644
--- a/packages/devtools-ui/src/components/icons.tsx
+++ b/packages/devtools-ui/src/components/icons.tsx
@@ -507,6 +507,173 @@ export function X() {
   )
 }
 
+export function PackageIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.5 9.39999L7.5 4.20999M12 17.5L12 3M21 16V7.99999C20.9996 7.64926 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.26999L13 2.26999C12.696 2.09446 12.3511 2.00204 12 2.00204C11.6489 2.00204 11.304 2.09446 11 2.26999L4 6.26999C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64926 3 7.99999V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function CheckCircleIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.76489 14.1003 1.98232 16.07 2.85999M22 4L12 14.01L9 11.01"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function XCircleIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ChevronDownIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 9L12 15L18 9"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function SearchIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ExternalLinkIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 13V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H11M15 3H21M21 3V9M21 3L10 14"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function SettingsIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function CloseIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 6L6 18M6 6L18 18"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
 export function PiP() {
   return (
     <svg
diff --git a/packages/devtools-ui/src/index.ts b/packages/devtools-ui/src/index.ts
index c32b496c..96dfa7f9 100644
--- a/packages/devtools-ui/src/index.ts
+++ b/packages/devtools-ui/src/index.ts
@@ -14,3 +14,14 @@ export {
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
 export { useTheme, ThemeContextProvider } from './components/theme'
+export {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CloseIcon,
+  ExternalLinkIcon,
+  PackageIcon,
+  SearchIcon,
+  SettingsIcon,
+  X,
+  XCircleIcon,
+} from './icons'
diff --git a/packages/devtools-vite/src/inject-plugin.test.ts b/packages/devtools-vite/src/inject-plugin.test.ts
new file mode 100644
index 00000000..933b98d4
--- /dev/null
+++ b/packages/devtools-vite/src/inject-plugin.test.ts
@@ -0,0 +1,1086 @@
+import { describe, expect, test } from 'vitest'
+import {
+  detectDevtoolsFile,
+  findDevtoolsComponentName,
+  transformAndInject,
+} from './inject-plugin'
+import { gen, parse } from './babel'
+
+const removeEmptySpace = (str: string) => {
+  return str.replace(/\s/g, '').trim()
+}
+
+// Helper to test transformation without file I/O
+const testTransform = (
+  code: string,
+  packageName: string,
+  pluginName: string,
+  pluginImport: {
+    importName: string
+    type: 'jsx' | 'function'
+  },
+) => {
+  const ast = parse(code, {
+    sourceType: 'module',
+    plugins: ['jsx', 'typescript'],
+  })
+
+  const devtoolsComponentName = findDevtoolsComponentName(ast)
+  if (!devtoolsComponentName) {
+    return { transformed: false, code }
+  }
+
+  const didTransform = transformAndInject(
+    ast,
+    { packageName, pluginName, pluginImport },
+    devtoolsComponentName,
+  )
+
+  if (!didTransform) {
+    return { transformed: false, code }
+  }
+
+  const result = gen(ast, { sourceMaps: false, retainLines: false })
+  return { transformed: true, code: result.code }
+}
+
+describe('inject-plugin', () => {
+  describe('detectDevtoolsFile', () => {
+    test('should detect named import from @tanstack/react-devtools', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+      `
+      expect(detectDevtoolsFile(code)).toBe(true)
+    })
+
+    test('should detect named import from @tanstack/solid-devtools', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/solid-devtools'
+      `
+      expect(detectDevtoolsFile(code)).toBe(true)
+    })
+
+    test('should detect namespace import', () => {
+      const code = `
+        import * as Devtools from '@tanstack/react-devtools'
+      `
+      expect(detectDevtoolsFile(code)).toBe(true)
+    })
+
+    test('should detect renamed named import', () => {
+      const code = `
+        import { TanStackDevtools as DevtoolsPanel } from '@tanstack/react-devtools'
+      `
+      expect(detectDevtoolsFile(code)).toBe(true)
+    })
+
+    test('should not detect non-devtools imports', () => {
+      const code = `
+        import React from 'react'
+        import { useState } from 'react'
+      `
+      expect(detectDevtoolsFile(code)).toBe(false)
+    })
+
+    test('should not detect files without imports', () => {
+      const code = `
+        function App() {
+          return <div>Hello</div>
+        }
+      `
+      expect(detectDevtoolsFile(code)).toBe(false)
+    })
+
+    test('should handle invalid code gracefully', () => {
+      const code = `
+        this is not valid javascript{{{
+      `
+      expect(detectDevtoolsFile(code)).toBe(false)
+    })
+  })
+
+  describe('named import pattern', () => {
+    test('should add plugin to existing empty plugins array', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should add plugin to existing plugins array with other plugins', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { OtherPlugin } from '@tanstack/other-plugin'
+        
+        function App() {
+          return <TanStackDevtools plugins={[
+            { name: 'other', render: <OtherPlugin /> }
+          ]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { OtherPlugin } from '@tanstack/other-plugin';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[
+              { name: 'other', render: <OtherPlugin /> },
+              {
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />
+              }
+            ]} />;
+          }
+        `),
+      )
+    })
+
+    test('should create plugins prop if it does not exist', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should create plugins prop with other existing props', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools position="bottom-right" />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools position="bottom-right" plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should not add plugin if it already exists', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[
+            { name: 'TanStack Query', render: <ReactQueryDevtoolsPanel /> }
+          ]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(false)
+    })
+  })
+
+  describe('renamed named import pattern', () => {
+    test('should handle renamed named import', () => {
+      const code = `
+        import { TanStackDevtools as DevtoolsPanel } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <DevtoolsPanel plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools as DevtoolsPanel } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <DevtoolsPanel plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should handle renamed import without plugins prop', () => {
+      const code = `
+        import { TanStackDevtools as MyDevtools } from '@tanstack/solid-devtools'
+        
+        function App() {
+          return <MyDevtools />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools as MyDevtools } from '@tanstack/solid-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <MyDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+  })
+
+  describe('namespace import pattern', () => {
+    test('should handle namespace import', () => {
+      const code = `
+        import * as DevtoolsModule from '@tanstack/react-devtools'
+        
+        function App() {
+          return <DevtoolsModule.TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import * as DevtoolsModule from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <DevtoolsModule.TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should handle namespace import without plugins prop', () => {
+      const code = `
+        import * as TSD from '@tanstack/solid-devtools'
+        
+        function App() {
+          return <TSD.TanStackDevtools />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/solid-router-devtools',
+        'TanStack Router',
+        {
+          importName: 'SolidRouterDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import * as TSD from '@tanstack/solid-devtools';
+          import { SolidRouterDevtoolsPanel } from "@tanstack/solid-router-devtools";
+          
+          function App() {
+            return <TSD.TanStackDevtools plugins={[{
+              name: "TanStack Router",
+              render: <SolidRouterDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+  })
+
+  describe('different plugin types', () => {
+    test('should handle router devtools', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-router-devtools',
+        'TanStack Router',
+        {
+          importName: 'ReactRouterDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Router",
+              render: <ReactRouterDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should handle form devtools', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/solid-devtools'
+        
+        function App() {
+          return <TanStackDevtools />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'TanStack Form',
+        {
+          importName: 'ReactFormDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/solid-devtools';
+          import { ReactFormDevtoolsPanel } from "@tanstack/react-form-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Form",
+              render: <ReactFormDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+
+    test('should handle query devtools', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/vue-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/vue-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          }
+        `),
+      )
+    })
+  })
+
+  describe('edge cases', () => {
+    test('should not transform files without TanStackDevtools component', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <div>Hello World</div>
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(false)
+    })
+
+    test('should handle TanStackDevtools with children', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return (
+            <TanStackDevtools plugins={[]}>
+              <div>Custom content</div>
+            </TanStackDevtools>
+          )
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]}>
+              <div>Custom content</div>
+            </TanStackDevtools>;
+          }
+        `),
+      )
+    })
+
+    test('should handle multiple TanStackDevtools in same file', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return (
+            <>
+              <TanStackDevtools plugins={[]} />
+              <TanStackDevtools plugins={[]} />
+            </>
+          )
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <>
+              <TanStackDevtools plugins={[{
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />
+              }]} />
+              <TanStackDevtools plugins={[{
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />
+              }]} />
+            </>;
+          }
+        `),
+      )
+    })
+
+    test('should handle TanStackDevtools deeply nested', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return (
+            <div>
+              <header>
+                <nav>
+                  <TanStackDevtools plugins={[]} />
+                </nav>
+              </header>
+            </div>
+          )
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <div>
+              <header>
+                <nav>
+                  <TanStackDevtools plugins={[{
+                    name: "TanStack Query",
+                    render: <ReactQueryDevtoolsPanel />
+                  }]} />
+                </nav>
+              </header>
+            </div>;
+          }
+        `),
+      )
+    })
+
+    test('should preserve existing code formatting and structure', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { useState } from 'react'
+        
+        function App() {
+          const [count, setCount] = useState(0)
+          
+          return (
+            <div>
+              <button onClick={() => setCount(count + 1)}>
+                Count: {count}
+              </button>
+              <TanStackDevtools />
+            </div>
+          )
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { useState } from 'react';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            const [count, setCount] = useState(0);
+            return <div>
+              <button onClick={() => setCount(count + 1)}>
+                Count: {count}
+              </button>
+              <TanStackDevtools plugins={[{
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />
+              }]} />
+            </div>;
+          }
+        `),
+      )
+    })
+
+    test('should handle TypeScript code', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import type { FC } from 'react'
+        
+        const App: FC = () => {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import type { FC } from 'react';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          const App: FC = () => {
+            return <TanStackDevtools plugins={[{
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />
+            }]} />;
+          };
+        `),
+      )
+    })
+
+    test('should handle plugins array with trailing comma', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[
+            { name: 'other', render: <OtherPlugin /> },
+          ]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[
+              { name: 'other', render: <OtherPlugin /> },
+              {
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />
+              }
+            ]} />;
+          }
+        `),
+      )
+    })
+
+    test('should not transform if devtools import not found', () => {
+      const code = `
+        import { SomeOtherComponent } from 'some-package'
+        
+        function App() {
+          return <SomeOtherComponent />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: 'ReactQueryDevtoolsPanel',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(false)
+    })
+  })
+
+  describe('function-based plugins', () => {
+    test('should add function plugin to empty plugins array', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'react-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { FormDevtoolsPlugin } from "@tanstack/react-form-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />;
+          }
+        `),
+      )
+    })
+
+    test('should add function plugin alongside JSX plugins', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[
+            { name: 'TanStack Query', render: <ReactQueryDevtoolsPanel /> }
+          ]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'react-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+          import { FormDevtoolsPlugin } from "@tanstack/react-form-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[
+              { name: 'TanStack Query', render: <ReactQueryDevtoolsPanel /> },
+              FormDevtoolsPlugin()
+            ]} />;
+          }
+        `),
+      )
+    })
+
+    test('should create plugins prop with function plugin when it does not exist', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'react-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { FormDevtoolsPlugin } from "@tanstack/react-form-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />;
+          }
+        `),
+      )
+    })
+
+    test('should not add function plugin if it already exists', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'react-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(false)
+    })
+
+    test('should handle function plugin with renamed devtools import', () => {
+      const code = `
+        import { TanStackDevtools as DevtoolsPanel } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <DevtoolsPanel plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-form-devtools',
+        'react-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools as DevtoolsPanel } from '@tanstack/react-devtools';
+          import { FormDevtoolsPlugin } from "@tanstack/react-form-devtools";
+          
+          function App() {
+            return <DevtoolsPanel plugins={[FormDevtoolsPlugin()]} />;
+          }
+        `),
+      )
+    })
+
+    test('should handle function plugin with namespace import', () => {
+      const code = `
+        import * as DevtoolsModule from '@tanstack/solid-devtools'
+        
+        function App() {
+          return <DevtoolsModule.TanStackDevtools plugins={[]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/solid-form-devtools',
+        'solid-form',
+        {
+          importName: 'FormDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import * as DevtoolsModule from '@tanstack/solid-devtools';
+          import { FormDevtoolsPlugin } from "@tanstack/solid-form-devtools";
+          
+          function App() {
+            return <DevtoolsModule.TanStackDevtools plugins={[FormDevtoolsPlugin()]} />;
+          }
+        `),
+      )
+    })
+
+    test('should add multiple function plugins correctly', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+        }
+      `
+
+      const result = testTransform(
+        code,
+        '@tanstack/react-router-devtools',
+        'react-router',
+        {
+          importName: 'RouterDevtoolsPlugin',
+          type: 'function',
+        },
+      )
+
+      expect(result.transformed).toBe(true)
+      expect(removeEmptySpace(result.code)).toBe(
+        removeEmptySpace(`
+          import { TanStackDevtools } from '@tanstack/react-devtools';
+          import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools';
+          import { RouterDevtoolsPlugin } from "@tanstack/react-router-devtools";
+          
+          function App() {
+            return <TanStackDevtools plugins={[FormDevtoolsPlugin(), RouterDevtoolsPlugin()]} />;
+          }
+        `),
+      )
+    })
+
+    test('should not transform when pluginImport is not provided', () => {
+      const code = `
+        import { TanStackDevtools } from '@tanstack/react-devtools'
+        
+        function App() {
+          return <TanStackDevtools plugins={[]} />
+        }
+      `
+
+      // No pluginImport provided - should return false
+      const result = testTransform(
+        code,
+        '@tanstack/react-query-devtools',
+        'TanStack Query',
+        {
+          importName: '',
+          type: 'jsx',
+        },
+      )
+
+      expect(result.transformed).toBe(false)
+    })
+  })
+})
diff --git a/packages/devtools-vite/src/inject-plugin.ts b/packages/devtools-vite/src/inject-plugin.ts
new file mode 100644
index 00000000..570ce667
--- /dev/null
+++ b/packages/devtools-vite/src/inject-plugin.ts
@@ -0,0 +1,343 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { gen, parse, t, trav } from './babel'
+import type { PluginInjection } from '@tanstack/devtools-client'
+import type { types as Babel } from '@babel/core'
+import type { ParseResult } from '@babel/parser'
+
+/**
+ * Detects if a file imports TanStack devtools packages
+ * Handles: import X from '@tanstack/react-devtools'
+ *          import * as X from '@tanstack/react-devtools'
+ *          import { TanStackDevtools } from '@tanstack/react-devtools'
+ */
+const detectDevtoolsImport = (code: string): boolean => {
+  const devtoolsPackages = [
+    '@tanstack/react-devtools',
+    '@tanstack/solid-devtools',
+    '@tanstack/vue-devtools',
+    '@tanstack/svelte-devtools',
+    '@tanstack/angular-devtools',
+  ]
+
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    })
+
+    let hasDevtoolsImport = false
+
+    trav(ast, {
+      ImportDeclaration(path) {
+        const importSource = path.node.source.value
+        if (devtoolsPackages.includes(importSource)) {
+          hasDevtoolsImport = true
+          path.stop()
+        }
+      },
+    })
+
+    return hasDevtoolsImport
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * Finds the TanStackDevtools component name in the file
+ * Handles renamed imports and namespace imports
+ */
+export const findDevtoolsComponentName = (
+  ast: ParseResult<Babel.File>,
+): string | null => {
+  let componentName: string | null = null
+  const devtoolsPackages = [
+    '@tanstack/react-devtools',
+    '@tanstack/solid-devtools',
+    '@tanstack/vue-devtools',
+    '@tanstack/svelte-devtools',
+    '@tanstack/angular-devtools',
+  ]
+
+  trav(ast, {
+    ImportDeclaration(path) {
+      const importSource = path.node.source.value
+      if (devtoolsPackages.includes(importSource)) {
+        // Check for: import { TanStackDevtools } from '@tanstack/...'
+        const namedImport = path.node.specifiers.find(
+          (spec) =>
+            t.isImportSpecifier(spec) &&
+            t.isIdentifier(spec.imported) &&
+            spec.imported.name === 'TanStackDevtools',
+        )
+        if (namedImport && t.isImportSpecifier(namedImport)) {
+          componentName = namedImport.local.name
+          path.stop()
+          return
+        }
+
+        // Check for: import * as DevtoolsName from '@tanstack/...'
+        const namespaceImport = path.node.specifiers.find((spec) =>
+          t.isImportNamespaceSpecifier(spec),
+        )
+        if (namespaceImport && t.isImportNamespaceSpecifier(namespaceImport)) {
+          // For namespace imports, we need to look for DevtoolsName.TanStackDevtools
+          componentName = `${namespaceImport.local.name}.TanStackDevtools`
+          path.stop()
+          return
+        }
+      }
+    },
+  })
+
+  return componentName
+}
+
+export const transformAndInject = (
+  ast: ParseResult<Babel.File>,
+  injection: PluginInjection,
+  devtoolsComponentName: string,
+) => {
+  let didTransform = false
+
+  // Use pluginImport if provided, otherwise generate from package name
+  const importName = injection.pluginImport?.importName
+  const pluginType = injection.pluginImport?.type || 'jsx'
+  const displayName = injection.pluginName
+
+  if (!importName) {
+    return false
+  }
+  // Handle namespace imports like DevtoolsModule.TanStackDevtools
+  const isNamespaceImport = devtoolsComponentName.includes('.')
+
+  // Find and modify the TanStackDevtools JSX element
+  trav(ast, {
+    JSXOpeningElement(path) {
+      const elementName = path.node.name
+      let matches = false
+
+      if (isNamespaceImport) {
+        // Handle <DevtoolsModule.TanStackDevtools />
+        if (t.isJSXMemberExpression(elementName)) {
+          const fullName = `${t.isJSXIdentifier(elementName.object) ? elementName.object.name : ''}.${t.isJSXIdentifier(elementName.property) ? elementName.property.name : ''}`
+          matches = fullName === devtoolsComponentName
+        }
+      } else {
+        // Handle <TanStackDevtools /> or <RenamedDevtools />
+        matches =
+          t.isJSXIdentifier(elementName) &&
+          elementName.name === devtoolsComponentName
+      }
+
+      if (matches) {
+        // Find the plugins prop
+        const pluginsProp = path.node.attributes.find(
+          (attr) =>
+            t.isJSXAttribute(attr) &&
+            t.isJSXIdentifier(attr.name) &&
+            attr.name.name === 'plugins',
+        )
+        // plugins found
+        if (pluginsProp && t.isJSXAttribute(pluginsProp)) {
+          // Check if plugins prop has a value
+          if (
+            pluginsProp.value &&
+            t.isJSXExpressionContainer(pluginsProp.value)
+          ) {
+            const expression = pluginsProp.value.expression
+
+            // If it's an array expression, add our plugin to it
+            if (t.isArrayExpression(expression)) {
+              // Check if plugin already exists
+              const pluginExists = expression.elements.some((element) => {
+                if (!element) return false
+
+                // For function-based plugins, check if the function call exists
+                if (pluginType === 'function') {
+                  return (
+                    t.isCallExpression(element) &&
+                    t.isIdentifier(element.callee) &&
+                    element.callee.name === importName
+                  )
+                }
+
+                // For JSX plugins, check object with name property
+                if (!t.isObjectExpression(element)) return false
+
+                return element.properties.some((prop) => {
+                  if (
+                    !t.isObjectProperty(prop) ||
+                    !t.isIdentifier(prop.key) ||
+                    prop.key.name !== 'name'
+                  ) {
+                    return false
+                  }
+
+                  return (
+                    t.isStringLiteral(prop.value) &&
+                    prop.value.value === displayName
+                  )
+                })
+              })
+
+              if (!pluginExists) {
+                // For function-based plugins, add them directly as function calls
+                // For JSX plugins, wrap them in objects with name and render
+                if (pluginType === 'function') {
+                  // Add directly: FormDevtoolsPlugin()
+                  expression.elements.push(
+                    t.callExpression(t.identifier(importName), []),
+                  )
+                } else {
+                  // Add as object: { name: "...", render: <Component /> }
+                  const renderValue = t.jsxElement(
+                    t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),
+                    null,
+                    [],
+                    true,
+                  )
+
+                  expression.elements.push(
+                    t.objectExpression([
+                      t.objectProperty(
+                        t.identifier('name'),
+                        t.stringLiteral(displayName),
+                      ),
+                      t.objectProperty(t.identifier('render'), renderValue),
+                    ]),
+                  )
+                }
+
+                didTransform = true
+              }
+            }
+          }
+        } else {
+          // No plugins prop exists, create one with our plugin
+          // For function-based plugins, add them directly as function calls
+          // For JSX plugins, wrap them in objects with name and render
+          let pluginElement
+          if (pluginType === 'function') {
+            // Add directly: plugins={[FormDevtoolsPlugin()]}
+            pluginElement = t.callExpression(t.identifier(importName), [])
+          } else {
+            // Add as object: plugins={[{ name: "...", render: <Component /> }]}
+            const renderValue = t.jsxElement(
+              t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),
+              null,
+              [],
+              true,
+            )
+
+            pluginElement = t.objectExpression([
+              t.objectProperty(
+                t.identifier('name'),
+                t.stringLiteral(displayName),
+              ),
+              t.objectProperty(t.identifier('render'), renderValue),
+            ])
+          }
+
+          path.node.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('plugins'),
+              t.jsxExpressionContainer(t.arrayExpression([pluginElement])),
+            ),
+          )
+
+          didTransform = true
+        }
+      }
+    },
+  })
+
+  // Add import at the top of the file if transform happened
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (didTransform) {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier(importName), t.identifier(importName))],
+      t.stringLiteral(injection.packageName),
+    )
+
+    // Find the last import declaration
+    let lastImportIndex = -1
+    ast.program.body.forEach((node, index) => {
+      if (t.isImportDeclaration(node)) {
+        lastImportIndex = index
+      }
+    })
+
+    // Insert after the last import or at the beginning
+    ast.program.body.splice(lastImportIndex + 1, 0, importDeclaration)
+  }
+
+  return didTransform
+}
+
+/**
+ * Detects if a file contains TanStack devtools import
+ */
+export function detectDevtoolsFile(code: string): boolean {
+  return detectDevtoolsImport(code)
+}
+
+/**
+ * Injects a plugin into the TanStackDevtools component in a file
+ * Reads the file, transforms it, and writes it back
+ */
+export function injectPluginIntoFile(
+  filePath: string,
+  injection: PluginInjection,
+): { success: boolean; error?: string } {
+  try {
+    // Read the file
+    const code = readFileSync(filePath, 'utf-8')
+
+    // Parse the code
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    })
+
+    // Find the devtools component name (handles renamed imports)
+    const devtoolsComponentName = findDevtoolsComponentName(ast)
+    if (!devtoolsComponentName) {
+      return {
+        success: false,
+        error: 'Could not find TanStackDevtools import',
+      }
+    }
+
+    // Transform and inject
+    const didTransform = transformAndInject(
+      ast,
+      injection,
+      devtoolsComponentName,
+    )
+
+    if (!didTransform) {
+      return {
+        success: false,
+        error: 'Plugin already exists or no TanStackDevtools component found',
+      }
+    }
+
+    // Generate the new code
+    const result = gen(ast, {
+      sourceMaps: false,
+      retainLines: false,
+    })
+
+    // Write back to file
+    writeFileSync(filePath, result.code, 'utf-8')
+
+    return { success: true }
+  } catch (e) {
+    console.error('Error injecting plugin:', e)
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : 'Unknown error',
+    }
+  }
+}
diff --git a/packages/devtools-vite/src/package-manager.ts b/packages/devtools-vite/src/package-manager.ts
new file mode 100644
index 00000000..4e648a98
--- /dev/null
+++ b/packages/devtools-vite/src/package-manager.ts
@@ -0,0 +1,181 @@
+import { exec } from 'node:child_process'
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
+import chalk from 'chalk'
+import { readPackageJson, tryParseJson } from './utils'
+import { injectPluginIntoFile } from './inject-plugin'
+import type { OutdatedDeps } from '@tanstack/devtools-client'
+
+/**
+ * Gets the outdated command for the detected package manager
+ */
+const getOutdatedCommand = (packageManager: string): string => {
+  switch (packageManager) {
+    case 'yarn':
+      return 'yarn outdated --json'
+    case 'pnpm':
+      return 'pnpm outdated --format json'
+    case 'bun':
+      return 'bun outdated --json'
+    case 'npm':
+    default:
+      return 'npm outdated --json'
+  }
+}
+
+/**
+ * Adds a plugin to the devtools configuration file
+ */
+export const addPluginToDevtools = (
+  devtoolsFileId: string | null,
+  packageName: string,
+  pluginName: string,
+  pluginImport?: { importName: string; type: 'jsx' | 'function' },
+): { success: boolean; error?: string } => {
+  // Check if we found the devtools file
+  if (!devtoolsFileId) {
+    const error = 'Devtools file not found'
+    console.log(
+      chalk.yellowBright(
+        `[@tanstack/devtools-vite] Could not add plugin. ${error}.`,
+      ),
+    )
+    return { success: false, error }
+  }
+
+  // Inject the plugin into the file
+  const result = injectPluginIntoFile(devtoolsFileId, {
+    packageName,
+    pluginName,
+    pluginImport,
+  })
+
+  if (result.success) {
+    console.log(
+      chalk.greenBright(
+        `[@tanstack/devtools-vite] Successfully added ${packageName} to devtools!`,
+      ),
+    )
+  } else {
+    console.log(
+      chalk.yellowBright(
+        `[@tanstack/devtools-vite] Could not add plugin: ${result.error}`,
+      ),
+    )
+  }
+
+  return result
+}
+/**
+ * Gets the install command for the detected package manager
+ */
+const getInstallCommand = (
+  packageManager: string,
+  packageName: string,
+): string => {
+  switch (packageManager) {
+    case 'yarn':
+      return `yarn add -D ${packageName}`
+    case 'pnpm':
+      return `pnpm add -D ${packageName}`
+    case 'bun':
+      return `bun add -D ${packageName}`
+    case 'npm':
+    default:
+      return `npm install -D ${packageName}`
+  }
+}
+
+export const installPackage = async (
+  packageName: string,
+): Promise<{
+  success: boolean
+  error?: string
+}> => {
+  return new Promise((resolve) => {
+    const packageManager = detectPackageManager()
+    const installCommand = getInstallCommand(packageManager, packageName)
+
+    console.log(
+      chalk.blueBright(
+        `[@tanstack/devtools-vite] Installing ${packageName}...`,
+      ),
+    )
+
+    exec(installCommand, async (installError) => {
+      if (installError) {
+        console.error(
+          chalk.redBright(
+            `[@tanstack/devtools-vite] Failed to install ${packageName}:`,
+          ),
+          installError.message,
+        )
+        resolve({
+          success: false,
+          error: installError.message,
+        })
+        return
+      }
+
+      console.log(
+        chalk.greenBright(
+          `[@tanstack/devtools-vite] Successfully installed ${packageName}`,
+        ),
+      )
+
+      // Read the updated package.json and emit the event
+      const updatedPackageJson = await readPackageJson()
+      devtoolsEventClient.emit('package-json-updated', {
+        packageJson: updatedPackageJson,
+      })
+
+      resolve({ success: true })
+    })
+  })
+}
+
+/**
+ * Detects the package manager used in the project by checking for lock files
+ */
+const detectPackageManager = (): 'npm' | 'yarn' | 'pnpm' | 'bun' => {
+  const cwd = process.cwd()
+
+  // Check for lock files in order of specificity
+  if (existsSync(join(cwd, 'bun.lockb')) || existsSync(join(cwd, 'bun.lock'))) {
+    return 'bun'
+  }
+  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) {
+    return 'pnpm'
+  }
+  if (existsSync(join(cwd, 'yarn.lock'))) {
+    return 'yarn'
+  }
+  if (existsSync(join(cwd, 'package-lock.json'))) {
+    return 'npm'
+  }
+
+  // Default to pnpm if no lock file is found
+  return 'pnpm'
+}
+
+export const emitOutdatedDeps = async () => {
+  return await new Promise<OutdatedDeps | null>((resolve) => {
+    const packageManager = detectPackageManager()
+    const outdatedCommand = getOutdatedCommand(packageManager)
+
+    exec(outdatedCommand, (_, stdout) => {
+      // outdated commands exit with code 1 if there are outdated packages, but still output valid JSON
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
+        if (!newOutdatedDeps) {
+          return
+        }
+        devtoolsEventClient.emit('outdated-deps-read', {
+          outdatedDeps: newOutdatedDeps,
+        })
+        resolve(newOutdatedDeps)
+      }
+    })
+  })
+}
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index 1110afe2..93248fef 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -1,18 +1,18 @@
-import { exec } from 'node:child_process'
 import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import {
-  handleDevToolsViteRequest,
-  readPackageJson,
-  tryParseJson,
-} from './utils'
+import { handleDevToolsViteRequest, readPackageJson } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
-import type { OutdatedDeps } from '@tanstack/devtools-client'
+import { detectDevtoolsFile, injectPluginIntoFile } from './inject-plugin'
+import {
+  addPluginToDevtools,
+  emitOutdatedDeps,
+  installPackage,
+} from './package-manager'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -68,24 +68,6 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
-const emitOutdatedDeps = async () => {
-  return await new Promise<OutdatedDeps | null>((resolve) => {
-    exec('npm outdated --json', (_, stdout) => {
-      // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
-      if (stdout) {
-        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
-        if (!newOutdatedDeps) {
-          return
-        }
-        devtoolsEventClient.emit('outdated-deps-read', {
-          outdatedDeps: newOutdatedDeps,
-        })
-        resolve(newOutdatedDeps)
-      }
-    })
-  })
-}
-
 export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const logging = args?.logging ?? true
@@ -95,6 +77,8 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
+  let devtoolsFileId: string | null = null
+
   return [
     {
       enforce: 'pre',
@@ -231,6 +215,174 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         const packageJson = await readPackageJson()
         const outdatedDeps = emitOutdatedDeps().then((deps) => deps)
 
+        // Listen for package installation requests
+        devtoolsEventClient.on('install-devtools', async (event) => {
+          const result = await installPackage(event.payload.packageName)
+          devtoolsEventClient.emit('devtools-installed', {
+            packageName: event.payload.packageName,
+            success: result.success,
+            error: result.error,
+          })
+
+          // If installation was successful, automatically add the plugin to devtools
+          if (result.success) {
+            const { packageName, pluginName, pluginImport } = event.payload
+
+            console.log(
+              chalk.blueBright(
+                `[@tanstack/devtools-vite] Auto-adding ${packageName} to devtools...`,
+              ),
+            )
+
+            const injectResult = addPluginToDevtools(
+              devtoolsFileId,
+              packageName,
+              pluginName,
+              pluginImport,
+            )
+
+            if (injectResult.success) {
+              // Emit plugin-added event so the UI updates
+              devtoolsEventClient.emit('plugin-added', {
+                packageName,
+                success: true,
+              })
+
+              // Also re-read package.json to update the UI with the newly installed package
+              const updatedPackageJson = await readPackageJson()
+              devtoolsEventClient.emit('package-json-read', {
+                packageJson: updatedPackageJson,
+              })
+            }
+          }
+        })
+
+        // Listen for add plugin to devtools requests
+        devtoolsEventClient.on('add-plugin-to-devtools', (event) => {
+          const { packageName, pluginName, pluginImport } = event.payload
+
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Adding ${packageName} to devtools...`,
+            ),
+          )
+
+          const result = addPluginToDevtools(
+            devtoolsFileId,
+            packageName,
+            pluginName,
+            pluginImport,
+          )
+
+          devtoolsEventClient.emit('plugin-added', {
+            packageName,
+            success: result.success,
+            error: result.error,
+          })
+        })
+
+        // Handle bump-package-version event
+        devtoolsEventClient.on('bump-package-version', async (event) => {
+          const {
+            packageName,
+            devtoolsPackage,
+            pluginName,
+            minVersion,
+            pluginImport,
+          } = event.payload
+
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Bumping ${packageName} to version ${minVersion}...`,
+            ),
+          )
+
+          // Install the package with the minimum version
+          const packageWithVersion = minVersion
+            ? `${packageName}@^${minVersion}`
+            : packageName
+
+          const result = await installPackage(packageWithVersion)
+
+          if (!result.success) {
+            console.log(
+              chalk.redBright(
+                `[@tanstack/devtools-vite] Failed to bump ${packageName}: ${result.error}`,
+              ),
+            )
+            devtoolsEventClient.emit('devtools-installed', {
+              packageName: devtoolsPackage,
+              success: false,
+              error: result.error,
+            })
+            return
+          }
+
+          console.log(
+            chalk.greenBright(
+              `[@tanstack/devtools-vite] Successfully bumped ${packageName} to ${minVersion}!`,
+            ),
+          )
+
+          // Check if we found the devtools file
+          if (!devtoolsFileId) {
+            console.log(
+              chalk.yellowBright(
+                `[@tanstack/devtools-vite] Devtools file not found. Skipping auto-injection.`,
+              ),
+            )
+            devtoolsEventClient.emit('devtools-installed', {
+              packageName: devtoolsPackage,
+              success: true,
+            })
+            return
+          }
+
+          // Now inject the devtools plugin
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Adding ${devtoolsPackage} to devtools...`,
+            ),
+          )
+
+          const injectResult = injectPluginIntoFile(devtoolsFileId, {
+            packageName: devtoolsPackage,
+            pluginName,
+            pluginImport,
+          })
+
+          if (injectResult.success) {
+            console.log(
+              chalk.greenBright(
+                `[@tanstack/devtools-vite] Successfully added ${devtoolsPackage} to devtools!`,
+              ),
+            )
+
+            devtoolsEventClient.emit('plugin-added', {
+              packageName: devtoolsPackage,
+              success: true,
+            })
+
+            // Re-read package.json to update the UI
+            const updatedPackageJson = await readPackageJson()
+            devtoolsEventClient.emit('package-json-read', {
+              packageJson: updatedPackageJson,
+            })
+          } else {
+            console.log(
+              chalk.redBright(
+                `[@tanstack/devtools-vite] Failed to add ${devtoolsPackage} to devtools: ${injectResult.error}`,
+              ),
+            )
+
+            devtoolsEventClient.emit('plugin-added', {
+              packageName: devtoolsPackage,
+              success: false,
+              error: injectResult.error,
+            })
+          }
+        })
+
         // whenever a client mounts we send all the current info to the subscribers
         devtoolsEventClient.on('mounted', async () => {
           devtoolsEventClient.emit('outdated-deps-read', {
@@ -271,5 +423,23 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return enhanceConsoleLog(code, id, port)
       },
     },
+    {
+      name: '@tanstack/devtools:inject-plugin',
+      apply(config, { command }) {
+        return config.mode === 'development' && command === 'serve'
+      },
+      transform(code, id) {
+        // First pass: find where TanStackDevtools is imported
+        if (!devtoolsFileId && detectDevtoolsFile(code)) {
+          // Extract actual file path (remove query params)
+          const [filePath] = id.split('?')
+          if (filePath) {
+            devtoolsFileId = filePath
+          }
+        }
+
+        return undefined
+      },
+    },
   ]
 }
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index cd4746f8..5189e63f 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -62,6 +62,7 @@
     "@solid-primitives/event-listener": "^2.4.3",
     "@solid-primitives/keyboard": "^1.3.3",
     "@solid-primitives/resize-observer": "^2.1.3",
+    "@tanstack/devtools-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "@tanstack/devtools-ui": "workspace:*",
     "clsx": "^2.1.1",
diff --git a/packages/devtools/src/components/source-inspector.tsx b/packages/devtools/src/components/source-inspector.tsx
index 66121663..88fb58ea 100644
--- a/packages/devtools/src/components/source-inspector.tsx
+++ b/packages/devtools/src/components/source-inspector.tsx
@@ -150,7 +150,7 @@ export const SourceInspector = () => {
         ref={setNameTagRef}
         style={{ ...fileNameStyles(), 'pointer-events': 'none' }}
       >
-        {highlightState.dataSource.split(':')[0]}
+        {highlightState.dataSource}
       </div>
       <div style={{ ...currentElementBoxStyles(), 'pointer-events': 'none' }} />
     </>
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index 4bc6cd19..813690e8 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -1,4 +1,4 @@
-import { createContext } from 'solid-js'
+import { createContext, createEffect } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { tryParseJson } from '../utils/sanitize'
 import {
@@ -76,6 +76,9 @@ interface ContextProps {
   children: JSX.Element
   plugins?: Array<TanStackDevtoolsPlugin>
   config?: TanStackDevtoolsConfig
+  onSetPlugins?: (
+    setPlugins: (plugins: Array<TanStackDevtoolsPlugin>) => void,
+  ) => void
 }
 
 const getSettings = () => {
@@ -161,6 +164,26 @@ export const DevtoolsProvider = (props: ContextProps) => {
     getExistingStateFromStorage(props.config, props.plugins),
   )
 
+  // Provide a way for the core to update plugins reactively
+  const updatePlugins = (newPlugins: Array<TanStackDevtoolsPlugin>) => {
+    const pluginsWithIds = newPlugins.map((plugin, i) => {
+      const id = generatePluginId(plugin, i)
+      return {
+        ...plugin,
+        id,
+      }
+    })
+
+    setStore('plugins', pluginsWithIds)
+  }
+
+  // Call the callback to give core access to updatePlugins
+  createEffect(() => {
+    if (props.onSetPlugins) {
+      props.onSetPlugins(updatePlugins)
+    }
+  })
+
   const value = {
     store,
     setStore: (
diff --git a/packages/devtools/src/core.tsx b/packages/devtools/src/core.tsx
index 574a44ae..63ca8307 100644
--- a/packages/devtools/src/core.tsx
+++ b/packages/devtools/src/core.tsx
@@ -50,6 +50,7 @@ export class TanStackDevtoolsCore {
   #Component: any
   #eventBus: ClientEventBus | undefined
   #eventBusConfig: ClientEventBusConfig | undefined
+  #setPlugins?: (plugins: Array<TanStackDevtoolsPlugin>) => void
 
   constructor(init: TanStackDevtoolsInit) {
     this.#plugins = init.plugins || []
@@ -74,7 +75,13 @@ export class TanStackDevtoolsCore {
       this.#eventBus = new ClientEventBus(this.#eventBusConfig)
       this.#eventBus.start()
       return (
-        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
+        <DevtoolsProvider
+          plugins={this.#plugins}
+          config={this.#config}
+          onSetPlugins={(setPlugins) => {
+            this.#setPlugins = setPlugins
+          }}
+        >
           <PiPProvider>
             <Portal mount={mountTo}>
               <Devtools />
@@ -102,6 +109,13 @@ export class TanStackDevtoolsCore {
       ...this.#config,
       ...config,
     }
+    if (config.plugins) {
+      this.#plugins = config.plugins
+      // Update the reactive store if mounted
+      if (this.#isMounted && this.#setPlugins) {
+        this.#setPlugins(config.plugins)
+      }
+    }
   }
 }
 
diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts
index e9262562..95af69a6 100644
--- a/packages/devtools/src/styles/use-styles.ts
+++ b/packages/devtools/src/styles/use-styles.ts
@@ -390,6 +390,8 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       width: ${size[48]};
       overflow-y: auto;
       transform: ${isExpanded ? 'translateX(0)' : 'translateX(-100%)'};
+      display: flex;
+      flex-direction: column;
     `,
 
     pluginsTabSidebarTransition: (mSeconds: number) => {
@@ -398,6 +400,11 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       `
     },
 
+    pluginsList: css`
+      flex: 1;
+      overflow-y: auto;
+    `,
+
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
@@ -459,6 +466,828 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       display: flex;
       gap: 0.5rem;
     `,
+
+    // No Plugins Fallback Styles
+    noPluginsFallback: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      padding: 2rem;
+      background: ${t(colors.gray[50], colors.darkGray[700])};
+      width: 100%;
+      height: 100%;
+    `,
+    noPluginsFallbackContent: css`
+      max-width: 600px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    `,
+    noPluginsFallbackIcon: css`
+      width: 64px;
+      height: 64px;
+      color: ${t(colors.gray[400], colors.gray[600])};
+      margin-bottom: 0.5rem;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+    noPluginsFallbackTitle: css`
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+    `,
+    noPluginsFallbackDescription: css`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      line-height: 1.5;
+      margin: 0;
+    `,
+    noPluginsSuggestions: css`
+      width: 100%;
+      margin-top: 1.5rem;
+      padding: 1.5rem;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    noPluginsSuggestionsTitle: css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0 0 0.5rem 0;
+    `,
+    noPluginsSuggestionsDesc: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0 0 1rem 0;
+    `,
+    noPluginsSuggestionsList: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    noPluginsSuggestionCard: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      background: ${t(colors.gray[50], colors.darkGray[900])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.375rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+        background: ${t(colors.gray[100], colors.darkGray[800])};
+      }
+    `,
+    noPluginsSuggestionInfo: css`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    noPluginsSuggestionPackage: css`
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    `,
+    noPluginsSuggestionSource: css`
+      font-size: 0.8rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      margin: 0;
+    `,
+    noPluginsSuggestionStatus: css`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: ${t(colors.green[600], colors.green[400])};
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    `,
+    noPluginsSuggestionStatusText: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+    `,
+    noPluginsSuggestionStatusTextError: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    noPluginsEmptyState: css`
+      margin-top: 1.5rem;
+      padding: 1.5rem;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    noPluginsEmptyStateText: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0;
+      line-height: 1.5;
+    `,
+    noPluginsFallbackLinks: css`
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 1.5rem;
+    `,
+    noPluginsFallbackLink: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      text-decoration: none;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: ${t(colors.gray[900], colors.gray[100])};
+        text-decoration: underline;
+      }
+    `,
+    noPluginsFallbackLinkSeparator: css`
+      color: ${t(colors.gray[400], colors.gray[600])};
+    `,
+
+    // Plugin Marketplace Styles (for "Add More" tab)
+    pluginMarketplace: css`
+      width: 100%;
+      overflow-y: auto;
+      padding: 2rem;
+      background: ${t(
+        'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+        'linear-gradient(135deg, #1a1d23 0%, #13161a 100%)',
+      )};
+      animation: fadeIn 0.3s ease;
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `,
+    pluginMarketplaceHeader: css`
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      border-bottom: 2px solid ${t(colors.gray[200], colors.gray[700])};
+    `,
+    pluginMarketplaceTitleRow: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2rem;
+      margin-bottom: 0.5rem;
+    `,
+    pluginMarketplaceTitle: css`
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+      letter-spacing: -0.02em;
+    `,
+    pluginMarketplaceDescription: css`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0 0 1rem 0;
+      line-height: 1.5;
+    `,
+    pluginMarketplaceSearchWrapper: css`
+      position: relative;
+      display: flex;
+      align-items: center;
+      max-width: 400px;
+      flex-shrink: 0;
+
+      svg {
+        position: absolute;
+        left: 1rem;
+        color: ${t(colors.gray[400], colors.gray[500])};
+        pointer-events: none;
+      }
+    `,
+    pluginMarketplaceSearch: css`
+      width: 100%;
+      padding: 0.75rem 1rem 0.75rem 2.75rem;
+      background: ${t(colors.gray[50], colors.darkGray[900])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.sans};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${t(colors.gray[400], colors.gray[500])};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${t(colors.blue[500], colors.blue[400])};
+        background: ${t(colors.white, colors.darkGray[800])};
+        box-shadow: 0 0 0 3px
+          ${t('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.1)')};
+      }
+    `,
+    pluginMarketplaceFilters: css`
+      margin-top: 1.5rem;
+      padding-top: 1rem;
+    `,
+    pluginMarketplaceTagsContainer: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+      padding: 1rem;
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    pluginMarketplaceTagButton: css`
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      border-radius: 0.375rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.gray[500])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+    `,
+    pluginMarketplaceTagButtonActive: css`
+      background: ${t(
+        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+        'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+      )} !important;
+      border-color: ${t('#2563eb', '#3b82f6')} !important;
+      color: white !important;
+
+      &:hover {
+        background: ${t(
+          'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
+          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+        )} !important;
+        border-color: ${t('#1d4ed8', '#2563eb')} !important;
+      }
+    `,
+    pluginMarketplaceSettingsButton: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.75rem;
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-left: 0.5rem;
+
+      &:hover {
+        background: ${t(colors.gray[200], colors.darkGray[700])};
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    `,
+    pluginMarketplaceSettingsPanel: css`
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 350px;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border-left: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      box-shadow: -4px 0 12px ${t('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.4)')};
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      animation: slideInRight 0.3s ease;
+
+      @keyframes slideInRight {
+        from {
+          transform: translateX(100%);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+    `,
+    pluginMarketplaceSettingsPanelHeader: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1.5rem;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[700])};
+    `,
+    pluginMarketplaceSettingsPanelTitle: css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+    `,
+    pluginMarketplaceSettingsPanelClose: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem;
+      background: transparent;
+      border: none;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      cursor: pointer;
+      border-radius: 0.375rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[700])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+    `,
+    pluginMarketplaceSettingsPanelContent: css`
+      flex: 1;
+      padding: 1.5rem;
+      overflow-y: auto;
+    `,
+    pluginMarketplaceGrid: css`
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1.25rem;
+      animation: slideUp 0.4s ease;
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `,
+    pluginMarketplaceCard: css`
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: ${t(
+          'linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)',
+          'linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%)',
+        )};
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.25s ease;
+      }
+
+      &:hover {
+        border-color: ${t(colors.gray[400], colors.gray[500])};
+        box-shadow: 0 8px 24px ${t('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.4)')};
+        transform: translateY(-4px);
+
+        &::before {
+          transform: scaleX(1);
+        }
+      }
+    `,
+    pluginMarketplaceCardIcon: css`
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${t(
+        'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+        'linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)',
+      )};
+      border-radius: 0.5rem;
+      color: white;
+      transition: transform 0.25s ease;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      &.custom-logo {
+      }
+    `,
+    pluginMarketplaceCardHeader: css`
+      flex: 1;
+    `,
+    pluginMarketplaceCardTitle: css`
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0 0 0.5rem 0;
+      line-height: 1.4;
+    `,
+    pluginMarketplaceCardDescription: css`
+      font-size: 0.8rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      border-radius: 0.375rem;
+      display: block;
+      font-weight: 500;
+    `,
+    pluginMarketplaceCardPackageBadge: css`
+      margin-top: 4px;
+      margin-bottom: 8px;
+      font-size: 0.6875rem;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      opacity: 0.6;
+      padding: 4px 8px;
+      padding-left: 0;
+      background-color: var(--bg-tertiary);
+      border-radius: 4px;
+      word-break: break-all;
+      display: inline-block;
+    `,
+    pluginMarketplaceCardDescriptionText: css`
+      line-height: 1.5;
+      margin-top: 0;
+    `,
+    pluginMarketplaceCardVersionInfo: css`
+      margin-top: 8px;
+      font-size: 0.6875rem;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    `,
+    pluginMarketplaceCardVersionSatisfied: css`
+      color: ${t(colors.green[600], colors.green[400])};
+    `,
+    pluginMarketplaceCardVersionUnsatisfied: css`
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    pluginMarketplaceCardDocsLink: css`
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.75rem;
+      color: ${t(colors.blue[600], colors.blue[400])};
+      text-decoration: none;
+      margin-top: 0.5rem;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: ${t(colors.blue[700], colors.blue[300])};
+        text-decoration: underline;
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    `,
+    pluginMarketplaceCardTags: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+      margin-top: 0.75rem;
+    `,
+    pluginMarketplaceCardTag: css`
+      font-size: 0.6875rem;
+      font-weight: 500;
+      padding: 0.25rem 0.5rem;
+      background: ${t(colors.gray[100], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[600])};
+      border-radius: 0.25rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    pluginMarketplaceCardImage: css`
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    `,
+    pluginMarketplaceNewBanner: css`
+      position: absolute;
+      top: 12px;
+      right: -35px;
+      background-color: ${t(colors.green[500], colors.green[500])};
+      color: white;
+      padding: 4px 40px;
+      font-size: 0.6875rem;
+      font-weight: bold;
+      text-transform: uppercase;
+      transform: rotate(45deg);
+      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
+      z-index: 10;
+      letter-spacing: 0.5px;
+    `,
+    pluginMarketplaceCardFeatured: css`
+      border-color: ${t(colors.blue[500], colors.blue[400])};
+      border-width: 2px;
+    `,
+    pluginMarketplaceCardActive: css`
+      border-color: ${t(colors.green[500], colors.green[600])};
+      border-width: 2px;
+
+      &:hover {
+        border-color: ${t(colors.green[500], colors.green[600])};
+        box-shadow: none;
+        transform: none;
+
+        &::before {
+          transform: scaleX(0);
+        }
+      }
+    `,
+    pluginMarketplaceCardStatus: css`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: ${t(colors.green[600], colors.green[400])};
+      animation: statusFadeIn 0.3s ease;
+
+      @keyframes statusFadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        animation: iconPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      @keyframes iconPop {
+        0% {
+          transform: scale(0);
+        }
+        50% {
+          transform: scale(1.2);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    `,
+    pluginMarketplaceCardSpinner: css`
+      width: 18px;
+      height: 18px;
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-top-color: ${t(colors.blue[600], colors.blue[400])};
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    pluginMarketplaceCardStatusText: css`
+      font-size: 0.875rem;
+      font-weight: 600;
+    `,
+    pluginMarketplaceCardStatusTextError: css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    pluginMarketplaceEmpty: css`
+      padding: 3rem 2rem;
+      text-align: center;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 2px dashed ${t(colors.gray[300], colors.gray[700])};
+      border-radius: 0.75rem;
+      animation: fadeIn 0.3s ease;
+    `,
+    pluginMarketplaceEmptyText: css`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0;
+      line-height: 1.6;
+    `,
+
+    // Framework sections
+    pluginMarketplaceSection: css`
+      margin-bottom: 2.5rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    `,
+    pluginMarketplaceSectionHeader: css`
+      margin-bottom: 1rem;
+      padding: 1rem 1.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[700])};
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+      }
+    `,
+    pluginMarketplaceSectionHeaderLeft: css`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    pluginMarketplaceSectionChevron: css`
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      transition: transform 0.2s ease;
+    `,
+    pluginMarketplaceSectionChevronCollapsed: css`
+      transform: rotate(-90deg);
+    `,
+    pluginMarketplaceSectionTitle: css`
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: ${t(colors.gray[900], colors.gray[50])};
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    pluginMarketplaceSectionBadge: css`
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.25rem 0.5rem;
+      background: ${t(
+        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+        'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+      )};
+      color: white;
+      border-radius: 0.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    `,
+    pluginMarketplaceCardDisabled: css`
+      opacity: 0.6;
+      filter: grayscale(0.3);
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+        box-shadow: none;
+      }
+    `,
+
+    // Card state badges
+    pluginMarketplaceCardBadge: css`
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding: 0.25rem 0.5rem;
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      border-radius: 0.25rem;
+      letter-spacing: 0.05em;
+    `,
+    pluginMarketplaceCardBadgeInstall: css`
+      background: ${t(colors.green[100], colors.green[900])};
+      color: ${t(colors.green[700], colors.green[300])};
+    `,
+    pluginMarketplaceCardBadgeAdd: css`
+      background: ${t(colors.blue[100], colors.blue[900])};
+      color: ${t(colors.blue[700], colors.blue[300])};
+    `,
+    pluginMarketplaceCardBadgeRequires: css`
+      background: ${t(colors.gray[100], colors.gray[800])};
+      color: ${t(colors.gray[600], colors.gray[400])};
+    `,
+
+    // Button style for already installed plugins
+    pluginMarketplaceButtonInstalled: css`
+      opacity: 0.5;
+    `,
+
+    // Add More Tab Style (visually distinct from regular plugins)
+    pluginNameAddMore: css`
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      padding: ${size[3]} ${size[2]};
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+      background: ${t(
+        'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+        'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
+      )};
+      font-weight: 600;
+      position: relative;
+      margin-top: auto;
+
+      h3 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+
+        &::before {
+          content: '✨';
+          font-size: 0.875rem;
+          animation: sparkle 2s ease-in-out infinite;
+        }
+      }
+
+      @keyframes sparkle {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1) rotate(0deg);
+        }
+        50% {
+          opacity: 0.6;
+          transform: scale(1.1) rotate(10deg);
+        }
+      }
+
+      &:hover {
+        background: ${t(
+          'linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%)',
+          'linear-gradient(135deg, #374151 0%, #1f2937 100%)',
+        )};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        border-left-color: ${t(colors.blue[500], colors.blue[400])};
+
+        h3::before {
+          animation: sparkle 0.5s ease-in-out infinite;
+        }
+      }
+
+      &.active {
+        background: ${t(
+          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+          'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+        )};
+        color: ${t(colors.white, colors.white)};
+        border-left: 2px solid ${t(colors.blue[600], colors.blue[300])};
+        box-shadow: 0 4px 12px
+          ${t('rgba(59, 130, 246, 0.3)', 'rgba(96, 165, 250, 0.3)')};
+
+        h3::before {
+          filter: brightness(0) invert(1);
+        }
+      }
+
+      &.active:hover {
+        background: ${t(
+          'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
+          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+        )};
+      }
+    `,
   }
 }
 
diff --git a/packages/devtools/src/tabs/marketplace/card-utils.test.ts b/packages/devtools/src/tabs/marketplace/card-utils.test.ts
new file mode 100644
index 00000000..a7ea6ac8
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/card-utils.test.ts
@@ -0,0 +1,219 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getBadgeClass,
+  getBadgeText,
+  getButtonText,
+  getButtonVariant,
+} from './card-utils'
+import type { PluginCard } from './types'
+
+const createMockCard = (overrides: Partial<PluginCard>): PluginCard => ({
+  requiredPackageName: '@tanstack/react-query',
+  devtoolsPackage: '@tanstack/react-query-devtools',
+  framework: 'react',
+  hasPackage: false,
+  hasDevtools: false,
+  isRegistered: false,
+  actionType: 'install',
+  status: 'idle',
+  isCurrentFramework: true,
+  metadata: {
+    packageName: '@tanstack/react-query-devtools',
+    title: 'Query Devtools',
+    framework: 'react',
+  },
+  ...overrides,
+})
+
+describe('getButtonText', () => {
+  it('should return Installing... when status is installing', () => {
+    const card = createMockCard({ status: 'installing' })
+    expect(getButtonText(card)).toBe('Installing...')
+  })
+
+  it('should return Installed! when status is success', () => {
+    const card = createMockCard({ status: 'success' })
+    expect(getButtonText(card)).toBe('Installed!')
+  })
+
+  it('should return Error when status is error', () => {
+    const card = createMockCard({ status: 'error' })
+    expect(getButtonText(card)).toBe('Error')
+  })
+
+  it('should return Install for install action', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getButtonText(card)).toBe('Install')
+  })
+
+  it('should return Install Devtools for install-devtools action', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getButtonText(card)).toBe('Install Devtools')
+  })
+
+  it('should return Add to Devtools for add-to-devtools action', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getButtonText(card)).toBe('Add to Devtools')
+  })
+
+  it('should return package name for requires-package action', () => {
+    const card = createMockCard({
+      actionType: 'requires-package',
+      requiredPackageName: '@tanstack/react-query',
+    })
+    expect(getButtonText(card)).toBe('Requires @tanstack/react-query')
+  })
+
+  it('should return Different Framework for wrong-framework action', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getButtonText(card)).toBe('Different Framework')
+  })
+
+  it('should return Already Installed for already-installed action', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getButtonText(card)).toBe('Already Installed')
+  })
+
+  it('should return Bump Version for bump-version action', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getButtonText(card)).toBe('Bump Version')
+  })
+
+  it('should return Version Mismatch for version-mismatch action', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getButtonText(card)).toBe('Version Mismatch')
+  })
+})
+
+describe('getButtonVariant', () => {
+  it('should return danger for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return danger for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return danger for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return warning for bump-version', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getButtonVariant(card)).toBe('warning')
+  })
+
+  it('should return secondary for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getButtonVariant(card)).toBe('secondary')
+  })
+
+  it('should return primary for install actions', () => {
+    const installCard = createMockCard({ actionType: 'install' })
+    expect(getButtonVariant(installCard)).toBe('primary')
+
+    const installDevtoolsCard = createMockCard({
+      actionType: 'install-devtools',
+    })
+    expect(getButtonVariant(installDevtoolsCard)).toBe('primary')
+
+    const addToDevtoolsCard = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getButtonVariant(addToDevtoolsCard)).toBe('primary')
+  })
+})
+
+describe('getBadgeClass', () => {
+  const mockStyles = () => ({
+    pluginMarketplaceCardBadge: 'badge',
+    pluginMarketplaceCardBadgeInstall: 'badge-install',
+    pluginMarketplaceCardBadgeAdd: 'badge-add',
+    pluginMarketplaceCardBadgeRequires: 'badge-requires',
+  })
+
+  it('should return install badge class for install', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-install')
+  })
+
+  it('should return install badge class for install-devtools', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-install')
+  })
+
+  it('should return add badge class for add-to-devtools', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-add')
+  })
+
+  it('should return add badge class for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-add')
+  })
+
+  it('should return requires badge class for bump-version', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+})
+
+describe('getBadgeText', () => {
+  it('should return Available for install', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getBadgeText(card)).toBe('Available')
+  })
+
+  it('should return Available for install-devtools', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getBadgeText(card)).toBe('Available')
+  })
+
+  it('should return Installed for add-to-devtools', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getBadgeText(card)).toBe('Installed')
+  })
+
+  it('should return Active for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getBadgeText(card)).toBe('Active')
+  })
+
+  it('should return Incompatible for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getBadgeText(card)).toBe('Incompatible')
+  })
+
+  it('should return Unavailable for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getBadgeText(card)).toBe('Unavailable')
+  })
+
+  it('should return Other Framework for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getBadgeText(card)).toBe('Other Framework')
+  })
+
+  it('should return empty string for unknown action type', () => {
+    const card = createMockCard({ actionType: 'install' })
+    // @ts-expect-error - testing invalid action type
+    card.actionType = 'invalid'
+    expect(getBadgeText(card)).toBe('')
+  })
+})
diff --git a/packages/devtools/src/tabs/marketplace/card-utils.ts b/packages/devtools/src/tabs/marketplace/card-utils.ts
new file mode 100644
index 00000000..ef624d0f
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/card-utils.ts
@@ -0,0 +1,85 @@
+import type { PluginCard } from './types'
+
+export const getButtonText = (card: PluginCard): string => {
+  if (card.status === 'installing') return 'Installing...'
+  if (card.status === 'success') return 'Installed!'
+  if (card.status === 'error') return 'Error'
+
+  switch (card.actionType) {
+    case 'install':
+      return 'Install'
+    case 'install-devtools':
+      return 'Install Devtools'
+    case 'add-to-devtools':
+      return 'Add to Devtools'
+    case 'requires-package':
+      return `Requires ${card.requiredPackageName}`
+    case 'wrong-framework':
+      return 'Different Framework'
+    case 'already-installed':
+      return 'Already Installed'
+    case 'bump-version':
+      return 'Bump Version'
+    case 'version-mismatch':
+      return 'Version Mismatch'
+    default:
+      return 'Install'
+  }
+}
+
+export const getButtonVariant = (
+  card: PluginCard,
+): 'primary' | 'secondary' | 'danger' | 'warning' => {
+  if (
+    card.actionType === 'requires-package' ||
+    card.actionType === 'wrong-framework' ||
+    card.actionType === 'version-mismatch'
+  )
+    return 'danger'
+  if (card.actionType === 'bump-version') return 'warning'
+  if (card.actionType === 'already-installed') return 'secondary'
+  return 'primary'
+}
+
+export const getBadgeClass = (card: PluginCard, styles: any): string => {
+  const s = styles()
+  const base = s.pluginMarketplaceCardBadge
+  switch (card.actionType) {
+    case 'install':
+    case 'install-devtools':
+      return `${base} ${s.pluginMarketplaceCardBadgeInstall}`
+    case 'add-to-devtools':
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`
+    case 'already-installed':
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`
+    case 'bump-version':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    case 'version-mismatch':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    case 'requires-package':
+    case 'wrong-framework':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    default:
+      return base
+  }
+}
+
+export const getBadgeText = (card: PluginCard): string => {
+  switch (card.actionType) {
+    case 'install':
+    case 'install-devtools':
+      return 'Available'
+    case 'add-to-devtools':
+      return 'Installed'
+    case 'already-installed':
+      return 'Active'
+    case 'version-mismatch':
+      return 'Incompatible'
+    case 'requires-package':
+      return 'Unavailable'
+    case 'wrong-framework':
+      return 'Other Framework'
+    default:
+      return ''
+  }
+}
diff --git a/packages/devtools/src/tabs/marketplace/marketplace-header.tsx b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
new file mode 100644
index 00000000..1ee14efe
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
@@ -0,0 +1,54 @@
+import { SearchIcon, SettingsIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { TagFilters } from './tag-filters'
+import type { Accessor } from 'solid-js'
+
+interface MarketplaceHeaderProps {
+  searchInput: Accessor<string>
+  onSearchInput: (value: string) => void
+  onSettingsClick: () => void
+  tags: Accessor<Array<string>>
+  selectedTags: Accessor<Set<string>>
+  onToggleTag: (tag: string) => void
+}
+
+export const MarketplaceHeader = (props: MarketplaceHeaderProps) => {
+  const styles = useStyles()
+
+  return (
+    <div class={styles().pluginMarketplaceHeader}>
+      <div class={styles().pluginMarketplaceTitleRow}>
+        <h2 class={styles().pluginMarketplaceTitle}>Plugin Marketplace</h2>
+        <div style={{ display: 'flex', 'align-items': 'center' }}>
+          <div class={styles().pluginMarketplaceSearchWrapper}>
+            <SearchIcon />
+            <input
+              type="text"
+              class={styles().pluginMarketplaceSearch}
+              placeholder="Search plugins..."
+              value={props.searchInput()}
+              onInput={(e) => props.onSearchInput(e.currentTarget.value)}
+            />
+          </div>
+          <button
+            class={styles().pluginMarketplaceSettingsButton}
+            onClick={props.onSettingsClick}
+          >
+            <SettingsIcon />
+          </button>
+        </div>
+      </div>
+
+      <p class={styles().pluginMarketplaceDescription}>
+        Discover and install devtools for TanStack Query, Router, Form, and
+        Pacer
+      </p>
+
+      <TagFilters
+        tags={props.tags}
+        selectedTags={props.selectedTags}
+        onToggleTag={props.onToggleTag}
+      />
+    </div>
+  )
+}
diff --git a/packages/devtools/src/tabs/marketplace/plugin-card.tsx b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
new file mode 100644
index 00000000..3000974d
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
@@ -0,0 +1,165 @@
+import { For, Show } from 'solid-js'
+import {
+  Button,
+  CheckCircleIcon,
+  ExternalLinkIcon,
+  PackageIcon,
+  XCircleIcon,
+} from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import {
+  getBadgeClass,
+  getBadgeText,
+  getButtonText,
+  getButtonVariant,
+} from './card-utils'
+import type { PluginCard } from './types'
+
+interface PluginCardComponentProps {
+  card: PluginCard
+  onAction: (card: PluginCard) => void
+}
+
+export const PluginCardComponent = (props: PluginCardComponentProps) => {
+  const styles = useStyles()
+  const { card } = props
+
+  return (
+    <div
+      class={styles().pluginMarketplaceCard}
+      classList={{
+        [styles().pluginMarketplaceCardDisabled]:
+          !card.isCurrentFramework && card.actionType !== 'already-installed',
+        [styles().pluginMarketplaceCardFeatured]:
+          !!card.metadata?.featured && card.actionType !== 'already-installed',
+        [styles().pluginMarketplaceCardActive]:
+          card.actionType === 'already-installed',
+      }}
+      style={{ position: 'relative' }}
+    >
+      {/* New Banner */}
+      <Show when={card.metadata?.isNew}>
+        <div class={styles().pluginMarketplaceNewBanner}>New</div>
+      </Show>
+
+      <span class={getBadgeClass(card, styles)}>{getBadgeText(card)}</span>
+      <div
+        class={styles().pluginMarketplaceCardIcon}
+        classList={{
+          'custom-logo': !!card.metadata?.logoUrl,
+        }}
+      >
+        <Show when={card.metadata?.logoUrl} fallback={<PackageIcon />}>
+          <img
+            src={card.metadata?.logoUrl}
+            alt={card.metadata?.title || card.devtoolsPackage}
+            class={styles().pluginMarketplaceCardImage}
+          />
+        </Show>
+      </div>
+      <div class={styles().pluginMarketplaceCardHeader}>
+        <h3 class={styles().pluginMarketplaceCardTitle}>
+          {card.metadata?.title || card.devtoolsPackage}
+        </h3>
+        <p class={styles().pluginMarketplaceCardPackageBadge}>
+          {card.devtoolsPackage}
+        </p>
+        <p class={styles().pluginMarketplaceCardDescriptionText}>
+          {card.actionType === 'requires-package'
+            ? `Requires ${card.requiredPackageName}`
+            : card.actionType === 'wrong-framework'
+              ? `For different framework projects`
+              : card.actionType === 'already-installed'
+                ? `Active in your devtools`
+                : card.actionType === 'version-mismatch'
+                  ? card.versionInfo?.reason || 'Version incompatible'
+                  : card.metadata?.description ||
+                    `For ${card.requiredPackageName}`}
+        </p>
+        <Show when={card.versionInfo}>
+          <p class={styles().pluginMarketplaceCardVersionInfo}>
+            <Show
+              when={card.versionInfo?.satisfied}
+              fallback={
+                <span class={styles().pluginMarketplaceCardVersionUnsatisfied}>
+                  ⚠️ v{card.versionInfo?.current} • Requires v
+                  {card.versionInfo?.required}+
+                </span>
+              }
+            >
+              <span class={styles().pluginMarketplaceCardVersionSatisfied}>
+                ✓ v{card.versionInfo?.current} • Min v
+                {card.versionInfo?.required}
+              </span>
+            </Show>
+          </p>
+        </Show>
+        <Show when={card.metadata?.docsUrl}>
+          <a
+            href={card.metadata?.docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={styles().pluginMarketplaceCardDocsLink}
+          >
+            Documentation <ExternalLinkIcon />
+          </a>
+        </Show>
+
+        {/* Tags */}
+        <Show when={card.metadata?.tags && card.metadata.tags.length > 0}>
+          <div class={styles().pluginMarketplaceCardTags}>
+            <For each={card.metadata?.tags}>
+              {(tag) => (
+                <span class={styles().pluginMarketplaceCardTag}>{tag}</span>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+      <Show
+        when={card.status === 'idle'}
+        fallback={
+          <div class={styles().pluginMarketplaceCardStatus}>
+            <Show when={card.status === 'installing'}>
+              <div class={styles().pluginMarketplaceCardSpinner} />
+              <span class={styles().pluginMarketplaceCardStatusText}>
+                Installing...
+              </span>
+            </Show>
+            <Show when={card.status === 'success'}>
+              <CheckCircleIcon />
+              <span class={styles().pluginMarketplaceCardStatusText}>
+                Installed!
+              </span>
+            </Show>
+            <Show when={card.status === 'error'}>
+              <XCircleIcon />
+              <span class={styles().pluginMarketplaceCardStatusTextError}>
+                {card.error || 'Failed to install'}
+              </span>
+            </Show>
+          </div>
+        }
+      >
+        <Button
+          variant={getButtonVariant(card)}
+          onClick={() => props.onAction(card)}
+          disabled={
+            card.status !== 'idle' ||
+            card.actionType === 'requires-package' ||
+            card.actionType === 'wrong-framework' ||
+            card.actionType === 'already-installed' ||
+            card.actionType === 'version-mismatch'
+          }
+          class={
+            card.actionType === 'already-installed'
+              ? styles().pluginMarketplaceButtonInstalled
+              : ''
+          }
+        >
+          {getButtonText(card)}
+        </Button>
+      </Show>
+    </div>
+  )
+}
diff --git a/packages/devtools/src/tabs/marketplace/plugin-section.tsx b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
new file mode 100644
index 00000000..f0c90f20
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
@@ -0,0 +1,51 @@
+import { For, Show } from 'solid-js'
+import { ChevronDownIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { PluginCardComponent } from './plugin-card'
+import type { Accessor } from 'solid-js'
+import type { PluginCard, PluginSection } from './types'
+
+interface PluginSectionComponentProps {
+  section: PluginSection
+  isCollapsed: Accessor<boolean>
+  onToggleCollapse: () => void
+  onCardAction: (card: PluginCard) => void
+}
+
+export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
+  const styles = useStyles()
+
+  return (
+    <div class={styles().pluginMarketplaceSection}>
+      <div
+        class={styles().pluginMarketplaceSectionHeader}
+        onClick={props.onToggleCollapse}
+      >
+        <div class={styles().pluginMarketplaceSectionHeaderLeft}>
+          <div
+            class={styles().pluginMarketplaceSectionChevron}
+            classList={{
+              [styles().pluginMarketplaceSectionChevronCollapsed]:
+                props.isCollapsed(),
+            }}
+          >
+            <ChevronDownIcon />
+          </div>
+          <h3 class={styles().pluginMarketplaceSectionTitle}>
+            {props.section.displayName}
+          </h3>
+        </div>
+      </div>
+
+      <Show when={!props.isCollapsed()}>
+        <div class={styles().pluginMarketplaceGrid}>
+          <For each={props.section.cards}>
+            {(card) => (
+              <PluginCardComponent card={card} onAction={props.onCardAction} />
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/packages/devtools/src/tabs/marketplace/plugin-utils.test.ts b/packages/devtools/src/tabs/marketplace/plugin-utils.test.ts
new file mode 100644
index 00000000..047201da
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/plugin-utils.test.ts
@@ -0,0 +1,518 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildPluginCards,
+  detectFramework,
+  groupIntoSections,
+  isPluginRegistered,
+} from './plugin-utils'
+import { FRAMEWORKS } from './types'
+import type { PluginCard } from './types'
+import type { PackageJson } from '@tanstack/devtools-client'
+
+describe('detectFramework', () => {
+  it('should detect React', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { react: '^18.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('react')
+  })
+
+  it('should detect React from react-dom', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { 'react-dom': '^18.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('react')
+  })
+
+  it('should detect Vue', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { vue: '^3.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('vue')
+  })
+
+  it('should detect Solid', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { 'solid-js': '^1.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('solid')
+  })
+
+  it('should detect Svelte', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { svelte: '^4.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('svelte')
+  })
+
+  it('should detect Angular', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { '@angular/core': '^17.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('angular')
+  })
+
+  it('should check devDependencies as well', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      devDependencies: { react: '^18.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('react')
+  })
+
+  it('should return unknown when no framework is detected', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: { lodash: '^4.0.0' },
+    }
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('unknown')
+  })
+
+  it('should return first matching framework if multiple are present', () => {
+    const pkg: PackageJson = {
+      name: 'test-app',
+      dependencies: {
+        react: '^18.0.0',
+        vue: '^3.0.0',
+      },
+    }
+    // Should return react since it's first in the FRAMEWORKS array
+    expect(detectFramework(pkg, FRAMEWORKS)).toBe('react')
+  })
+})
+
+describe('isPluginRegistered', () => {
+  it('should match with custom pluginId', () => {
+    const registeredPlugins = new Set(['tanstack-query-0', 'tanstack-form-1'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        '@tanstack/react-query-devtools',
+        'react',
+        'tanstack-query',
+      ),
+    ).toBe(true)
+  })
+
+  it('should match when pluginId is a prefix', () => {
+    const registeredPlugins = new Set(['tanstack-form-4'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-form-devtools',
+        '@tanstack/react-form-devtools',
+        'react',
+        'tanstack-form',
+      ),
+    ).toBe(true)
+  })
+
+  it('should match when pluginId is contained', () => {
+    const registeredPlugins = new Set(['my-tanstack-query-wrapper'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        '@tanstack/react-query-devtools',
+        'react',
+        'tanstack-query',
+      ),
+    ).toBe(true)
+  })
+
+  it('should not match when pluginId is not found', () => {
+    const registeredPlugins = new Set(['tanstack-router-0'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        '@tanstack/react-query-devtools',
+        'react',
+        'tanstack-query',
+      ),
+    ).toBe(false)
+  })
+
+  it('should match with direct package name', () => {
+    const registeredPlugins = new Set(['@tanstack/react-query-devtools'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        '@tanstack/react-query-devtools',
+        'react',
+      ),
+    ).toBe(true)
+  })
+
+  it('should match with plugin parts in lowercase', () => {
+    const registeredPlugins = new Set(['react-query-plugin'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        'react-query-devtools',
+        'react',
+      ),
+    ).toBe(true)
+  })
+
+  it('should match with framework and plugin parts', () => {
+    const registeredPlugins = new Set(['react-custom-query'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        'query-devtools',
+        'react',
+      ),
+    ).toBe(true)
+  })
+
+  it('should not match unrelated plugin names', () => {
+    const registeredPlugins = new Set(['vue-router'])
+    expect(
+      isPluginRegistered(
+        registeredPlugins,
+        '@tanstack/react-query-devtools',
+        'react-query-devtools',
+        'react',
+      ),
+    ).toBe(false)
+  })
+})
+
+describe('groupIntoSections', () => {
+  const createMockCard = (overrides: Partial<PluginCard>): PluginCard => ({
+    requiredPackageName: '@tanstack/react-query',
+    devtoolsPackage: '@tanstack/react-query-devtools',
+    framework: 'react',
+    hasPackage: false,
+    hasDevtools: false,
+    isRegistered: false,
+    actionType: 'install',
+    status: 'idle',
+    isCurrentFramework: true,
+    metadata: {
+      packageName: '@tanstack/react-query-devtools',
+      title: 'Query Devtools',
+      framework: 'react',
+    },
+    ...overrides,
+  })
+
+  it('should group active plugins', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'already-installed',
+        isRegistered: true,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Active Plugin',
+          framework: 'react',
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0]?.id).toBe('active')
+    expect(sections[0]?.displayName).toBe('✓ Active Plugins')
+    expect(sections[0]?.cards).toHaveLength(1)
+  })
+
+  it('should group featured plugins', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Featured Plugin',
+          framework: 'react',
+          featured: true,
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[0]?.displayName).toBe('⭐ Featured')
+  })
+
+  it('should not include already-installed plugins in featured section', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'already-installed',
+        isRegistered: true,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Active Featured',
+          framework: 'react',
+          featured: true,
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0]?.id).toBe('active')
+    expect(sections.find((s) => s.id === 'featured')).toBeUndefined()
+  })
+
+  it('should group available plugins', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Available Plugin',
+          framework: 'react',
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0]?.id).toBe('available')
+    expect(sections[0]?.displayName).toBe('Available Plugins')
+  })
+
+  it('should not include featured plugins in available section', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Featured Plugin',
+          framework: 'react',
+          featured: true,
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections.find((s) => s.id === 'available')).toBeUndefined()
+  })
+
+  it('should create all three sections when appropriate', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'already-installed',
+        isRegistered: true,
+        metadata: {
+          packageName: 'active',
+          title: 'Active',
+          framework: 'react',
+        },
+      }),
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: 'featured',
+          title: 'Featured',
+          framework: 'react',
+          featured: true,
+        },
+      }),
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: 'available',
+          title: 'Available',
+          framework: 'react',
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(3)
+    expect(sections[0]?.id).toBe('active')
+    expect(sections[1]?.id).toBe('featured')
+    expect(sections[2]?.id).toBe('available')
+  })
+
+  it('should not create sections for wrong framework plugins', () => {
+    const cards = [
+      createMockCard({
+        actionType: 'install',
+        isCurrentFramework: false,
+        metadata: {
+          packageName: 'pkg1',
+          title: 'Wrong Framework',
+          framework: 'vue',
+        },
+      }),
+    ]
+
+    const sections = groupIntoSections(cards)
+
+    expect(sections).toHaveLength(0)
+  })
+
+  it('should handle empty card array', () => {
+    const sections = groupIntoSections([])
+    expect(sections).toHaveLength(0)
+  })
+})
+
+describe('buildPluginCards', () => {
+  const mockPackageJson: PackageJson = {
+    name: 'test-app',
+    dependencies: {
+      '@tanstack/react-query': '^5.0.0',
+    },
+    devDependencies: {
+      '@tanstack/react-query-devtools': '^5.0.0',
+    },
+  }
+
+  it('should build cards for all plugins in registry', () => {
+    const cards = buildPluginCards(mockPackageJson, 'react', new Set(), [])
+
+    expect(cards.length).toBeGreaterThan(0)
+    expect(cards.every((card) => card.devtoolsPackage)).toBe(true)
+  })
+
+  it('should mark plugins as current framework', () => {
+    const cards = buildPluginCards(mockPackageJson, 'react', new Set(), [])
+
+    const reactPlugins = cards.filter((c) => c.framework === 'react')
+    expect(reactPlugins.every((c) => c.isCurrentFramework)).toBe(true)
+  })
+
+  it('should mark wrong framework plugins', () => {
+    const cards = buildPluginCards(mockPackageJson, 'vue', new Set(), [])
+
+    const reactPlugins = cards.filter((c) => c.framework === 'react')
+    expect(reactPlugins.every((c) => c.actionType === 'wrong-framework')).toBe(
+      true,
+    )
+  })
+
+  it('should detect already installed and registered plugins', () => {
+    const registeredPlugins = new Set(['tanstack-query'])
+
+    const cards = buildPluginCards(
+      mockPackageJson,
+      'react',
+      registeredPlugins,
+      [],
+    )
+
+    const queryPlugin = cards.find(
+      (c) => c.devtoolsPackage === '@tanstack/react-query-devtools',
+    )
+
+    expect(queryPlugin?.hasDevtools).toBe(true)
+    expect(queryPlugin?.isRegistered).toBe(true)
+    expect(queryPlugin?.actionType).toBe('already-installed')
+  })
+
+  it('should detect add-to-devtools action when installed but not registered', () => {
+    const cards = buildPluginCards(mockPackageJson, 'react', new Set(), [])
+
+    const queryPlugin = cards.find(
+      (c) => c.devtoolsPackage === '@tanstack/react-query-devtools',
+    )
+
+    expect(queryPlugin?.hasDevtools).toBe(true)
+    expect(queryPlugin?.isRegistered).toBe(false)
+    expect(queryPlugin?.actionType).toBe('add-to-devtools')
+  })
+
+  it('should detect requires-package action', () => {
+    const pkgWithoutQuery: PackageJson = {
+      name: 'test-app',
+      dependencies: {},
+    }
+
+    const cards = buildPluginCards(pkgWithoutQuery, 'react', new Set(), [])
+
+    const queryPlugin = cards.find(
+      (c) => c.devtoolsPackage === '@tanstack/react-query-devtools',
+    )
+
+    expect(queryPlugin?.actionType).toBe('requires-package')
+  })
+
+  it('should detect install-devtools action', () => {
+    const pkgWithQuery: PackageJson = {
+      name: 'test-app',
+      dependencies: {
+        '@tanstack/react-query': '^5.0.0',
+      },
+    }
+
+    const cards = buildPluginCards(pkgWithQuery, 'react', new Set(), [])
+
+    const queryPlugin = cards.find(
+      (c) => c.devtoolsPackage === '@tanstack/react-query-devtools',
+    )
+
+    expect(queryPlugin?.hasPackage).toBe(true)
+    expect(queryPlugin?.hasDevtools).toBe(false)
+    expect(queryPlugin?.actionType).toBe('install-devtools')
+  })
+
+  it('should preserve status from existing cards', () => {
+    const existingCards: Array<PluginCard> = [
+      {
+        requiredPackageName: '@tanstack/react-query',
+        devtoolsPackage: '@tanstack/react-query-devtools',
+        framework: 'react',
+        hasPackage: false,
+        hasDevtools: false,
+        isRegistered: false,
+        actionType: 'install',
+        status: 'installing',
+        isCurrentFramework: true,
+        metadata: {
+          packageName: '@tanstack/react-query-devtools',
+          title: 'Query',
+          framework: 'react',
+        },
+      },
+    ]
+
+    const cards = buildPluginCards(
+      mockPackageJson,
+      'react',
+      new Set(),
+      existingCards,
+    )
+
+    const queryPlugin = cards.find(
+      (c) => c.devtoolsPackage === '@tanstack/react-query-devtools',
+    )
+
+    expect(queryPlugin?.status).toBe('installing')
+  })
+
+  it('should handle framework-agnostic plugins', () => {
+    const cards = buildPluginCards(mockPackageJson, 'react', new Set(), [])
+
+    const otherFrameworkPlugins = cards.filter(
+      (c) => c.metadata?.framework === 'other',
+    )
+    expect(otherFrameworkPlugins.every((c) => c.isCurrentFramework)).toBe(true)
+  })
+})
diff --git a/packages/devtools/src/tabs/marketplace/plugin-utils.ts b/packages/devtools/src/tabs/marketplace/plugin-utils.ts
new file mode 100644
index 00000000..5337ff7b
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/plugin-utils.ts
@@ -0,0 +1,248 @@
+import { getAllPluginMetadata } from '../plugin-registry'
+import { satisfiesVersionRange } from '../semver-utils'
+import type { PackageJson } from '@tanstack/devtools-client'
+import type { ActionType, FRAMEWORKS, PluginCard, PluginSection } from './types'
+
+export const detectFramework = (
+  pkg: PackageJson,
+  frameworks: typeof FRAMEWORKS,
+): string => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+
+  // Map of framework to their actual package names
+  const frameworkPackageMap: Record<string, Array<string>> = {
+    react: ['react', 'react-dom'],
+    vue: ['vue', '@vue/core'],
+    solid: ['solid-js'],
+    svelte: ['svelte'],
+    angular: ['@angular/core'],
+  }
+
+  // Check for actual framework packages
+  for (const framework of frameworks) {
+    const frameworkPackages = frameworkPackageMap[framework]
+    if (frameworkPackages && frameworkPackages.some((pkg) => allDeps[pkg])) {
+      return framework
+    }
+  }
+
+  return 'unknown'
+}
+
+export const isPluginRegistered = (
+  registeredPlugins: Set<string>,
+  packageName: string,
+  pluginName: string,
+  framework: string,
+  pluginId?: string,
+): boolean => {
+  // If a custom pluginId is provided, use it for matching
+  if (pluginId) {
+    return Array.from(registeredPlugins).some((id) => {
+      const idLower = id.toLowerCase()
+      const pluginIdLower = pluginId.toLowerCase()
+      // Match if the registered id starts with the pluginId or contains it
+      return (
+        idLower.startsWith(pluginIdLower) || idLower.includes(pluginIdLower)
+      )
+    })
+  }
+
+  // Direct match on package name
+  if (registeredPlugins.has(packageName)) return true
+
+  // Check if any registered plugin name contains the key parts
+  // Extract meaningful words from pluginName (split by common delimiters)
+  const pluginWords = pluginName
+    .toLowerCase()
+    .split(/[-_/@]/)
+    .filter((word) => word.length > 0)
+  const frameworkPart = framework.toLowerCase()
+
+  return Array.from(registeredPlugins).some((id) => {
+    const idLower = id.toLowerCase()
+
+    // Match if registered id contains the full pluginName
+    if (idLower.includes(pluginName.toLowerCase())) {
+      return true
+    }
+
+    // Match if multiple key words from pluginName are found in the registered id
+    const matchedWords = pluginWords.filter((word) => idLower.includes(word))
+
+    // If we match multiple words, it's likely the same plugin
+    if (matchedWords.length >= 2) {
+      return true
+    }
+
+    // Match if framework and at least one plugin word match
+    if (idLower.includes(frameworkPart) && matchedWords.length >= 1) {
+      return true
+    }
+
+    return false
+  })
+}
+
+export const buildPluginCards = (
+  pkg: PackageJson,
+  currentFramework: string,
+  registeredPlugins: Set<string>,
+  existingCards: Array<PluginCard>,
+): Array<PluginCard> => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+
+  const allCards: Array<PluginCard> = []
+
+  // Iterate through all plugins in the registry
+  const allPlugins = getAllPluginMetadata()
+
+  allPlugins.forEach((metadata) => {
+    const devtoolsPackage = metadata.packageName
+
+    // Check if plugin's framework matches current framework or is 'other' (framework-agnostic)
+    const isCurrentFramework =
+      metadata.framework === currentFramework || metadata.framework === 'other'
+
+    // Extract package name from devtools package
+    // For @tanstack/react-query-devtools, the base package is @tanstack/react-query
+    const requiredPackageName = metadata.requires?.packageName
+
+    const hasPackage = requiredPackageName
+      ? !!allDeps[requiredPackageName]
+      : false
+    const hasDevtools = !!allDeps[devtoolsPackage]
+
+    // Check version requirements based on the requires field
+    let versionInfo: PluginCard['versionInfo'] | undefined
+    if (hasPackage && metadata.requires) {
+      const currentVersion = requiredPackageName
+        ? allDeps[requiredPackageName]
+        : undefined
+      if (currentVersion) {
+        const versionCheck = satisfiesVersionRange(
+          currentVersion,
+          metadata.requires.minVersion,
+          metadata.requires.maxVersion,
+        )
+        versionInfo = {
+          current: currentVersion,
+          required: metadata.requires.minVersion,
+          satisfied: versionCheck.satisfied,
+          reason: versionCheck.reason,
+        }
+      }
+    }
+
+    // Check if plugin is registered
+    const isRegistered = isPluginRegistered(
+      registeredPlugins,
+      devtoolsPackage,
+      metadata.packageName,
+      metadata.framework,
+      metadata.pluginId,
+    )
+
+    // Determine action type
+    let actionType: ActionType
+    if (!isCurrentFramework) {
+      actionType = 'wrong-framework'
+    } else if (metadata.requires && !hasPackage) {
+      actionType = 'requires-package'
+    } else if (versionInfo && !versionInfo.satisfied) {
+      // Version doesn't meet requirements - need to bump
+      actionType = 'bump-version'
+    } else if (hasDevtools && isRegistered) {
+      actionType = 'already-installed'
+    } else if (hasDevtools && !isRegistered) {
+      actionType = 'add-to-devtools'
+    } else if (!hasDevtools && metadata.requires && hasPackage) {
+      // Requirement is met but devtools package not installed
+      actionType = 'install-devtools'
+    } else if (!hasDevtools) {
+      actionType = 'install'
+    } else {
+      // Fallback - should not reach here
+      actionType = 'install'
+    }
+
+    // Find existing card to preserve status
+    const existing = existingCards.find(
+      (c) => c.devtoolsPackage === devtoolsPackage,
+    )
+
+    allCards.push({
+      requiredPackageName: requiredPackageName || '',
+      devtoolsPackage,
+      framework: metadata.framework,
+      hasPackage,
+      hasDevtools,
+      isRegistered,
+      actionType,
+      status: existing?.status || 'idle',
+      error: existing?.error,
+      isCurrentFramework,
+      metadata,
+      versionInfo,
+    })
+  })
+
+  return allCards
+}
+
+export const groupIntoSections = (
+  allCards: Array<PluginCard>,
+): Array<PluginSection> => {
+  const sections: Array<PluginSection> = []
+
+  // Add Active Plugins section
+  const activeCards = allCards.filter(
+    (c) => c.actionType === 'already-installed' && c.isRegistered,
+  )
+  if (activeCards.length > 0) {
+    sections.push({
+      id: 'active',
+      displayName: '✓ Active Plugins',
+      cards: activeCards,
+    })
+  }
+
+  // Add Featured section
+  const featuredCards = allCards.filter(
+    (c) =>
+      c.metadata?.featured &&
+      c.actionType !== 'already-installed' &&
+      c.isCurrentFramework, // Only show featured plugins for current framework
+  )
+  if (featuredCards.length > 0) {
+    sections.push({
+      id: 'featured',
+      displayName: '⭐ Featured',
+      cards: featuredCards,
+    })
+  }
+
+  // Add Available section - all plugins for current framework (TanStack + third-party)
+  const availableCards = allCards.filter(
+    (c) =>
+      c.isCurrentFramework &&
+      c.actionType !== 'already-installed' &&
+      !c.metadata?.featured, // Not featured (already in featured section)
+  )
+
+  if (availableCards.length > 0) {
+    sections.push({
+      id: 'available',
+      displayName: 'Available Plugins',
+      cards: availableCards,
+    })
+  }
+
+  return sections
+}
diff --git a/packages/devtools/src/tabs/marketplace/settings-panel.tsx b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
new file mode 100644
index 00000000..d0dbc5f9
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
@@ -0,0 +1,41 @@
+import { Show } from 'solid-js'
+import { Checkbox, CloseIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import type { Accessor, Setter } from 'solid-js'
+
+interface SettingsPanelProps {
+  isOpen: Accessor<boolean>
+  onClose: () => void
+  showActivePlugins: Accessor<boolean>
+  setShowActivePlugins: Setter<boolean>
+}
+
+export const SettingsPanel = (props: SettingsPanelProps) => {
+  const styles = useStyles()
+
+  return (
+    <Show when={props.isOpen()}>
+      <div class={styles().pluginMarketplaceSettingsPanel}>
+        <div class={styles().pluginMarketplaceSettingsPanelHeader}>
+          <h3 class={styles().pluginMarketplaceSettingsPanelTitle}>
+            Marketplace Settings
+          </h3>
+          <button
+            class={styles().pluginMarketplaceSettingsPanelClose}
+            onClick={props.onClose}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+        <div class={styles().pluginMarketplaceSettingsPanelContent}>
+          <Checkbox
+            label="Show active plugins"
+            description="Display installed plugins in a separate section"
+            checked={props.showActivePlugins()}
+            onChange={(checked) => props.setShowActivePlugins(checked)}
+          />
+        </div>
+      </div>
+    </Show>
+  )
+}
diff --git a/packages/devtools/src/tabs/marketplace/tag-filters.tsx b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
new file mode 100644
index 00000000..729de08c
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
@@ -0,0 +1,35 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import type { Accessor } from 'solid-js'
+
+interface TagFiltersProps {
+  tags: Accessor<Array<string>>
+  selectedTags: Accessor<Set<string>>
+  onToggleTag: (tag: string) => void
+}
+
+export const TagFilters = (props: TagFiltersProps) => {
+  const styles = useStyles()
+
+  return (
+    <Show when={props.tags().length > 0}>
+      <div class={styles().pluginMarketplaceTagsContainer}>
+        <For each={props.tags()}>
+          {(tag) => (
+            <button
+              class={styles().pluginMarketplaceTagButton}
+              classList={{
+                [styles().pluginMarketplaceTagButtonActive]: props
+                  .selectedTags()
+                  .has(tag),
+              }}
+              onClick={() => props.onToggleTag(tag)}
+            >
+              {tag}
+            </button>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}
diff --git a/packages/devtools/src/tabs/marketplace/types.ts b/packages/devtools/src/tabs/marketplace/types.ts
new file mode 100644
index 00000000..7b22830f
--- /dev/null
+++ b/packages/devtools/src/tabs/marketplace/types.ts
@@ -0,0 +1,47 @@
+import type { PluginMetadata } from '../plugin-registry'
+
+type InstallStatus = 'idle' | 'installing' | 'success' | 'error'
+
+export type ActionType =
+  | 'install'
+  | 'install-devtools'
+  | 'add-to-devtools'
+  | 'requires-package'
+  | 'wrong-framework'
+  | 'already-installed'
+  | 'version-mismatch'
+  | 'bump-version'
+
+export interface PluginCard {
+  requiredPackageName: string
+  devtoolsPackage: string
+  framework: string
+  hasPackage: boolean
+  hasDevtools: boolean
+  isRegistered: boolean
+  actionType: ActionType
+  status: InstallStatus
+  error?: string
+  isCurrentFramework: boolean
+  metadata?: PluginMetadata
+  versionInfo?: {
+    current: string
+    required?: string
+    satisfied: boolean
+    reason?: string
+  }
+}
+
+export interface PluginSection {
+  id: string
+  displayName: string
+  cards: Array<PluginCard>
+}
+
+export const FRAMEWORKS = [
+  'react',
+  'solid',
+  'vue',
+  'svelte',
+  'angular',
+] as const
diff --git a/packages/devtools/src/tabs/plugin-marketplace.tsx b/packages/devtools/src/tabs/plugin-marketplace.tsx
new file mode 100644
index 00000000..06b942fa
--- /dev/null
+++ b/packages/devtools/src/tabs/plugin-marketplace.tsx
@@ -0,0 +1,346 @@
+import { For, Show, createSignal, onCleanup, onMount } from 'solid-js'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
+import { usePlugins } from '../context/use-devtools-context'
+import { useStyles } from '../styles/use-styles'
+import { PluginSectionComponent } from './marketplace/plugin-section'
+import { SettingsPanel } from './marketplace/settings-panel'
+import { MarketplaceHeader } from './marketplace/marketplace-header'
+import { FRAMEWORKS } from './marketplace/types'
+import {
+  buildPluginCards,
+  detectFramework,
+  groupIntoSections,
+} from './marketplace/plugin-utils'
+import type { PackageJson } from '@tanstack/devtools-client'
+import type { PluginCard, PluginSection } from './marketplace/types'
+
+export const PluginMarketplace = () => {
+  const styles = useStyles()
+  const { plugins } = usePlugins()
+  const [pluginSections, setPluginSections] = createSignal<
+    Array<PluginSection>
+  >([])
+  const [currentPackageJson, setCurrentPackageJson] =
+    createSignal<PackageJson | null>(null)
+  const [searchInput, setSearchInput] = createSignal('')
+  const [searchQuery, setSearchQuery] = createSignal('')
+  const [collapsedSections, setCollapsedSections] = createSignal<Set<string>>(
+    new Set(),
+  )
+  const [showActivePlugins, setShowActivePlugins] = createSignal(true)
+  const [selectedTags, setSelectedTags] = createSignal<Set<string>>(new Set())
+  const [isSettingsOpen, setIsSettingsOpen] = createSignal(false)
+
+  let debounceTimeout: ReturnType<typeof setTimeout> | undefined
+
+  // Debounce search input
+  const handleSearchInput = (value: string) => {
+    setSearchInput(value)
+
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout)
+    }
+
+    debounceTimeout = setTimeout(() => {
+      setSearchQuery(value)
+    }, 300)
+  }
+
+  const toggleSection = (framework: string) => {
+    setCollapsedSections((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(framework)) {
+        newSet.delete(framework)
+      } else {
+        newSet.add(framework)
+      }
+      return newSet
+    })
+  }
+
+  const matchesSearch = (card: PluginCard, query: string): boolean => {
+    if (!query) return true
+
+    const lowerQuery = query.toLowerCase()
+    return (
+      card.devtoolsPackage.toLowerCase().includes(lowerQuery) ||
+      card.requiredPackageName.toLowerCase().includes(lowerQuery) ||
+      card.framework.toLowerCase().includes(lowerQuery)
+    )
+  }
+
+  const getFilteredSections = () => {
+    const query = searchQuery()
+    const showActive = showActivePlugins()
+    const tags = selectedTags()
+    const pkg = currentPackageJson()
+
+    // Regenerate sections from current plugin state
+    if (!pkg) return []
+
+    const currentFramework = detectFramework(pkg, FRAMEWORKS)
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || '') || [])
+
+    // Build fresh cards from current state
+    const allCards = buildPluginCards(
+      pkg,
+      currentFramework,
+      registeredPlugins,
+      pluginSections().flatMap((s) => s.cards), // Preserve status from existing cards
+    )
+
+    // Generate sections from cards
+    let sections = groupIntoSections(allCards)
+
+    // Filter out active plugins section if hidden
+    if (!showActive) {
+      sections = sections.filter((section) => section.id !== 'active')
+    }
+
+    // Filter by tags if any are selected
+    if (tags.size > 0) {
+      sections = sections
+        .map((section) => ({
+          ...section,
+          cards: section.cards.filter((card) => {
+            if (!card.metadata?.tags) return false
+            return card.metadata.tags.some((tag) => tags.has(tag))
+          }),
+        }))
+        .filter((section) => section.cards.length > 0)
+    }
+
+    // Apply search filter
+    if (!query) return sections
+
+    return sections
+      .map((section) => ({
+        ...section,
+        cards: section.cards.filter((card) => matchesSearch(card, query)),
+      }))
+      .filter((section) => section.cards.length > 0)
+  }
+
+  onMount(() => {
+    // Listen for package.json updates
+    const cleanupJsonRead = devtoolsEventClient.on(
+      'package-json-read',
+      (event) => {
+        setCurrentPackageJson(event.payload.packageJson)
+        updatePluginCards(event.payload.packageJson)
+      },
+    )
+
+    const cleanupJsonUpdated = devtoolsEventClient.on(
+      'package-json-updated',
+      (event) => {
+        setCurrentPackageJson(event.payload.packageJson)
+        updatePluginCards(event.payload.packageJson)
+      },
+    )
+
+    // Listen for installation results
+    const cleanupDevtoolsInstalled = devtoolsEventClient.on(
+      'devtools-installed',
+      (event) => {
+        setPluginSections((prevSections) =>
+          prevSections.map((section) => ({
+            ...section,
+            cards: section.cards.map((card) =>
+              card.devtoolsPackage === event.payload.packageName
+                ? {
+                    ...card,
+                    status: event.payload.success ? 'success' : 'error',
+                    error: event.payload.error,
+                  }
+                : card,
+            ),
+          })),
+        )
+      },
+    )
+
+    // Listen for plugin added results
+    const cleanupPluginAdded = devtoolsEventClient.on(
+      'plugin-added',
+      (event) => {
+        setPluginSections((prevSections) =>
+          prevSections.map((section) => ({
+            ...section,
+            cards: section.cards.map((card) =>
+              card.devtoolsPackage === event.payload.packageName
+                ? {
+                    ...card,
+                    status: event.payload.success ? 'success' : 'error',
+                    error: event.payload.error,
+                  }
+                : card,
+            ),
+          })),
+        )
+
+        // When plugin is successfully added, recalculate to move it to active section
+        if (event.payload.success) {
+          const pkg = currentPackageJson()
+          if (pkg) {
+            updatePluginCards(pkg)
+          }
+        }
+      },
+    )
+
+    onCleanup(() => {
+      cleanupJsonRead()
+      cleanupJsonUpdated()
+      cleanupDevtoolsInstalled()
+      cleanupPluginAdded()
+    })
+    // Emit mounted event to trigger package.json read
+    devtoolsEventClient.emit('mounted', undefined)
+  })
+
+  const updatePluginCards = (pkg: PackageJson | null) => {
+    if (!pkg) return
+
+    const currentFramework = detectFramework(pkg, FRAMEWORKS)
+
+    // Get list of registered plugin names
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || '') || [])
+
+    const allCards = buildPluginCards(
+      pkg,
+      currentFramework,
+      registeredPlugins,
+      pluginSections().flatMap((s) => s.cards),
+    )
+
+    const sections = groupIntoSections(allCards)
+    setPluginSections(sections)
+  }
+
+  const handleAction = (card: PluginCard) => {
+    if (
+      card.actionType === 'requires-package' ||
+      card.actionType === 'wrong-framework' ||
+      card.actionType === 'already-installed' ||
+      card.actionType === 'version-mismatch'
+    ) {
+      // Can't install devtools without the base package, wrong framework, already installed, or version mismatch
+      return
+    }
+
+    // change state to installing of the plugin user clicked
+    setPluginSections((prevSections) =>
+      prevSections.map((section) => ({
+        ...section,
+        cards: section.cards.map((c) =>
+          c.devtoolsPackage === card.devtoolsPackage
+            ? { ...c, status: 'installing' }
+            : c,
+        ),
+      })),
+    )
+
+    // Bump the version of the required package and then add to devtools
+    if (card.actionType === 'bump-version') {
+      // emits the event to vite plugin to bump the package version, this will add it to devtools after
+      devtoolsEventClient.emit('bump-package-version', {
+        packageName: card.requiredPackageName,
+        devtoolsPackage: card.devtoolsPackage,
+        pluginName: card.metadata?.title || card.devtoolsPackage,
+        minVersion: card.metadata?.requires?.minVersion,
+        pluginImport: card.metadata?.pluginImport,
+      })
+      return
+    }
+
+    if (card.actionType === 'add-to-devtools') {
+      // emits the event to vite plugin to add the plugin
+      devtoolsEventClient.emit('add-plugin-to-devtools', {
+        packageName: card.devtoolsPackage,
+        // should always be defined
+        pluginName: card.metadata?.title ?? card.devtoolsPackage,
+        pluginImport: card.metadata?.pluginImport,
+      })
+      return
+    }
+    devtoolsEventClient.emit('install-devtools', {
+      packageName: card.devtoolsPackage,
+      // should always be defined
+      pluginName: card.metadata?.title ?? card.devtoolsPackage,
+      pluginImport: card.metadata?.pluginImport,
+    })
+  }
+
+  // Get all available tags from plugins (excluding active plugins)
+  const getAllTags = () => {
+    const tags = new Set<string>()
+    pluginSections().forEach((section) => {
+      // Only get tags from featured and available sections, not active plugins
+      if (section.id === 'featured' || section.id === 'available') {
+        section.cards.forEach((card) => {
+          if (card.metadata?.tags) {
+            card.metadata.tags.forEach((tag) => tags.add(tag))
+          }
+        })
+      }
+    })
+    return Array.from(tags).sort()
+  }
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) => {
+      const newTags = new Set(prev)
+      if (newTags.has(tag)) {
+        newTags.delete(tag)
+      } else {
+        newTags.add(tag)
+      }
+      return newTags
+    })
+  }
+
+  return (
+    <div class={styles().pluginMarketplace}>
+      {/* Settings Panel */}
+      <SettingsPanel
+        isOpen={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        showActivePlugins={showActivePlugins}
+        setShowActivePlugins={setShowActivePlugins}
+      />
+
+      <MarketplaceHeader
+        searchInput={searchInput}
+        onSearchInput={handleSearchInput}
+        onSettingsClick={() => setIsSettingsOpen(!isSettingsOpen())}
+        tags={getAllTags}
+        selectedTags={selectedTags}
+        onToggleTag={toggleTag}
+      />
+
+      <Show when={getFilteredSections().length > 0}>
+        <For each={getFilteredSections()}>
+          {(section) => (
+            <PluginSectionComponent
+              section={section}
+              isCollapsed={() => collapsedSections().has(section.id)}
+              onToggleCollapse={() => toggleSection(section.id)}
+              onCardAction={handleAction}
+            />
+          )}
+        </For>
+      </Show>
+
+      <Show when={getFilteredSections().length === 0}>
+        <div class={styles().pluginMarketplaceEmpty}>
+          <p class={styles().pluginMarketplaceEmptyText}>
+            {searchQuery()
+              ? `No plugins found matching "${searchQuery()}"`
+              : 'No additional plugins available. You have all compatible devtools installed and registered!'}
+          </p>
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/packages/devtools/src/tabs/plugin-registry.ts b/packages/devtools/src/tabs/plugin-registry.ts
new file mode 100644
index 00000000..8ba20560
--- /dev/null
+++ b/packages/devtools/src/tabs/plugin-registry.ts
@@ -0,0 +1,222 @@
+/**
+ * Plugin Registry - Metadata for TanStack and third-party devtools plugins
+ *
+ * This registry allows plugin authors to customize their marketplace cards with:
+ * - Custom titles and descriptions
+ * - Logo/image URLs
+ * - Minimum version requirements (semver)
+ * - External links
+ *
+ * External companies can open PRs to add their plugins here!
+ */
+
+export interface PluginMetadata {
+  /** Package name (e.g., '@tanstack/react-query-devtools') */
+  packageName: string
+
+  /** Display title shown in the marketplace card */
+  title: string
+
+  /** Short description of what the plugin does */
+  description?: string
+
+  /** URL to a logo image (SVG, PNG, etc.) */
+  logoUrl?: string
+
+  /** Required package dependency */
+  requires?: {
+    /** Required package name (e.g., '@tanstack/react-query') */
+    packageName: string
+    /** Minimum required version (semver) */
+    minVersion: string
+    /** Maximum version (if there's a known breaking change) */
+    maxVersion?: string
+  }
+
+  /** Plugin import configuration */
+  pluginImport?: {
+    /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
+    importName: string
+    /** Whether this is a JSX component or a function that returns a plugin */
+    type: 'jsx' | 'function'
+  }
+
+  /** Custom plugin ID pattern for matching against registered plugins in devtools.
+   * If specified, this will be used to match plugin IDs that may have suffixes.
+   * For example, pluginId: "tanstack-form" will match "tanstack-form-4" in devtools.
+   * The default behavior of devtools is to lowercase the package name and replace non-alphanumeric characters with -
+   * so if the name of the plugin is "My awesome Plugin", the default pluginId would be "my-awesome-plugin".
+   */
+  pluginId?: string
+
+  /** Official documentation URL / URL to the docs on how to implement devtools */
+  docsUrl?: string
+
+  /** Plugin author/maintainer */
+  author?: string
+
+  /** Repository URL */
+  repoUrl?: string
+
+  /** Framework this plugin supports */
+  framework: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other'
+
+  /** Mark as featured to appear in the Featured section with animated border */
+  featured?: boolean
+
+  /** Mark as new to show a "New" banner on the card */
+  isNew?: boolean
+
+  /** Tags for filtering and categorization */
+  tags?: Array<string>
+}
+
+/**
+ * Registry of all known devtools plugins
+ * External contributors: Add your plugin metadata here!
+ */
+const PLUGIN_REGISTRY: Record<string, PluginMetadata> = {
+  // TanStack Query
+  '@tanstack/react-query-devtools': {
+    packageName: '@tanstack/react-query-devtools',
+    title: 'TanStack Query Devtools',
+    description:
+      'Powerful devtools for TanStack Query - inspect queries, mutations, and cache',
+    requires: {
+      packageName: '@tanstack/react-query',
+      minVersion: '5.0.0',
+    },
+    pluginId: 'tanstack-query',
+    docsUrl: 'https://tanstack.com/query/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    featured: true, // Featured plugin
+    tags: ['TanStack', 'data-fetching', 'caching', 'state-management'],
+  },
+  '@tanstack/solid-query-devtools': {
+    packageName: '@tanstack/solid-query-devtools',
+    title: 'TanStack Query Devtools',
+    description:
+      'Powerful devtools for TanStack Query - inspect queries, mutations, and cache',
+    requires: {
+      packageName: '@tanstack/solid-query',
+      minVersion: '5.0.0',
+    },
+    pluginId: 'tanstack-query',
+    docsUrl: 'https://tanstack.com/query/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'solid',
+    tags: ['TanStack', 'data-fetching', 'caching', 'state-management'],
+  },
+
+  // TanStack Router
+  '@tanstack/react-router-devtools': {
+    packageName: '@tanstack/react-router-devtools',
+    title: 'TanStack Router Devtools',
+    description: 'Inspect routes, navigation, and router state in real-time',
+    requires: {
+      packageName: '@tanstack/react-router',
+      minVersion: '1.0.0',
+    },
+    pluginId: 'tanstack-router',
+    docsUrl: 'https://tanstack.com/router/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    featured: true, // Featured plugin
+    tags: ['TanStack', 'routing', 'navigation'],
+  },
+  '@tanstack/solid-router-devtools': {
+    packageName: '@tanstack/solid-router-devtools',
+    title: 'TanStack Router Devtools',
+    description: 'Inspect routes, navigation, and router state in real-time',
+    requires: {
+      packageName: '@tanstack/solid-router',
+      minVersion: '1.0.0',
+    },
+    pluginId: 'tanstack-router',
+    docsUrl: 'https://tanstack.com/router/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'solid',
+    tags: ['TanStack', 'routing', 'navigation'],
+  },
+
+  // TanStack Form
+  '@tanstack/react-form-devtools': {
+    packageName: '@tanstack/react-form-devtools',
+    title: 'TanStack Form Devtools',
+    description: 'Debug form state, validation, and field values',
+    requires: {
+      packageName: '@tanstack/react-form',
+      minVersion: '1.23.0',
+    },
+    pluginImport: {
+      importName: 'FormDevtoolsPlugin',
+      type: 'function',
+    },
+    pluginId: 'tanstack-form',
+    docsUrl: 'https://tanstack.com/form/latest/docs/devtools',
+    author: 'TanStack',
+    framework: 'react',
+    isNew: true,
+    tags: ['TanStack', 'forms', 'validation'],
+  },
+  '@tanstack/solid-form-devtools': {
+    packageName: '@tanstack/solid-form-devtools',
+    title: 'TanStack Form Devtools',
+    description: 'Debug form state, validation, and field values',
+    requires: {
+      packageName: '@tanstack/solid-form',
+      minVersion: '1.23.0',
+    },
+    pluginImport: {
+      importName: 'FormDevtoolsPlugin',
+      type: 'function',
+    },
+    pluginId: 'tanstack-form',
+    docsUrl: 'https://tanstack.com/form/latest/docs/devtools',
+    author: 'TanStack',
+    isNew: true,
+    framework: 'solid',
+    tags: ['TanStack', 'forms', 'validation'],
+  },
+
+  // TanStack Pacer (Example - adjust as needed)
+  '@tanstack/react-pacer-devtools': {
+    packageName: '@tanstack/react-pacer-devtools',
+    title: 'Pacer Devtools',
+    description: 'Monitor and debug your Pacer animations and transitions',
+    requires: {
+      packageName: '@tanstack/react-pacer',
+      minVersion: '0.16.4',
+    },
+    author: 'TanStack',
+    framework: 'react',
+    isNew: true, // New plugin banner
+    tags: ['TanStack'],
+  },
+  '@tanstack/solid-pacer-devtools': {
+    packageName: '@tanstack/solid-pacer-devtools',
+    title: 'Pacer Devtools',
+    description: 'Monitor and debug your Pacer animations and transitions',
+    requires: {
+      packageName: '@tanstack/solid-pacer',
+      minVersion: '0.14.4',
+    },
+    author: 'TanStack',
+    framework: 'solid',
+    isNew: true, // New plugin banner
+    tags: ['TanStack'],
+  },
+
+  // ==========================================
+  // THIRD-PARTY PLUGINS - Examples
+  // ==========================================
+  // External contributors can add their plugins below!
+}
+
+/**
+ * Get all registered plugin metadata
+ */
+export function getAllPluginMetadata(): Array<PluginMetadata> {
+  return Object.values(PLUGIN_REGISTRY)
+}
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
index d88f2fec..4746087f 100644
--- a/packages/devtools/src/tabs/plugins-tab.tsx
+++ b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -1,21 +1,33 @@
-import { For, createEffect, createMemo, createSignal } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { useDrawContext } from '../context/draw-context'
 import { usePlugins, useTheme } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
+import { PluginMarketplace } from './plugin-marketplace'
 
 export const PluginsTab = () => {
   const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
-  const { expanded, hoverUtils, animationMs } = useDrawContext()
+  const { expanded, hoverUtils, animationMs, setForceExpand } = useDrawContext()
 
   const [pluginRefs, setPluginRefs] = createSignal(
     new Map<string, HTMLDivElement>(),
   )
+  const [showMarketplace, setShowMarketplace] = createSignal(false)
 
   const styles = useStyles()
 
   const { theme } = useTheme()
+
+  const hasPlugins = createMemo(
+    () => plugins()?.length && plugins()!.length > 0,
+  )
+
+  // Keep sidebar expanded when marketplace is shown
+  createEffect(() => {
+    setForceExpand(showMarketplace())
+  })
+
   createEffect(() => {
     const currentActivePlugins = plugins()?.filter((plugin) =>
       activePlugins().includes(plugin.id!),
@@ -30,76 +42,111 @@ export const PluginsTab = () => {
     })
   })
 
+  const handleMarketplaceClick = () => setShowMarketplace(!showMarketplace())
+
+  const handlePluginClick = (pluginId: string) => {
+    // Close marketplace when switching to a plugin
+    if (showMarketplace()) {
+      setShowMarketplace(false)
+    }
+    toggleActivePlugins(pluginId)
+  }
+
   return (
-    <div class={styles().pluginsTabPanel}>
-      <div
-        class={clsx(
-          styles().pluginsTabDraw(expanded()),
-          {
-            [styles().pluginsTabDraw(expanded())]: expanded(),
-          },
-          styles().pluginsTabDrawTransition(animationMs),
-        )}
-        onMouseEnter={() => hoverUtils.enter()}
-        onMouseLeave={() => hoverUtils.leave()}
-      >
+    <Show when={hasPlugins()} fallback={<PluginMarketplace />}>
+      <div class={styles().pluginsTabPanel}>
         <div
           class={clsx(
-            styles().pluginsTabSidebar(expanded()),
-            styles().pluginsTabSidebarTransition(animationMs),
+            styles().pluginsTabDraw(expanded()),
+            {
+              [styles().pluginsTabDraw(expanded())]: expanded(),
+            },
+            styles().pluginsTabDrawTransition(animationMs),
           )}
+          onMouseEnter={() => hoverUtils.enter()}
+          onMouseLeave={() => {
+            // Don't collapse on mouse leave if marketplace is open
+            if (!showMarketplace()) {
+              hoverUtils.leave()
+            }
+          }}
         >
-          <For each={plugins()}>
-            {(plugin) => {
-              let pluginHeading: HTMLHeadingElement | undefined
-
-              createEffect(() => {
-                if (pluginHeading) {
-                  typeof plugin.name === 'string'
-                    ? (pluginHeading.textContent = plugin.name)
-                    : plugin.name(pluginHeading, theme())
-                }
-              })
-
-              const isActive = createMemo(() =>
-                activePlugins().includes(plugin.id!),
-              )
-
-              return (
+          <div
+            class={clsx(
+              styles().pluginsTabSidebar(expanded()),
+              styles().pluginsTabSidebarTransition(animationMs),
+            )}
+          >
+            <div class={styles().pluginsList}>
+              <For each={plugins()}>
+                {(plugin) => {
+                  let pluginHeading: HTMLHeadingElement | undefined
+
+                  createEffect(() => {
+                    if (pluginHeading) {
+                      typeof plugin.name === 'string'
+                        ? (pluginHeading.textContent = plugin.name)
+                        : plugin.name(pluginHeading, theme())
+                    }
+                  })
+
+                  const isActive = createMemo(() =>
+                    activePlugins().includes(plugin.id!),
+                  )
+
+                  return (
+                    <div
+                      onClick={() => handlePluginClick(plugin.id!)}
+                      class={clsx(styles().pluginName, {
+                        active: isActive(),
+                      })}
+                    >
+                      <h3
+                        id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+                        ref={pluginHeading}
+                      />
+                    </div>
+                  )
+                }}
+              </For>
+            </div>
+
+            {/* Add More Tab - visually distinct */}
+            <div
+              onClick={handleMarketplaceClick}
+              class={clsx(styles().pluginNameAddMore, {
+                active: showMarketplace(),
+              })}
+            >
+              <h3>Add More</h3>
+            </div>
+          </div>
+        </div>
+
+        {/* Show marketplace if active, otherwise show plugin panels */}
+        <Show
+          when={showMarketplace()}
+          fallback={
+            <For each={activePlugins()}>
+              {(pluginId) => (
                 <div
-                  onClick={() => {
-                    toggleActivePlugins(plugin.id!)
+                  id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
+                  ref={(el) => {
+                    setPluginRefs((prev) => {
+                      const updated = new Map(prev)
+                      updated.set(pluginId, el)
+                      return updated
+                    })
                   }}
-                  class={clsx(styles().pluginName, {
-                    active: isActive(),
-                  })}
-                >
-                  <h3
-                    id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
-                    ref={pluginHeading}
-                  />
-                </div>
-              )
-            }}
-          </For>
-        </div>
+                  class={styles().pluginsTabContent}
+                />
+              )}
+            </For>
+          }
+        >
+          <PluginMarketplace />
+        </Show>
       </div>
-
-      <For each={activePlugins()}>
-        {(pluginId) => (
-          <div
-            id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
-            ref={(el) => {
-              setPluginRefs((prev) => {
-                const updated = new Map(prev)
-                updated.set(pluginId, el)
-                return updated
-              })
-            }}
-            class={styles().pluginsTabContent}
-          />
-        )}
-      </For>
-    </div>
+    </Show>
   )
 }
diff --git a/packages/devtools/src/tabs/semver-utils.test.ts b/packages/devtools/src/tabs/semver-utils.test.ts
new file mode 100644
index 00000000..24e6624f
--- /dev/null
+++ b/packages/devtools/src/tabs/semver-utils.test.ts
@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest'
+import {
+  compareVersions,
+  parseVersion,
+  satisfiesMaxVersion,
+  satisfiesMinVersion,
+  satisfiesVersionRange,
+} from './semver-utils'
+
+describe('parseVersion', () => {
+  it('should parse basic semver format', () => {
+    const result = parseVersion('1.2.3')
+    expect(result).toEqual({
+      major: 1,
+      minor: 2,
+      patch: 3,
+      raw: '1.2.3',
+    })
+  })
+
+  it('should parse version with v prefix', () => {
+    const result = parseVersion('v2.0.1')
+    expect(result).toEqual({
+      major: 2,
+      minor: 0,
+      patch: 1,
+      raw: 'v2.0.1',
+    })
+  })
+
+  it('should parse version with ^ prefix', () => {
+    const result = parseVersion('^3.1.4')
+    expect(result).toEqual({
+      major: 3,
+      minor: 1,
+      patch: 4,
+      raw: '^3.1.4',
+    })
+  })
+
+  it('should parse version with ~ prefix', () => {
+    const result = parseVersion('~1.5.2')
+    expect(result).toEqual({
+      major: 1,
+      minor: 5,
+      patch: 2,
+      raw: '~1.5.2',
+    })
+  })
+
+  it('should handle prerelease versions', () => {
+    const result = parseVersion('1.0.0-alpha.1')
+    expect(result).toEqual({
+      major: 1,
+      minor: 0,
+      patch: 0,
+      raw: '1.0.0-alpha.1',
+    })
+  })
+
+  it('should handle build metadata', () => {
+    const result = parseVersion('1.0.0+20130313144700')
+    expect(result).toEqual({
+      major: 1,
+      minor: 0,
+      patch: 0,
+      raw: '1.0.0+20130313144700',
+    })
+  })
+
+  it('should handle version with only major.minor', () => {
+    const result = parseVersion('2.1')
+    expect(result).toEqual({
+      major: 2,
+      minor: 1,
+      patch: 0,
+      raw: '2.1',
+    })
+  })
+
+  it('should return null for invalid version', () => {
+    expect(parseVersion('')).toBeNull()
+    expect(parseVersion('invalid')).toBeNull()
+    expect(parseVersion('1')).toBeNull()
+  })
+
+  it('should return null for version with non-numeric parts', () => {
+    expect(parseVersion('a.b.c')).toBeNull()
+  })
+})
+
+describe('compareVersions', () => {
+  it('should return 0 for equal versions', () => {
+    const v1 = parseVersion('1.2.3')!
+    const v2 = parseVersion('1.2.3')!
+    expect(compareVersions(v1, v2)).toBe(0)
+  })
+
+  it('should return positive for newer major version', () => {
+    const v1 = parseVersion('2.0.0')!
+    const v2 = parseVersion('1.0.0')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+
+  it('should return negative for older major version', () => {
+    const v1 = parseVersion('1.0.0')!
+    const v2 = parseVersion('2.0.0')!
+    expect(compareVersions(v1, v2)).toBeLessThan(0)
+  })
+
+  it('should compare minor versions when major is equal', () => {
+    const v1 = parseVersion('1.5.0')!
+    const v2 = parseVersion('1.3.0')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+
+  it('should compare patch versions when major and minor are equal', () => {
+    const v1 = parseVersion('1.2.5')!
+    const v2 = parseVersion('1.2.3')!
+    expect(compareVersions(v1, v2)).toBeGreaterThan(0)
+  })
+})
+
+describe('satisfiesMinVersion', () => {
+  it('should return true when current version meets minimum', () => {
+    expect(satisfiesMinVersion('2.0.0', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.5.0', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.0.5', '1.0.0')).toBe(true)
+  })
+
+  it('should return true when versions are equal', () => {
+    expect(satisfiesMinVersion('1.2.3', '1.2.3')).toBe(true)
+  })
+
+  it('should return false when current version is below minimum', () => {
+    expect(satisfiesMinVersion('0.9.0', '1.0.0')).toBe(false)
+    expect(satisfiesMinVersion('1.0.0', '1.5.0')).toBe(false)
+    expect(satisfiesMinVersion('1.2.3', '1.2.5')).toBe(false)
+  })
+
+  it('should return true if version cannot be parsed', () => {
+    expect(satisfiesMinVersion('invalid', '1.0.0')).toBe(true)
+    expect(satisfiesMinVersion('1.0.0', 'invalid')).toBe(true)
+  })
+})
+
+describe('satisfiesMaxVersion', () => {
+  it('should return true when current version is below maximum', () => {
+    expect(satisfiesMaxVersion('1.0.0', '2.0.0')).toBe(true)
+    expect(satisfiesMaxVersion('1.5.0', '2.0.0')).toBe(true)
+  })
+
+  it('should return true when versions are equal', () => {
+    expect(satisfiesMaxVersion('1.2.3', '1.2.3')).toBe(true)
+  })
+
+  it('should return false when current version exceeds maximum', () => {
+    expect(satisfiesMaxVersion('2.0.0', '1.0.0')).toBe(false)
+    expect(satisfiesMaxVersion('1.5.0', '1.0.0')).toBe(false)
+  })
+
+  it('should return true if version cannot be parsed', () => {
+    expect(satisfiesMaxVersion('invalid', '1.0.0')).toBe(true)
+    expect(satisfiesMaxVersion('1.0.0', 'invalid')).toBe(true)
+  })
+})
+
+describe('satisfiesVersionRange', () => {
+  it('should return satisfied when no range specified', () => {
+    expect(satisfiesVersionRange('1.0.0')).toEqual({ satisfied: true })
+  })
+
+  it('should validate minimum version only', () => {
+    expect(satisfiesVersionRange('2.0.0', '1.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('0.9.0', '1.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v1.0.0 or higher (current: v0.9.0)',
+    })
+  })
+
+  it('should validate maximum version only', () => {
+    expect(satisfiesVersionRange('1.0.0', undefined, '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('3.0.0', undefined, '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v2.0.0 or lower (current: v3.0.0)',
+    })
+  })
+
+  it('should validate both min and max versions', () => {
+    expect(satisfiesVersionRange('1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('0.9.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v1.0.0 or higher (current: v0.9.0)',
+    })
+    expect(satisfiesVersionRange('2.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: false,
+      reason: 'Requires v2.0.0 or lower (current: v2.5.0)',
+    })
+  })
+
+  it('should handle version prefixes', () => {
+    expect(satisfiesVersionRange('^1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('~1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+    expect(satisfiesVersionRange('v1.5.0', '1.0.0', '2.0.0')).toEqual({
+      satisfied: true,
+    })
+  })
+})
diff --git a/packages/devtools/src/tabs/semver-utils.ts b/packages/devtools/src/tabs/semver-utils.ts
new file mode 100644
index 00000000..74db033e
--- /dev/null
+++ b/packages/devtools/src/tabs/semver-utils.ts
@@ -0,0 +1,114 @@
+/**
+ * Simple semver utilities for version comparison
+ * Handles basic semver format: major.minor.patch
+ */
+
+interface ParsedVersion {
+  major: number
+  minor: number
+  patch: number
+  raw: string
+}
+
+/**
+ * Parse a semver string into components
+ */
+export function parseVersion(version: string): ParsedVersion | null {
+  if (!version) return null
+
+  // Remove leading 'v', '^', '~', and any prerelease/build metadata
+  const cleanVersion = version
+    .replace(/^[v^~]/, '')
+    .split('-')[0]
+    ?.split('+')[0]
+
+  if (!cleanVersion) return null
+
+  const parts = cleanVersion.split('.')
+
+  if (parts.length < 2) return null
+
+  const major = parseInt(parts[0] ?? '0', 10)
+  const minor = parseInt(parts[1] ?? '0', 10)
+  const patch = parseInt(parts[2] ?? '0', 10)
+
+  if (isNaN(major) || isNaN(minor) || isNaN(patch)) {
+    return null
+  }
+
+  return {
+    major,
+    minor,
+    patch,
+    raw: version,
+  }
+}
+
+/**
+ * Compare two versions
+ * Returns: -1 if v1 < v2, 0 if equal, 1 if v1 > v2
+ */
+export function compareVersions(v1: ParsedVersion, v2: ParsedVersion): number {
+  if (v1.major !== v2.major) return v1.major - v2.major
+  if (v1.minor !== v2.minor) return v1.minor - v2.minor
+  return v1.patch - v2.patch
+}
+
+/**
+ * Check if a version satisfies a minimum requirement
+ */
+export function satisfiesMinVersion(
+  currentVersion: string,
+  minVersion: string,
+): boolean {
+  const current = parseVersion(currentVersion)
+  const min = parseVersion(minVersion)
+
+  if (!current || !min) return true // If we can't parse, assume it's OK
+
+  return compareVersions(current, min) >= 0
+}
+
+/**
+ * Check if a version is below a maximum requirement
+ */
+export function satisfiesMaxVersion(
+  currentVersion: string,
+  maxVersion: string,
+): boolean {
+  const current = parseVersion(currentVersion)
+  const max = parseVersion(maxVersion)
+
+  if (!current || !max) return true
+
+  return compareVersions(current, max) <= 0
+}
+
+/**
+ * Check if a version satisfies both min and max requirements
+ */
+export function satisfiesVersionRange(
+  currentVersion: string,
+  minVersion?: string,
+  maxVersion?: string,
+): { satisfied: boolean; reason?: string } {
+  if (!minVersion && !maxVersion) {
+    return { satisfied: true }
+  }
+
+  if (minVersion && !satisfiesMinVersion(currentVersion, minVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${minVersion} or higher (current: v${currentVersion})`,
+    }
+  }
+
+  if (maxVersion && !satisfiesMaxVersion(currentVersion, maxVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${maxVersion} or lower (current: v${currentVersion})`,
+    }
+  }
+
+  return { satisfied: true }
+}
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
index f32a40c3..14adad62 100644
--- a/packages/react-devtools/src/devtools.tsx
+++ b/packages/react-devtools/src/devtools.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { TanStackDevtoolsCore } from '@tanstack/devtools'
 import { createPortal } from 'react-dom'
 import type { JSX, ReactElement } from 'react'
@@ -126,53 +126,65 @@ export const TanStackDevtools = ({
     Record<string, JSX.Element>
   >({})
 
+  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
+    () =>
+      plugins?.map((plugin) => {
+        return {
+          ...plugin,
+          name:
+            typeof plugin.name === 'string'
+              ? plugin.name
+              : (e, theme) => {
+                  const id = e.getAttribute('id')!
+                  const target = e.ownerDocument.getElementById(id)
+
+                  if (target) {
+                    setTitleContainers((prev) => ({
+                      ...prev,
+                      [id]: e,
+                    }))
+                  }
+
+                  convertRender(
+                    plugin.name as PluginRender,
+                    setTitleComponents,
+                    e,
+                    theme,
+                  )
+                },
+          render: (e, theme) => {
+            const id = e.getAttribute('id')!
+            const target = e.ownerDocument.getElementById(id)
+
+            if (target) {
+              setPluginContainers((prev) => ({
+                ...prev,
+                [id]: e,
+              }))
+            }
+
+            convertRender(plugin.render, setPluginComponents, e, theme)
+          },
+        }
+      }) ?? [],
+    [plugins],
+  )
+
   const [devtools] = useState(
     () =>
       new TanStackDevtoolsCore({
         config,
         eventBusConfig,
-        plugins: plugins?.map((plugin) => {
-          return {
-            ...plugin,
-            name:
-              typeof plugin.name === 'string'
-                ? plugin.name
-                : (e, theme) => {
-                    const id = e.getAttribute('id')!
-                    const target = e.ownerDocument.getElementById(id)
-
-                    if (target) {
-                      setTitleContainers((prev) => ({
-                        ...prev,
-                        [id]: e,
-                      }))
-                    }
-
-                    convertRender(
-                      plugin.name as PluginRender,
-                      setTitleComponents,
-                      e,
-                      theme,
-                    )
-                  },
-            render: (e, theme) => {
-              const id = e.getAttribute('id')!
-              const target = e.ownerDocument.getElementById(id)
-
-              if (target) {
-                setPluginContainers((prev) => ({
-                  ...prev,
-                  [id]: e,
-                }))
-              }
-
-              convertRender(plugin.render, setPluginComponents, e, theme)
-            },
-          }
-        }),
+        plugins: pluginsMap,
       }),
   )
 
+  useEffect(() => {
+    devtools.setConfig({
+      plugins: pluginsMap,
+    })
+  }, [devtools, pluginsMap])
+
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current)
diff --git a/packages/solid-devtools/src/core.tsx b/packages/solid-devtools/src/core.tsx
index 5f6f906e..5ea3ab86 100644
--- a/packages/solid-devtools/src/core.tsx
+++ b/packages/solid-devtools/src/core.tsx
@@ -1,5 +1,11 @@
 import { TanStackDevtoolsCore } from '@tanstack/devtools'
-import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
 import { Portal } from 'solid-js/web'
 import type { JSX } from 'solid-js'
 import type {
@@ -104,27 +110,42 @@ export default function SolidDevtoolsCore({
   plugins,
   eventBusConfig,
 }: TanStackDevtoolsInit) {
+  // Convert plugins to the format expected by the core
+  const pluginsMap = createMemo<Array<TanStackDevtoolsPlugin> | undefined>(() =>
+    plugins?.map((plugin) => ({
+      ...plugin,
+      name:
+        typeof plugin.name === 'string'
+          ? plugin.name
+          : // The check above confirms that `plugin.name` is of Render type
+            (el, theme) =>
+              convertRender(el, plugin.name as SolidPluginRender, theme),
+      render: (el: HTMLDivElement, theme: 'dark' | 'light') =>
+        convertRender(el, plugin.render, theme),
+    })),
+  )
+
   const [devtools] = createSignal(
     new TanStackDevtoolsCore({
       config,
       eventBusConfig,
-      plugins: plugins?.map((plugin) => ({
-        ...plugin,
-        name:
-          typeof plugin.name === 'string'
-            ? plugin.name
-            : // The check above confirms that `plugin.name` is of Render type
-              (el, theme) =>
-                convertRender(el, plugin.name as SolidPluginRender, theme),
-        render: (el: HTMLDivElement, theme: 'dark' | 'light') =>
-          convertRender(el, plugin.render, theme),
-      })),
+      plugins: pluginsMap(),
     }),
   )
   let devToolRef: HTMLDivElement | undefined
+
   createEffect(() => {
     devtools().setConfig({ config })
   })
+
+  // Update plugins when they change
+  createEffect(() => {
+    const currentPlugins = pluginsMap()
+    if (currentPlugins) {
+      devtools().setConfig({ plugins: currentPlugins })
+    }
+  })
+
   onMount(() => {
     if (devToolRef) {
       devtools().mount(devToolRef)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f9c768e..a4393286 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,6 +88,9 @@ importers:
       '@tanstack/react-devtools':
         specifier: ^0.7.6
         version: link:../../../packages/react-devtools
+      '@tanstack/react-form':
+        specifier: ^1.23.7
+        version: 1.23.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@tanstack/react-query':
         specifier: ^5.90.1
         version: 5.90.1(react@19.1.1)
@@ -116,6 +119,9 @@ importers:
       '@tanstack/devtools-vite':
         specifier: 0.3.6
         version: link:../../../packages/devtools-vite
+      '@tanstack/react-form-devtools':
+        specifier: ^0.1.7
+        version: 0.1.7(csstype@3.1.3)(react@19.1.1)(solid-js@1.9.9)
       '@types/react':
         specifier: ^19.1.13
         version: 19.1.13
@@ -382,6 +388,8 @@ importers:
         specifier: ^4.2.4
         version: 4.2.4
 
+  examples/react/start/generated/prisma: {}
+
   examples/react/time-travel:
     dependencies:
       '@tanstack/devtools-event-client':
@@ -488,6 +496,9 @@ importers:
       '@solid-primitives/resize-observer':
         specifier: ^2.1.3
         version: 2.1.3(solid-js@1.9.9)
+      '@tanstack/devtools-client':
+        specifier: workspace:*
+        version: link:../devtools-client
       '@tanstack/devtools-event-bus':
         specifier: workspace:*
         version: link:../event-bus
@@ -1895,25 +1906,21 @@ packages:
     resolution: {integrity: sha512-GQF/xjGeqt4tYWf9jT1D0GRPrcAjajTB1QpSavUaiT1jDkByuN11WvuWeTfBdPJpYWFxvH887+r+uMEg8zRE4A==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@nx/nx-linux-arm64-musl@21.5.3':
     resolution: {integrity: sha512-C5j2pzfe0zoAJelHXzPdTGeU19VvvHVaoesiKPeH9EvJwLLb9FoeIn+6//x3jDUNUqIHdn4+63kMA6mdBQSpMQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@nx/nx-linux-x64-gnu@21.5.3':
     resolution: {integrity: sha512-HI+tdkvzFcnJQpU9m1FjvlxW7ZsJeF4os8OG4HSLRTQfFT8HCXXzp6b9sojTr+4Nfvp5r3T/J/UJM9tOJXW9Aw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@nx/nx-linux-x64-musl@21.5.3':
     resolution: {integrity: sha512-ntlBqcO9wVajUjYwzBU5ru2iBORttO4nurKvjnpBbyCF1mOjSJ3uFcFMzktbp2cxpRE5JRAadGq9/pZisez1AQ==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@nx/nx-win32-arm64-msvc@21.5.3':
     resolution: {integrity: sha512-VgX1VnKDRgWcjIMJ0V3zZ6OPuYkvA7rzgn8wbZWyBh2/1GFFffypJJsGeXRPCZBFHjF3UFYcwjzCMoStZ35b5g==}
@@ -1991,49 +1998,41 @@ packages:
     resolution: {integrity: sha512-8g2Y72gavZ8fesZD22cKo0Z8g8epynwShu7M+wpAoOq432IGUyUxPUKB2/nvyogPToaAlb1OsRiX/za8W4h8Aw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-arm64-musl@11.8.2':
     resolution: {integrity: sha512-N3BPWnIDRmHn/xPDZGKnzFwWxwH1hvs3aVnw4jvMAYarPNDZfbAY+fjHSIwkypV+ozMoJ5lK5PzRO5BOtEx2oQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-linux-ppc64-gnu@11.8.2':
     resolution: {integrity: sha512-AXW2AyjENmzNuZD3Z2TO1QWoZzfULWR1otDzw/+MAVMRXBy3W50XxDqNAflRiLB4o0aI0oDTwMfeyuhVv9Ur8Q==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-gnu@11.8.2':
     resolution: {integrity: sha512-oX+qxJdqOfrJUkGWmcNpu7wiFs6E7KH6hqUORkMAgl4yW+LZxPTz5P4DHvTqTFMywbs9hXVu2KQrdD8ROrdhMQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-musl@11.8.2':
     resolution: {integrity: sha512-TG7LpxXjqlpD1aWnAXw6vMgY74KNV92exPixzEj4AKm4LdGsfnSWYTTJcTQ7deFMYxvBGrZ+qEy8DjGx+5w9GQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-linux-s390x-gnu@11.8.2':
     resolution: {integrity: sha512-1PpXMq0KMD3CQPn3v/UqU4NM2JFjry+mLIH1d3iNVL2vlwRt9lxRfpXTiyiFJrtroUIyeKhw0QbHbF2UfnZVKQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-gnu@11.8.2':
     resolution: {integrity: sha512-V1iYhEDbjQzj+o7JgTYVllRgNZ56Tjw0rPBWw03KJQ8Nphy00Vf7AySf22vV0K/93V1lPCgOSbI5/iunRnIfAw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-musl@11.8.2':
     resolution: {integrity: sha512-2hYNXEZSUM7qLEk4uuY3GmMqLU+860v+8PzbloVvRRjTWtHsLZyB5w+5p2gel38eaTcSYfZ2zvp3xcSpKDAbaw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-wasm32-wasi@11.8.2':
     resolution: {integrity: sha512-TjFqB+1siSqhd+S64Hf2qbxqWqtFIlld4DDEVotxOjj5//rX/6uwAL1HWnUHSNIni+wpcyQoXPhO3fBgppCvuA==}
@@ -2084,42 +2083,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.3.0':
     resolution: {integrity: sha512-ejBAX8H0ZGsD8lSICDNyMbSEtPMWgDL0WFCt/0z7hyf5v8Imz4rAM8xY379mBsECkq/Wdqa5WEDLqtjZ+6NxfA==}
@@ -2250,25 +2243,21 @@ packages:
     resolution: {integrity: sha512-hRZygRlaGCjcNTNY9GV7dDI18sG1dK3cc7ujHq72LoDad23zFDUGMQjiSxHWK+/r92iMV+j2MiHbvzayxqynsg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.32':
     resolution: {integrity: sha512-HzgT6h+CXLs+GKAU0Wvkt3rvcv0CmDBsDjlPhh4GHysOKbG9NjpKYX2zvjx671E9pGbTvcPpwy7gGsy7xpu+8g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.32':
     resolution: {integrity: sha512-Ab/wbf6gdzphDbsg51UaxsC93foQ7wxhtg0SVCXd25BrV4MAJ1HoDtKN/f4h0maFmJobkqYub2DlmoasUzkvBg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.32':
     resolution: {integrity: sha512-VoxqGEfh5A1Yx+zBp/FR5QwAbtzbuvky2SVc+ii4g1gLD4zww6mt/hPi5zG+b88zYPFBKHpxMtsz9cWqXU5V5Q==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.32':
     resolution: {integrity: sha512-qZ1ViyOUDGbiZrSAJ/FIAhYUElDfVxxFW6DLT/w4KeoZN3HsF4jmRP95mXtl51/oGrqzU9l9Q2f7/P4O/o2ZZA==}
@@ -2407,67 +2396,56 @@ packages:
     resolution: {integrity: sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.46.2':
     resolution: {integrity: sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.46.2':
     resolution: {integrity: sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.46.2':
     resolution: {integrity: sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
     resolution: {integrity: sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.46.2':
     resolution: {integrity: sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.46.2':
     resolution: {integrity: sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.46.2':
     resolution: {integrity: sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.46.2':
     resolution: {integrity: sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.46.2':
     resolution: {integrity: sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.46.2':
     resolution: {integrity: sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.46.2':
     resolution: {integrity: sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==}
@@ -2694,28 +2672,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
     resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
     resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.13':
     resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.13':
     resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
@@ -2754,6 +2728,16 @@ packages:
     resolution: {integrity: sha512-CWVv5kK7QdfnrAyvUo31spmqZjn+zpxKRqsyJDhGY7I4QweJeCbRJrlhzH3trv18ZyW3thRvtiHWfX1MdUr2VA==}
     engines: {node: '>=18'}
 
+  '@tanstack/devtools-event-client@0.3.3':
+    resolution: {integrity: sha512-RfV+OPV/M3CGryYqTue684u10jUt55PEqeBOnOtCe6tAmHI9Iqyc8nHeDhWPEV9715gShuauFVaMc9RiUVNdwg==}
+    engines: {node: '>=18'}
+
+  '@tanstack/devtools-ui@0.3.5':
+    resolution: {integrity: sha512-DU8OfLntngnph+Tb7ivQvh4F4w+rDu6r01fXlhjq/Nmgdr0gtsOox4kdmyq5rCs+C6aPgP3M7+BE+fv4dN+VvA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      solid-js: '>=1.9.7'
+
   '@tanstack/directive-functions-plugin@1.121.21':
     resolution: {integrity: sha512-B9z/HbF7gJBaRHieyX7f2uQ4LpLLAVAEutBZipH6w+CYD6RHRJvSVPzECGHF7icFhNWTiJQL2QR6K07s59yzEw==}
     engines: {node: '>=12'}
@@ -2770,6 +2754,14 @@ packages:
     resolution: {integrity: sha512-2g+PuGR3GuvvCiR3xZs+IMqAvnYU9bvH+jRml0BFBSxHBj22xFCTNvJWhvgj7uICFF9IchDkFUto91xDPMu5cg==}
     engines: {node: '>=18'}
 
+  '@tanstack/form-core@1.24.3':
+    resolution: {integrity: sha512-e+HzSD49NWr4aIqJWtPPzmi+/phBJAP3nSPN8dvxwmJWqAxuB/cH138EcmCFf3+oA7j3BXvwvTY0I+8UweGPjQ==}
+
+  '@tanstack/form-devtools@0.1.7':
+    resolution: {integrity: sha512-bXgZEnKMEKwf3v0SZz63HKiH6C8UUazFsy5O/GI6xGhYR/2TlQiAyJB9NuY3gFo1J5CRBh93m2ekH4S5D/6Ulg==}
+    peerDependencies:
+      solid-js: '>=1.9.9'
+
   '@tanstack/history@1.131.2':
     resolution: {integrity: sha512-cs1WKawpXIe+vSTeiZUuSBy8JFjEuDgdMKZFRLKwQysKo8y2q6Q1HvS74Yw+m5IhOW1nTZooa6rlgdfXcgFAaw==}
     engines: {node: '>=12'}
@@ -2788,6 +2780,20 @@ packages:
   '@tanstack/query-devtools@5.90.1':
     resolution: {integrity: sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==}
 
+  '@tanstack/react-form-devtools@0.1.7':
+    resolution: {integrity: sha512-9Wh1+WyQ6QeQUeMnkYwnTyIa9mDnyuyGiUF93tCkvEgDbSkmKQ/4x8nvh2/CLREw9ZDxsQomgZSUqVX1FeoYrA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/react-form@1.23.7':
+    resolution: {integrity: sha512-p/j9Gi2+s135sOjj48RjM+6xZQr1FVpliQlETLYBEGmmmxWHgYYs2b62mTDSnuv7AqtuZhpQ+t0CRFVfbQLsFA==}
+    peerDependencies:
+      '@tanstack/react-start': ^1.130.10
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+
   '@tanstack/react-query-devtools@5.90.1':
     resolution: {integrity: sha512-otOjczcUft13RZlWi8JHIWei1MLuRf0AK+hyEEAm0/IqKUbs/0ZXj0wlc+P1XdE0nYcOMuHK69496FvP/9g3LQ==}
     peerDependencies:
@@ -2859,6 +2865,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-store@0.7.7':
+    resolution: {integrity: sha512-qqT0ufegFRDGSof9D/VqaZgjNgp4tRPHZIJq2+QIHkMUtHjaJ0lYrrXjeIUJvjnTbgPfSD1XgOMEt0lmANn6Zg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/router-core@1.131.50':
     resolution: {integrity: sha512-eojd4JZ5ziUhGEmXZ4CaVX5mQdiTMiz56Sp8ZQ6r7deb55Q+5G4JQDkeuXpI7HMAvzr+4qlsFeLaDRXXjXyOqQ==}
     engines: {node: '>=12'}
@@ -2998,6 +3010,9 @@ packages:
   '@tanstack/store@0.7.2':
     resolution: {integrity: sha512-RP80Z30BYiPX2Pyo0Nyw4s1SJFH2jyM6f9i3HfX4pA+gm5jsnYryscdq2aIQLnL4TaGuQMO+zXmN9nh1Qck+Pg==}
 
+  '@tanstack/store@0.7.7':
+    resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
+
   '@tanstack/typedoc-config@0.2.1':
     resolution: {integrity: sha512-3miLBNiyWX54bQKBNnh7Fj6otWX8ZDiU6/ffOsNnikwBdKjFkA7ddrBtC5/JQkLCE6CBIqcJvtNIwI+DZu4y1Q==}
     engines: {node: '>=18'}
@@ -3250,49 +3265,41 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4027,6 +4034,9 @@ packages:
   dax-sh@0.43.2:
     resolution: {integrity: sha512-uULa1sSIHgXKGCqJ/pA0zsnzbHlVnuq7g8O2fkHokWFNwEGIhh5lAJlxZa1POG5En5ba7AU4KcBAvGQWMMf8rg==}
 
+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+
   db0@0.3.2:
     resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
     peerDependencies:
@@ -4084,6 +4094,9 @@ packages:
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
+  decode-formdata@0.9.0:
+    resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -4200,6 +4213,9 @@ packages:
     peerDependencies:
       typescript: ^5.4.4
 
+  devalue@5.4.1:
+    resolution: {integrity: sha512-YtoaOfsqjbZQKGIMRYDWKjUmSB4VJ/RElB+bXZawQAQYAo4xu08GKTMVlsZDTF6R2MbAgjcAQRPI5eIyRAT2OQ==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -5469,28 +5485,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -9871,6 +9883,16 @@ snapshots:
       - typescript
       - vite
 
+  '@tanstack/devtools-event-client@0.3.3': {}
+
+  '@tanstack/devtools-ui@0.3.5(csstype@3.1.3)(solid-js@1.9.9)':
+    dependencies:
+      clsx: 2.1.1
+      goober: 2.1.16(csstype@3.1.3)
+      solid-js: 1.9.9
+    transitivePeerDependencies:
+      - csstype
+
   '@tanstack/directive-functions-plugin@1.121.21(vite@7.1.7(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -9913,6 +9935,22 @@ snapshots:
       - supports-color
       - typescript
 
+  '@tanstack/form-core@1.24.3':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.3.3
+      '@tanstack/store': 0.7.7
+
+  '@tanstack/form-devtools@0.1.7(csstype@3.1.3)(solid-js@1.9.9)':
+    dependencies:
+      '@tanstack/devtools-ui': 0.3.5(csstype@3.1.3)(solid-js@1.9.9)
+      '@tanstack/form-core': 1.24.3
+      clsx: 2.1.1
+      dayjs: 1.11.18
+      goober: 2.1.16(csstype@3.1.3)
+      solid-js: 1.9.9
+    transitivePeerDependencies:
+      - csstype
+
   '@tanstack/history@1.131.2': {}
 
   '@tanstack/history@1.132.0-alpha.1': {}
@@ -9930,6 +9968,24 @@ snapshots:
 
   '@tanstack/query-devtools@5.90.1': {}
 
+  '@tanstack/react-form-devtools@0.1.7(csstype@3.1.3)(react@19.1.1)(solid-js@1.9.9)':
+    dependencies:
+      '@tanstack/form-devtools': 0.1.7(csstype@3.1.3)(solid-js@1.9.9)
+      react: 19.1.1
+    transitivePeerDependencies:
+      - csstype
+      - solid-js
+
+  '@tanstack/react-form@1.23.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/form-core': 1.24.3
+      '@tanstack/react-store': 0.7.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      decode-formdata: 0.9.0
+      devalue: 5.4.1
+      react: 19.1.1
+    transitivePeerDependencies:
+      - react-dom
+
   '@tanstack/react-query-devtools@5.90.1(@tanstack/react-query@5.90.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@tanstack/query-devtools': 5.90.1
@@ -10031,6 +10087,13 @@ snapshots:
       react-dom: 19.1.1(react@19.1.1)
       use-sync-external-store: 1.5.0(react@19.1.1)
 
+  '@tanstack/react-store@0.7.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/store': 0.7.7
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      use-sync-external-store: 1.5.0(react@19.1.1)
+
   '@tanstack/router-core@1.131.50':
     dependencies:
       '@tanstack/history': 1.131.2
@@ -10289,6 +10352,8 @@ snapshots:
 
   '@tanstack/store@0.7.2': {}
 
+  '@tanstack/store@0.7.7': {}
+
   '@tanstack/typedoc-config@0.2.1(typescript@5.9.2)':
     dependencies:
       typedoc: 0.27.9(typescript@5.9.2)
@@ -11457,6 +11522,8 @@ snapshots:
       '@deno/shim-deno': 0.19.2
       undici-types: 5.28.4
 
+  dayjs@1.11.18: {}
+
   db0@0.3.2(drizzle-orm@0.44.5(@opentelemetry/api@1.9.0)(@prisma/client@6.16.2(prisma@6.16.2(magicast@0.3.5)(typescript@5.9.2))(typescript@5.9.2))(pg@8.16.3)(prisma@6.16.2(magicast@0.3.5)(typescript@5.9.2))):
     optionalDependencies:
       drizzle-orm: 0.44.5(@opentelemetry/api@1.9.0)(@prisma/client@6.16.2(prisma@6.16.2(magicast@0.3.5)(typescript@5.9.2))(typescript@5.9.2))(pg@8.16.3)(prisma@6.16.2(magicast@0.3.5)(typescript@5.9.2))
@@ -11482,6 +11549,8 @@ snapshots:
 
   decimal.js@10.5.0: {}
 
+  decode-formdata@0.9.0: {}
+
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
@@ -11581,6 +11650,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  devalue@5.4.1: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3