From 06017fb365d830bb60eb764f5754f66b5c7ff1e8 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Mon, 3 Aug 2026 11:46:04 +0200
Subject: [PATCH] docs: add README header banners to the framework adapter
 packages

---
 packages/preact-devtools/README.md | 17 +++++++++++++++++
 packages/react-devtools/README.md  | 17 +++++++++++++++++
 packages/solid-devtools/README.md  | 17 +++++++++++++++++
 packages/vue-devtools/README.md    | 17 +++++++++++++++++
 4 files changed, 68 insertions(+)

diff --git a/packages/preact-devtools/README.md b/packages/preact-devtools/README.md
index ed6e33d8..c0ea4a62 100644
--- a/packages/preact-devtools/README.md
+++ b/packages/preact-devtools/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=preact"
+      alt="TanStack Preact Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/preact-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index 909aeda7..a2cb3ea1 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=react"
+      alt="TanStack React Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/react-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.
diff --git a/packages/solid-devtools/README.md b/packages/solid-devtools/README.md
index 6dd1e977..19cd8d22 100644
--- a/packages/solid-devtools/README.md
+++ b/packages/solid-devtools/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=solid"
+      alt="TanStack Solid Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/solid-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.
diff --git a/packages/vue-devtools/README.md b/packages/vue-devtools/README.md
index 32aa525a..9e4d923c 100644
--- a/packages/vue-devtools/README.md
+++ b/packages/vue-devtools/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=vue"
+      alt="TanStack Vue Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/vue-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.