diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index ee6dd551ad..44fa2d0b76 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -187,6 +187,13 @@ const additionalResources = [
     icon: 'integrations',
     href: '/guides/integrations',
   },
+  {
+    title: 'Supabase UI',
+    description: 'A collection of pre-built Supabase components to speed up your project.',
+    icon: 'ui',
+    href: 'https://supabase.com/ui',
+    external: true,
+  },
 ]
 
 const HomePage = () => (
@@ -303,6 +310,7 @@ const HomePage = () => (
                   href={resource.href}
                   className="col-span-12 md:col-span-6 lg:col-span-3"
                   passHref
+                  target={resource.external ? '_blank' : undefined}
                 >
                   <GlassPanelWithIconPicker {...resource} background={false}>
                     {resource.description}
diff --git a/apps/docs/components/Navigation/Navigation.commands.tsx b/apps/docs/components/Navigation/Navigation.commands.tsx
index 2ab00c9e48..2a97ee8fc8 100644
--- a/apps/docs/components/Navigation/Navigation.commands.tsx
+++ b/apps/docs/components/Navigation/Navigation.commands.tsx
@@ -151,6 +151,12 @@ const navCommands = [
     icon: () => <ArrowRight />,
     enabled: isFeatureEnabled('integrations:partners'),
   },
+  {
+    id: 'nav-ui',
+    name: 'Go to Supabase UI Library',
+    route: 'https://supabase.com/ui',
+    icon: () => <ArrowRight />,
+  },
 ] satisfies Array<ICommand & { enabled?: boolean }>
 
 const filteredNavCommands = navCommands.filter((command) => command.enabled !== false)
diff --git a/apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx b/apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx
index 2594209642..2a17390edf 100644
--- a/apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx
@@ -30,6 +30,7 @@ import {
   IconSecurity,
   IconSupport,
   IconTroubleshooting,
+  IconUI,
 } from './MenuIcons'
 
 function getMenuIcon(menuKey: string, width: number = 16, height: number = 16, className?: string) {
@@ -102,6 +103,8 @@ function getMenuIcon(menuKey: string, width: number = 16, height: number = 16, c
       return <Clock width={width} height={height} className={className} />
     case 'queues':
       return <SquareStack width={width} height={height} className={className} />
+    case 'ui':
+      return <IconUI width={width} height={height} className={className} />
     default:
       return <IconMenuPlatform width={width} height={height} className={className} />
   }
diff --git a/apps/docs/components/Navigation/NavigationMenu/MenuIcons.tsx b/apps/docs/components/Navigation/NavigationMenu/MenuIcons.tsx
index 1eaed4adbe..7306d2c55a 100644
--- a/apps/docs/components/Navigation/NavigationMenu/MenuIcons.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/MenuIcons.tsx
@@ -666,3 +666,31 @@ export function IconTroubleshooting({ width = 16, height = 16, className }: Home
     </svg>
   )
 }
+
+export function IconUI({ width = 16, height = 16, className }: HomeMenuIcon) {
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={height}
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.973313"
+        y="0.64"
+        width="14.72"
+        height="14.72"
+        rx="1.92"
+        stroke="currentColor"
+        stroke-width="1.28"
+      />
+      <path
+        d="M8.56519 4.69238H9.74564V8.94966C9.74564 9.41632 9.63534 9.82678 9.41473 10.181C9.19625 10.5353 8.88867 10.8121 8.492 11.0115C8.09534 11.2087 7.63185 11.3074 7.10155 11.3074C6.56913 11.3074 6.10458 11.2087 5.70791 11.0115C5.31125 10.8121 5.00367 10.5353 4.78519 10.181C4.5667 9.82678 4.45746 9.41632 4.45746 8.94966V4.69238H5.63791V8.85102C5.63791 9.12253 5.69731 9.36435 5.81609 9.57647C5.937 9.7886 6.1067 9.95511 6.32519 10.076C6.54367 10.1948 6.80246 10.2542 7.10155 10.2542C7.40064 10.2542 7.65943 10.1948 7.87791 10.076C8.09852 9.95511 8.26822 9.7886 8.387 9.57647C8.50579 9.36435 8.56519 9.12253 8.56519 8.85102V4.69238Z"
+        fill="currentColor"
+      />
+      <path d="M12.2092 4.69238V11.2087H11.0287V4.69238H12.2092Z" fill="currentColor" />
+    </svg>
+  )
+}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 25b3102707..2612788b20 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -261,6 +261,12 @@ export const GLOBAL_MENU_ITEMS: GlobalMenuItems = [
             href: '/reference/api/introduction' as `/${string}`,
             level: 'reference_javascript',
           },
+          {
+            label: 'UI Library',
+            icon: 'ui',
+            href: 'https://supabase.com/ui' as `/${string}`,
+            level: 'ui',
+          },
         ],
         [
           { label: 'Data API' },