diff --git a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
index fdc36ef8c..df59bfaf6 100644
--- a/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
+++ b/docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
@@ -24,6 +24,7 @@ import logoRemix from './images/remix.svg'
 import logoSvelte from './images/svelte.svg'
 import logoLaravel from './images/laravel.svg'
 import logoEmber from './images/ember.svg'
+import logoPreact from './images/preact.svg'
 
 /**
  * The frameworks and tools to display in this section.
@@ -71,6 +72,13 @@ const frameworks: Framework[] = [
     url: 'https://svelte.dev/',
     visible: ref(false),
   },
+  {
+    name: 'Preact',
+    logo: logoPreact,
+    color: '#673ab8',
+    url: 'https://preactjs.com/',
+    visible: ref(false),
+  },
   {
     name: 'Astro',
     logo: logoAstro,
diff --git a/docs/.vitepress/theme/components/landing/3. frameworks-section/images/preact.svg b/docs/.vitepress/theme/components/landing/3. frameworks-section/images/preact.svg
new file mode 100644
index 000000000..246a3b228
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/3. frameworks-section/images/preact.svg	
@@ -0,0 +1,6 @@
+<svg width="100%" height="100%" viewBox="-256 -256 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+  <path d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z" fill="#673ab8"/>
+  <ellipse cx="0" cy="0" stroke-width="16px" rx="75px" ry="196px" fill="none" stroke="white" transform="rotate(52.5)"/>
+  <ellipse cx="0" cy="0" stroke-width="16px" rx="75px" ry="196px" fill="none" stroke="white" transform="rotate(-52.5)"/>
+  <circle cx="0" cy="0" r="34" fill="white"/>
+</svg>