From ee8eae7309d07841096d8ff66d00a72580282942 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Mon, 30 Mar 2026 10:58:37 +0200
Subject: [PATCH] chore: Clean the `ui` package from `next` imports (#44278)

This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.

`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.

The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
---
 apps/design-system/app/SonnerToast.tsx        | 10 ---
 apps/design-system/app/layout.tsx             |  4 +-
 apps/design-system/app/toaster.tsx            | 18 +++++
 .../default/example/mermaid-basic.tsx         |  2 +-
 .../registry/default/example/mermaid-demo.tsx |  2 +-
 .../default/example/mermaid-er-diagram.tsx    |  2 +-
 .../default/example/mermaid-er-simple.tsx     |  2 +-
 .../example/mermaid-flowchart-subgraph.tsx    |  2 +-
 .../default/example/mermaid-flowchart.tsx     |  2 +-
 .../default/example/mermaid-oauth-flow.tsx    |  2 +-
 .../default/example/mermaid-sequence-api.tsx  |  2 +-
 .../example/mermaid-sequence-async.tsx        |  2 +-
 .../default/example/mermaid-sequence-sync.tsx |  2 +-
 apps/design-system/types/assets.d.ts          |  5 ++
 .../deployment/terraform/reference/page.tsx   | 18 ++---
 .../local-development/cli/config/page.tsx     |  8 +--
 apps/docs/app/page.tsx                        | 17 ++---
 .../components/JwtGenerator/JwtGenerator.tsx  |  3 +-
 .../JwtGenerator/JwtGeneratorSimple.tsx       |  3 +-
 apps/docs/features/app.providers.tsx          | 13 ++--
 apps/docs/features/toaster.tsx                |  9 +++
 apps/learn/app/SonnerToast.tsx                |  9 ---
 apps/learn/app/layout.tsx                     |  8 ++-
 apps/learn/app/toaster.tsx                    | 18 +++++
 apps/learn/types/assets.d.ts                  |  4 ++
 .../grid/components/header/ExportDialog.tsx   |  5 +-
 .../Auth/Overview/OverviewLearnMore.tsx       | 12 ++--
 .../PolicyEditorPanel/PolicyTemplates.tsx     | 12 ++--
 .../interfaces/Auth/Users/UserPanel.tsx       | 10 +--
 .../interfaces/Connect/Connect.constants.ts   |  2 +-
 .../interfaces/Connect/ConnectTabContent.tsx  | 21 +++---
 .../interfaces/Connect/ConnectionPanel.tsx    | 13 ++--
 .../Connect/DatabaseConnectionString.tsx      |  2 +-
 .../androidkotlin/supabasekt/content.tsx      | 12 ++--
 .../content/astro/supabasejs/content.tsx      |  9 +--
 .../Connect/content/drizzle/content.tsx       |  8 +--
 .../exporeactnative/supabasejs/content.tsx    |  8 +--
 .../content/flask/supabasepy/content.tsx      | 12 ++--
 .../flutter/supabaseflutter/content.tsx       | 12 ++--
 .../ionicangular/supabasejs/content.tsx       | 12 ++--
 .../content/ionicreact/supabasejs/content.tsx | 12 ++--
 .../content/nextjs/app/supabasejs/content.tsx |  6 +-
 .../nextjs/pages/supabasejs/content.tsx       |  7 +-
 .../content/nuxt/supabasejs/content.tsx       |  8 +--
 .../Connect/content/prisma/content.tsx        |  8 +--
 .../create-react-app/supabasejs/content.tsx   |  8 +--
 .../content/react/vite/supabasejs/content.tsx |  8 +--
 .../content/refine/supabasejs/content.tsx     |  8 +--
 .../content/remix/supabasejs/content.tsx      | 12 ++--
 .../content/solidjs/supabasejs/content.tsx    |  8 +--
 .../content/sveltekit/supabasejs/content.tsx  | 12 ++--
 .../content/swift/supabaseswift/content.tsx   | 10 +--
 .../content/tanstack/supabasejs/content.tsx   | 12 ++--
 .../content/vuejs/supabasejs/content.tsx      |  8 +--
 .../ConnectSheet/Connect.constants.ts         |  2 +-
 .../steps/direct-connection/content.tsx       |  2 +-
 .../content/steps/direct-files/content.tsx    |  2 +-
 .../content/steps/direct-install/content.tsx  |  2 +-
 .../mcp/claude-code/add-server/content.tsx    |  2 +-
 .../mcp/claude-code/authenticate/content.tsx  |  2 +-
 .../steps/mcp/codex/add-server/content.tsx    |  2 +-
 .../steps/mcp/codex/authenticate/content.tsx  |  2 +-
 .../steps/mcp/codex/enable-remote/content.tsx |  2 +-
 .../content/steps/orm-install/content.tsx     |  2 +-
 .../Replication/ErrorDetailsDialog.tsx        |  2 +-
 .../interfaces/Docs/CodeSnippet.tsx           |  2 +-
 .../EdgeFunctionDetails.tsx                   |  3 +-
 .../EdgeFunctionTesterSheet.tsx               |  2 +-
 .../Functions/FunctionsEmptyState.tsx         |  2 +-
 .../Integrations/CronJobs/CronJobPage.tsx     |  2 +-
 .../CronJobs/CronJobTableCell.tsx             |  2 +-
 .../CronJobs/CronJobsTab.CleanupNotice.tsx    |  2 +-
 .../Integrations/CronJobs/PreviousRunsTab.tsx |  3 +-
 .../InstallIntegrationSheet.tsx               |  2 +-
 .../ProjectAPIDocs/ContentSnippet.tsx         |  8 +--
 .../ProjectAPIDocs/ResourceContent.tsx        |  9 +--
 .../GettingStarted/GettingStarted.utils.tsx   |  3 +-
 .../hooks/useQueryInsightsTableColumns.tsx    |  8 +--
 .../IndexAdvisor/IndexSuggestionIcon.tsx      | 12 ++--
 .../QueryPerformance/QueryIndexes.tsx         |  2 +-
 .../QueryPerformance/QueryPerformanceGrid.tsx |  2 +-
 .../SQLEditor/DownloadSnippetModal.tsx        | 11 +--
 .../SQLEditor/OngoingQueriesPanel.tsx         | 13 ++--
 .../Settings/API/HardenAPIModal.tsx           | 11 ++-
 .../interfaces/Settings/Logs/LogSelection.tsx | 14 ++--
 .../DefaultErrorRenderer.tsx                  |  3 +-
 .../CreateTable/CreateTableInstructions.tsx   |  8 +--
 .../NamespaceWithTables/InsertDataDialog.tsx  |  2 +-
 .../VectorBucketTableExamplesSheet.tsx        |  8 +--
 .../ViewEntityAutofixSecurityModal.tsx        | 17 ++---
 .../UnifiedLogs/ServiceFlowPanel.tsx          |  2 +-
 .../LayoutHeader/LocalVersionPopover.tsx      | 14 ++--
 .../SQLEditorLayout/SqlEditor.Commands.tsx    |  2 +-
 .../AIAssistantPanel/CollapsibleCodeBlock.tsx |  4 +-
 .../ui/AIAssistantPanel/MessageMarkdown.tsx   |  5 +-
 .../ui/AIAssistantPanel/SnippetRow.tsx        |  7 +-
 .../EdgeFunctionBlock/EdgeFunctionBlock.tsx   |  8 +--
 .../components/ui/EditorPanel/EditorPanel.tsx |  4 +-
 .../components/ui/QueryBlock/QueryBlock.tsx   |  3 +-
 apps/studio/lib/toaster.tsx                   |  9 +++
 apps/studio/pages/_app.tsx                    | 44 ++++++------
 apps/ui-library/app/SonnerToast.tsx           | 10 ---
 apps/ui-library/app/layout.tsx                |  4 +-
 apps/ui-library/app/toaster.tsx               | 18 +++++
 .../ui-library/components/block-item-code.tsx |  3 +-
 apps/www/app/providers.tsx                    | 10 +--
 apps/www/app/toaster.tsx                      |  9 +++
 apps/www/components/Enterprise/Security.tsx   |  8 +--
 apps/www/components/Enterprise/UseCases.tsx   | 15 ++---
 apps/www/components/EventCallout.tsx          | 10 +--
 .../LaunchWeek/11/HackathonCallout.tsx        |  3 +-
 .../LaunchWeek/12/HackathonCallout.tsx        |  3 +-
 .../components/LaunchWeek/X/LWXMeetups.tsx    |  6 +-
 .../LaunchWeek/X/Releases/MainStage.tsx       |  6 +-
 .../Modules/Cron/CronSQLSection.tsx           |  8 +--
 .../Modules/Queues/QueuesAPISection.tsx       |  7 +-
 .../Modules/Queues/QueuesSQLSection.tsx       |  7 +-
 apps/www/components/Nav/MobileMenu.tsx        | 11 +--
 apps/www/components/Nav/ProductDropdown.tsx   | 19 +++---
 apps/www/components/NewFeatureCard.tsx        |  6 +-
 .../components/Realtime/example-layout.tsx    |  9 ++-
 .../Sections/ImageParagraphSection.tsx        |  5 +-
 apps/www/components/Solutions/CTAForm.tsx     |  8 ++-
 apps/www/components/Solutions/CtaSection.tsx  |  5 +-
 .../Solutions/DeveloperExperienceSection.tsx  |  7 +-
 .../Solutions/TwoColumnsSection.tsx           | 10 +--
 apps/www/components/Supasquad/CtaSection.tsx  |  5 +-
 apps/www/data/aws-reinvent-2025.tsx           | 10 +--
 .../open-source/contributing/supasquad.tsx    |  2 +-
 apps/www/data/products/modules/cron.tsx       |  5 +-
 apps/www/data/products/modules/queues.tsx     |  5 +-
 apps/www/data/solutions/agencies.tsx          | 30 ++++-----
 apps/www/data/solutions/agents.tsx            | 22 +++---
 apps/www/data/solutions/ai-builders.tsx       |  4 +-
 apps/www/data/solutions/b2b-saas.tsx          | 25 +++----
 apps/www/data/solutions/beginners.tsx         | 23 +++----
 apps/www/data/solutions/developers.tsx        | 37 +++++-----
 apps/www/data/solutions/finserv.tsx           | 24 +++----
 apps/www/data/solutions/firebase.tsx          | 33 ++++-----
 apps/www/data/solutions/hackathon.tsx         | 52 ++++----------
 apps/www/data/solutions/healthcare.tsx        | 22 +++---
 apps/www/data/solutions/innovation-teams.tsx  | 28 +++-----
 apps/www/data/solutions/neon.tsx              | 33 ++++-----
 apps/www/data/solutions/no-code.tsx           | 18 +++--
 .../data/solutions/postgres-developers.tsx    | 39 +++++------
 apps/www/data/solutions/startups.tsx          | 37 +++++-----
 apps/www/data/solutions/vibe-coders.tsx       | 18 ++---
 apps/www/lib/mdx/mdxComponents.tsx            |  9 ++-
 apps/www/pages/_app.tsx                       |  9 +--
 apps/www/pages/auth.tsx                       | 26 +++----
 apps/www/pages/database.tsx                   | 29 ++++----
 apps/www/pages/events/[slug].tsx              | 39 +++++------
 apps/www/pages/features/[slug].tsx            | 18 ++---
 apps/www/pages/partners/index.tsx             | 20 +++---
 apps/www/pages/storage.tsx                    | 28 ++++----
 packages/ui-patterns/index.tsx                |  5 --
 packages/ui-patterns/package.json             | 61 +++++++++++++++++
 .../src/Banners}/Announcement.tsx             |  7 +-
 .../src/Banners/AnnouncementBanner.tsx        |  3 +-
 .../src}/CodeBlock/CodeBlock.tsx              |  4 +-
 .../src}/CodeBlock/CodeBlock.utils.ts         |  0
 .../src}/CodeBlock/index.tsx                  |  0
 .../prepackaged/DocsAi/DocsAiPage.tsx         |  2 +-
 .../src}/Image/Image.tsx                      |  6 +-
 .../src}/Image/ZoomContent.tsx                |  0
 packages/ui-patterns/src/Image/index.tsx      |  1 +
 .../src}/Markdown/index.tsx                   |  5 +-
 .../src/McpUrlBuilder/McpConfigPanel.tsx      |  3 +-
 .../components/McpConfigurationDisplay.tsx    |  2 +-
 .../src/McpUrlBuilder/constants.tsx           |  2 +-
 .../src}/Mermaid/Mermaid.tsx                  |  3 +-
 .../src}/Mermaid/index.tsx                    |  0
 .../src/MultipleCodeBlock/index.tsx           | 11 +--
 .../src}/SimpleCodeBlock/SimpleCodeBlock.tsx  |  4 +-
 .../src}/SimpleCodeBlock/index.tsx            |  0
 .../src}/SimpleCodeBlock/prism.ts             |  0
 .../ui-patterns/src/SqlToRest/sql-to-rest.tsx |  4 +-
 .../src/TextLink/index.tsx}                   |  7 +-
 packages/ui/index.tsx                         | 17 +----
 packages/ui/package.json                      | 11 ---
 .../ui/src/components/Button/Button.test.tsx  | 11 ---
 packages/ui/src/components/Image/index.tsx    |  1 -
 .../src/components/NavMenu/nav-menu.test.tsx  |  3 +-
 packages/ui/src/components/TextLink/index.ts  |  1 -
 .../ui/src/components/shadcn/ui/sonner.tsx    |  6 +-
 packages/ui/src/layout/banners/index.tsx      |  1 -
 pnpm-lock.yaml                                | 67 ++++++-------------
 187 files changed, 912 insertions(+), 912 deletions(-)
 delete mode 100644 apps/design-system/app/SonnerToast.tsx
 create mode 100644 apps/design-system/app/toaster.tsx
 create mode 100644 apps/docs/features/toaster.tsx
 delete mode 100644 apps/learn/app/SonnerToast.tsx
 create mode 100644 apps/learn/app/toaster.tsx
 create mode 100644 apps/learn/types/assets.d.ts
 create mode 100644 apps/studio/lib/toaster.tsx
 delete mode 100644 apps/ui-library/app/SonnerToast.tsx
 create mode 100644 apps/ui-library/app/toaster.tsx
 create mode 100644 apps/www/app/toaster.tsx
 rename packages/{ui/src/layout/banners => ui-patterns/src/Banners}/Announcement.tsx (95%)
 rename packages/{ui/src/components => ui-patterns/src}/CodeBlock/CodeBlock.tsx (98%)
 rename packages/{ui/src/components => ui-patterns/src}/CodeBlock/CodeBlock.utils.ts (100%)
 rename packages/{ui/src/components => ui-patterns/src}/CodeBlock/index.tsx (100%)
 rename packages/{ui/src/components => ui-patterns/src}/Image/Image.tsx (95%)
 rename packages/{ui/src/components => ui-patterns/src}/Image/ZoomContent.tsx (100%)
 create mode 100644 packages/ui-patterns/src/Image/index.tsx
 rename packages/{ui/src/lib => ui-patterns/src}/Markdown/index.tsx (84%)
 rename packages/{ui/src/components => ui-patterns/src}/Mermaid/Mermaid.tsx (99%)
 rename packages/{ui/src/components => ui-patterns/src}/Mermaid/index.tsx (100%)
 rename packages/{ui/src/components => ui-patterns/src}/SimpleCodeBlock/SimpleCodeBlock.tsx (96%)
 rename packages/{ui/src/components => ui-patterns/src}/SimpleCodeBlock/index.tsx (100%)
 rename packages/{ui/src/components => ui-patterns/src}/SimpleCodeBlock/prism.ts (100%)
 rename packages/{ui/src/components/TextLink/TextLink.tsx => ui-patterns/src/TextLink/index.tsx} (94%)
 delete mode 100644 packages/ui/src/components/Image/index.tsx
 delete mode 100644 packages/ui/src/components/TextLink/index.ts
 delete mode 100644 packages/ui/src/layout/banners/index.tsx

diff --git a/apps/design-system/app/SonnerToast.tsx b/apps/design-system/app/SonnerToast.tsx
deleted file mode 100644
index 28a013f1dbc..00000000000
--- a/apps/design-system/app/SonnerToast.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client'
-
-import { SonnerToaster as Toaster } from 'ui'
-
-import { useConfig } from '@/hooks/use-config'
-
-export function SonnerToaster() {
-  const [config] = useConfig()
-  return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
-}
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index 55f6ec8893f..e6c4f02ef17 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -5,7 +5,7 @@ import type { Metadata, Viewport } from 'next'
 
 import { customFont, sourceCodePro } from './fonts'
 import { ThemeProvider } from './Providers'
-import { SonnerToaster } from './SonnerToast'
+import { Toaster } from './toaster'
 
 const className = `${customFont.variable} ${sourceCodePro.variable}`
 
@@ -139,7 +139,7 @@ export default async function Layout({ children }: RootLayoutProps) {
           <div vaul-drawer-wrapper="">
             <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
           </div>
-          <SonnerToaster />
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>
diff --git a/apps/design-system/app/toaster.tsx b/apps/design-system/app/toaster.tsx
new file mode 100644
index 00000000000..0fac1f8cd34
--- /dev/null
+++ b/apps/design-system/app/toaster.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+import { useConfig } from '@/hooks/use-config'
+
+export function Toaster() {
+  const [config] = useConfig()
+  const { theme } = useTheme()
+  return (
+    <SonnerToaster
+      position={config.sonnerPosition}
+      expand={config.sonnerExpand}
+      theme={theme as 'light' | 'dark' | 'system'}
+    />
+  )
+}
diff --git a/apps/design-system/registry/default/example/mermaid-basic.tsx b/apps/design-system/registry/default/example/mermaid-basic.tsx
index 4fb5c6f2d6f..ac2f27a28d5 100644
--- a/apps/design-system/registry/default/example/mermaid-basic.tsx
+++ b/apps/design-system/registry/default/example/mermaid-basic.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidBasic() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-demo.tsx b/apps/design-system/registry/default/example/mermaid-demo.tsx
index a282b9d2df9..a36fd5df6c4 100644
--- a/apps/design-system/registry/default/example/mermaid-demo.tsx
+++ b/apps/design-system/registry/default/example/mermaid-demo.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-er-diagram.tsx b/apps/design-system/registry/default/example/mermaid-er-diagram.tsx
index aaa7882106f..016f4130c7a 100644
--- a/apps/design-system/registry/default/example/mermaid-er-diagram.tsx
+++ b/apps/design-system/registry/default/example/mermaid-er-diagram.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidERDiagram() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-er-simple.tsx b/apps/design-system/registry/default/example/mermaid-er-simple.tsx
index b49f8e366cf..ef81ce7eea6 100644
--- a/apps/design-system/registry/default/example/mermaid-er-simple.tsx
+++ b/apps/design-system/registry/default/example/mermaid-er-simple.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidErSimple() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-flowchart-subgraph.tsx b/apps/design-system/registry/default/example/mermaid-flowchart-subgraph.tsx
index 5ba8f754fec..25825797df8 100644
--- a/apps/design-system/registry/default/example/mermaid-flowchart-subgraph.tsx
+++ b/apps/design-system/registry/default/example/mermaid-flowchart-subgraph.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidFlowchartSubgraph() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-flowchart.tsx b/apps/design-system/registry/default/example/mermaid-flowchart.tsx
index 87bc64e813b..035a3758b98 100644
--- a/apps/design-system/registry/default/example/mermaid-flowchart.tsx
+++ b/apps/design-system/registry/default/example/mermaid-flowchart.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidFlowchart() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-oauth-flow.tsx b/apps/design-system/registry/default/example/mermaid-oauth-flow.tsx
index bd76de36874..548c2fcd521 100644
--- a/apps/design-system/registry/default/example/mermaid-oauth-flow.tsx
+++ b/apps/design-system/registry/default/example/mermaid-oauth-flow.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidOAuthFlow() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-sequence-api.tsx b/apps/design-system/registry/default/example/mermaid-sequence-api.tsx
index 69050f824dc..10581d2c8e8 100644
--- a/apps/design-system/registry/default/example/mermaid-sequence-api.tsx
+++ b/apps/design-system/registry/default/example/mermaid-sequence-api.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidSequenceApi() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-sequence-async.tsx b/apps/design-system/registry/default/example/mermaid-sequence-async.tsx
index 87769866ff1..13cfc7fd0f8 100644
--- a/apps/design-system/registry/default/example/mermaid-sequence-async.tsx
+++ b/apps/design-system/registry/default/example/mermaid-sequence-async.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidSequenceAsync() {
   return (
diff --git a/apps/design-system/registry/default/example/mermaid-sequence-sync.tsx b/apps/design-system/registry/default/example/mermaid-sequence-sync.tsx
index e22c4153899..ce979391d52 100644
--- a/apps/design-system/registry/default/example/mermaid-sequence-sync.tsx
+++ b/apps/design-system/registry/default/example/mermaid-sequence-sync.tsx
@@ -1,4 +1,4 @@
-import { Mermaid } from 'ui'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 export default function MermaidSequenceSync() {
   return (
diff --git a/apps/design-system/types/assets.d.ts b/apps/design-system/types/assets.d.ts
index 70be4aae409..269bb0cc593 100644
--- a/apps/design-system/types/assets.d.ts
+++ b/apps/design-system/types/assets.d.ts
@@ -1,3 +1,8 @@
+declare module '*.css' {
+  export const styles: Record<string, string>
+  export default styles
+}
+
 declare module '*.scss' {
   export const styles: Record<string, string>
   export default styles
diff --git a/apps/docs/app/guides/deployment/terraform/reference/page.tsx b/apps/docs/app/guides/deployment/terraform/reference/page.tsx
index b8877c2e92a..7c8606c2888 100644
--- a/apps/docs/app/guides/deployment/terraform/reference/page.tsx
+++ b/apps/docs/app/guides/deployment/terraform/reference/page.tsx
@@ -2,25 +2,19 @@ import { codeBlock } from 'common-tags'
 import { Check, PlusCircle } from 'lucide-react'
 import Link from 'next/link'
 import ReactMarkdown from 'react-markdown'
+import { Heading, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
-import {
-  CodeBlock,
-  Heading,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
-} from 'ui'
-
-import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
-import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template'
-import { getGitHubFileContents } from '~/lib/octokit'
-import { TabPanel, Tabs } from '~/features/ui/Tabs'
 import {
   terraformDocsBranch,
   terraformDocsDocsDir,
   terraformDocsOrg,
   terraformDocsRepo,
 } from '../terraformConstants'
+import { GuideTemplate, newEditLink } from '@/features/docs/GuidesMdx.template'
+import { genGuideMeta } from '@/features/docs/GuidesMdx.utils'
+import { TabPanel, Tabs } from '@/features/ui/Tabs'
+import { getGitHubFileContents } from '@/lib/octokit'
 
 const meta = {
   title: 'Terraform Provider reference',
diff --git a/apps/docs/app/guides/local-development/cli/config/page.tsx b/apps/docs/app/guides/local-development/cli/config/page.tsx
index 341d800b6f8..75a28a947e0 100644
--- a/apps/docs/app/guides/local-development/cli/config/page.tsx
+++ b/apps/docs/app/guides/local-development/cli/config/page.tsx
@@ -1,11 +1,11 @@
-import ReactMarkdown from 'react-markdown'
-import { CodeBlock } from 'ui'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
 import { type TOCHeader } from '~/components/GuidesSidebar'
-import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
 import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template'
+import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
 import type { Parameter } from '~/lib/refGenerator/refTypes'
 import specFile from '~/spec/cli_v1_config.yaml' with { type: 'yml' }
+import ReactMarkdown from 'react-markdown'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+import { Heading } from 'ui/src/components/CustomHTMLElements'
 
 const meta = {
   title: 'Supabase CLI config',
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index 0c4b88aa9f6..1a4ef194b3c 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -1,15 +1,16 @@
+import { isFeatureEnabled } from 'common'
 import { type Metadata, type ResolvingMetadata } from 'next'
 import Link from 'next/link'
-import { cn, IconBackground, TextLink } from 'ui'
+import { cn, IconBackground } from 'ui'
 import { IconPanel } from 'ui-patterns/IconPanel'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { isFeatureEnabled } from 'common'
-import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker'
-import { MIGRATION_PAGES } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-import { GlassPanelWithIconPicker } from '~/features/ui/GlassPanelWithIconPicker'
-import { IconPanelWithIconPicker } from '~/features/ui/IconPanelWithIconPicker'
-import HomeLayout from '~/layouts/HomeLayout'
-import { BASE_PATH } from '~/lib/constants'
+import MenuIconPicker from '@/components/Navigation/NavigationMenu/MenuIconPicker'
+import { MIGRATION_PAGES } from '@/components/Navigation/NavigationMenu/NavigationMenu.constants'
+import { GlassPanelWithIconPicker } from '@/features/ui/GlassPanelWithIconPicker'
+import { IconPanelWithIconPicker } from '@/features/ui/IconPanelWithIconPicker'
+import HomeLayout from '@/layouts/HomeLayout'
+import { BASE_PATH } from '@/lib/constants'
 
 const { sdkCsharp, sdkDart, sdkKotlin, sdkPython, sdkSwift } = isFeatureEnabled([
   'sdk:csharp',
diff --git a/apps/docs/components/JwtGenerator/JwtGenerator.tsx b/apps/docs/components/JwtGenerator/JwtGenerator.tsx
index e004b3c20ec..314c1663f54 100644
--- a/apps/docs/components/JwtGenerator/JwtGenerator.tsx
+++ b/apps/docs/components/JwtGenerator/JwtGenerator.tsx
@@ -1,6 +1,7 @@
 import { KJUR } from 'jsrsasign'
 import { ChangeEvent, useState } from 'react'
-import { Button, CodeBlock, Input, Select } from 'ui'
+import { Button, Input, Select } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
 const now = new Date()
diff --git a/apps/docs/components/JwtGenerator/JwtGeneratorSimple.tsx b/apps/docs/components/JwtGenerator/JwtGeneratorSimple.tsx
index 0f6bb64014f..4ba0ae99e56 100644
--- a/apps/docs/components/JwtGenerator/JwtGeneratorSimple.tsx
+++ b/apps/docs/components/JwtGenerator/JwtGeneratorSimple.tsx
@@ -1,6 +1,7 @@
 import { KJUR } from 'jsrsasign'
 import { useState } from 'react'
-import { Button, CodeBlock } from 'ui'
+import { Button } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
 
diff --git a/apps/docs/features/app.providers.tsx b/apps/docs/features/app.providers.tsx
index 6d6caf07877..8469b004cbc 100644
--- a/apps/docs/features/app.providers.tsx
+++ b/apps/docs/features/app.providers.tsx
@@ -1,14 +1,15 @@
-import type { PropsWithChildren } from 'react'
-
-import { FeatureFlagProvider, IS_PLATFORM, ThemeProvider } from 'common'
-import { DevToolbar, DevToolbarProvider } from 'dev-tools'
-import { SonnerToaster, TooltipProvider } from 'ui'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL } from '~/lib/constants'
+import { FeatureFlagProvider, IS_PLATFORM, ThemeProvider } from 'common'
+import { DevToolbar, DevToolbarProvider } from 'dev-tools'
+import type { PropsWithChildren } from 'react'
+import { TooltipProvider } from 'ui'
+
 import { AuthContainer } from './auth/auth.client'
 import { DocsCommandMenu, DocsCommandProvider } from './command'
 import { QueryClientProvider } from './data/queryClient.client'
 import { PageTelemetry } from './telemetry/telemetry.client'
+import { Toaster } from './toaster'
 import { ScrollRestoration } from './ui/helpers.scroll.client'
 import { ThemeSandbox } from './ui/theme.client'
 
@@ -34,7 +35,7 @@ function GlobalProviders({ children }: PropsWithChildren) {
                     <ThemeSandbox />
                   </div>
                 </DocsCommandProvider>
-                <SonnerToaster position="top-right" />
+                <Toaster />
                 <DevToolbar />
               </TooltipProvider>
             </ThemeProvider>
diff --git a/apps/docs/features/toaster.tsx b/apps/docs/features/toaster.tsx
new file mode 100644
index 00000000000..4339a122692
--- /dev/null
+++ b/apps/docs/features/toaster.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+export function Toaster() {
+  const { theme } = useTheme()
+  return <SonnerToaster position="top-right" theme={theme as 'light' | 'dark' | 'system'} />
+}
diff --git a/apps/learn/app/SonnerToast.tsx b/apps/learn/app/SonnerToast.tsx
deleted file mode 100644
index 819a8890e9d..00000000000
--- a/apps/learn/app/SonnerToast.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client'
-
-import { useConfig } from '@/hooks/use-config'
-import { SonnerToaster as Toaster } from 'ui'
-
-export function SonnerToaster() {
-  const [config] = useConfig()
-  return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
-}
diff --git a/apps/learn/app/layout.tsx b/apps/learn/app/layout.tsx
index 8903f15159d..d4dd63ee7d1 100644
--- a/apps/learn/app/layout.tsx
+++ b/apps/learn/app/layout.tsx
@@ -1,12 +1,14 @@
 import type { Metadata } from 'next'
 
 import '@/styles/globals.css'
-import { API_URL } from '@/lib/constants'
+
 import { FeatureFlagProvider, TelemetryTagManager } from 'common'
 import { genFaviconData } from 'common/MetaFavicons/app-router'
 import { Inter } from 'next/font/google'
+
 import { ThemeProvider } from './Providers'
-import { SonnerToaster } from './SonnerToast'
+import { Toaster } from './toaster'
+import { API_URL } from '@/lib/constants'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -51,7 +53,7 @@ export default async function Layout({ children }: RootLayoutProps) {
             enableSystem
           >
             {children}
-            <SonnerToaster />
+            <Toaster />
           </ThemeProvider>
         </FeatureFlagProvider>
       </body>
diff --git a/apps/learn/app/toaster.tsx b/apps/learn/app/toaster.tsx
new file mode 100644
index 00000000000..0fac1f8cd34
--- /dev/null
+++ b/apps/learn/app/toaster.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+import { useConfig } from '@/hooks/use-config'
+
+export function Toaster() {
+  const [config] = useConfig()
+  const { theme } = useTheme()
+  return (
+    <SonnerToaster
+      position={config.sonnerPosition}
+      expand={config.sonnerExpand}
+      theme={theme as 'light' | 'dark' | 'system'}
+    />
+  )
+}
diff --git a/apps/learn/types/assets.d.ts b/apps/learn/types/assets.d.ts
new file mode 100644
index 00000000000..a4a9b8157f7
--- /dev/null
+++ b/apps/learn/types/assets.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  export const styles: Record<string, string>
+  export default styles
+}
diff --git a/apps/studio/components/grid/components/header/ExportDialog.tsx b/apps/studio/components/grid/components/header/ExportDialog.tsx
index 0432b0213ec..e397b669edb 100644
--- a/apps/studio/components/grid/components/header/ExportDialog.tsx
+++ b/apps/studio/components/grid/components/header/ExportDialog.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react'
-
 import { useParams } from 'common'
 import { Filter, Sort, SupaTable } from 'components/grid/types'
 import { getConnectionStrings } from 'components/interfaces/Connect/DatabaseSettings.utils'
@@ -7,11 +5,11 @@ import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { getAllTableRowsSql } from 'data/table-rows/table-rows-query'
 import { pluckObjectFields } from 'lib/helpers'
 import { RoleImpersonationState, wrapWithRoleImpersonation } from 'lib/role-impersonation'
+import { useState } from 'react'
 import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
 import {
   Button,
   cn,
-  CodeBlock,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -25,6 +23,7 @@ import {
   TabsTrigger_Shadcn_,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 interface ExportDialogProps {
   table?: SupaTable
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
index c16b449d212..10c28ecf210 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
@@ -1,14 +1,11 @@
 import { useParams } from 'common'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { Logs } from 'icons'
-import { BASE_PATH, DOCS_URL } from 'lib/constants'
 import { BookOpen } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
-import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
-import { AiIconAnimation, Button, Card, CardContent, CardHeader, CardTitle, Image } from 'ui'
+import { AiIconAnimation, Button, Card, CardContent, CardHeader, CardTitle } from 'ui'
+import { Image } from 'ui-patterns/Image'
 import {
   PageSection,
   PageSectionContent,
@@ -17,6 +14,11 @@ import {
   PageSectionTitle,
 } from 'ui-patterns/PageSection'
 
+import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { BASE_PATH, DOCS_URL } from '@/lib/constants'
+import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
+import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
+
 export const OverviewLearnMore = () => {
   const [isMounted, setIsMounted] = useState(false)
   const { ref } = useParams()
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
index 52507d2c6a6..ec4547f7523 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
@@ -1,18 +1,18 @@
 import { PostgresPolicy } from '@supabase/postgres-meta'
 import { Search } from 'lucide-react'
 import { useState } from 'react'
-import { Badge, HoverCard, HoverCardContent, HoverCardTrigger, Input, cn } from 'ui'
+import { Badge, cn, HoverCard, HoverCardContent, HoverCardTrigger, Input } from 'ui'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
-import { Markdown } from 'components/interfaces/Markdown'
-import CardButton from 'components/ui/CardButton'
-import CopyButton from 'components/ui/CopyButton'
-import { NoSearchResults } from 'components/ui/NoSearchResults'
-import { SimpleCodeBlock } from 'ui'
 import {
   getGeneralPolicyTemplates,
   getQueuePolicyTemplates,
   getRealtimePolicyTemplates,
 } from '../PolicyEditorModal/PolicyEditorModal.constants'
+import { Markdown } from '@/components/interfaces/Markdown'
+import CardButton from '@/components/ui/CardButton'
+import CopyButton from '@/components/ui/CopyButton'
+import { NoSearchResults } from '@/components/ui/NoSearchResults'
 
 interface PolicyTemplatesProps {
   schema: string
diff --git a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
index e618c63953f..1d873e03f7a 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
@@ -1,6 +1,3 @@
-import { useUserQuery } from 'data/auth/user-query'
-import { User } from 'data/auth/users-infinite-query'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { X } from 'lucide-react'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useState } from 'react'
@@ -10,17 +7,20 @@ import {
   Input_Shadcn_,
   ResizableHandle,
   ResizablePanel,
-  SimpleCodeBlock,
   Tabs_Shadcn_,
   TabsContent_Shadcn_,
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
 } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
 import { UserLogs } from './UserLogs'
 import { UserOverview } from './UserOverview'
 import { PANEL_PADDING } from './Users.constants'
+import { useUserQuery } from '@/data/auth/user-query'
+import { User } from '@/data/auth/users-infinite-query'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 
 export const UserPanel = () => {
   const { data: project } = useSelectedProjectQuery()
diff --git a/apps/studio/components/interfaces/Connect/Connect.constants.ts b/apps/studio/components/interfaces/Connect/Connect.constants.ts
index 054aa4280be..805a1576999 100644
--- a/apps/studio/components/interfaces/Connect/Connect.constants.ts
+++ b/apps/studio/components/interfaces/Connect/Connect.constants.ts
@@ -1,5 +1,5 @@
 import { DOCS_URL } from 'lib/constants'
-import { CodeBlockLang } from 'ui'
+import { type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 export type DatabaseConnectionType =
   | 'uri'
diff --git a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
index b760a5d613f..e3ba0beda3f 100644
--- a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
@@ -1,19 +1,20 @@
+import { useParams } from 'common'
 import dynamic from 'next/dynamic'
 import { forwardRef, HTMLAttributes, useMemo } from 'react'
-
-import { useParams } from 'common'
-import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
-import { usePgbouncerConfigQuery } from 'data/database/pgbouncer-config-query'
-import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query'
-import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
-import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
-import { pluckObjectFields } from 'lib/helpers'
-import { useTrack } from 'lib/telemetry/track'
-import { cn, CopyCallbackContext } from 'ui'
+import { cn } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { CopyCallbackContext } from 'ui-patterns/SimpleCodeBlock'
+
 import { getAddons } from '../Billing/Subscription/Subscription.utils'
 import type { projectKeys } from './Connect.types'
 import { getConnectionStrings } from './DatabaseSettings.utils'
+import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
+import { usePgbouncerConfigQuery } from '@/data/database/pgbouncer-config-query'
+import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
+import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
+import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
+import { pluckObjectFields } from '@/lib/helpers'
+import { useTrack } from '@/lib/telemetry/track'
 
 interface ConnectContentTabProps extends HTMLAttributes<HTMLDivElement> {
   projectKeys: projectKeys
diff --git a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
index e168603b7b0..b5b8876227b 100644
--- a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
@@ -1,23 +1,22 @@
-import { ChevronRight, FileCode, X } from 'lucide-react'
-import Link from 'next/link'
-import { PropsWithChildren, ReactNode } from 'react'
-
 import { useParams } from 'common'
 import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query'
 import { IS_PLATFORM } from 'lib/constants'
+import { ChevronRight, FileCode, X } from 'lucide-react'
+import Link from 'next/link'
+import { PropsWithChildren, ReactNode } from 'react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Badge,
   Button,
   cn,
-  CodeBlock,
-  CodeBlockLang,
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
   WarningIcon,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
+
 import { ConnectionParameters } from './ConnectionParameters'
 
 interface ConnectionPanelProps {
diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
index df5da8a97f4..6826787a0cc 100644
--- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
+++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
@@ -20,7 +20,6 @@ import {
   Badge,
   Button,
   cn,
-  CodeBlock,
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
@@ -32,6 +31,7 @@ import {
   SelectValue_Shadcn_,
   Separator,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import {
diff --git a/apps/studio/components/interfaces/Connect/content/androidkotlin/supabasekt/content.tsx b/apps/studio/components/interfaces/Connect/content/androidkotlin/supabasekt/content.tsx
index 11d5ab7443a..66caa833bff 100644
--- a/apps/studio/components/interfaces/Connect/content/androidkotlin/supabasekt/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/androidkotlin/supabasekt/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/astro/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/astro/supabasejs/content.tsx
index 46d9a2ac22f..cf8c7c9dcc6 100644
--- a/apps/studio/components/interfaces/Connect/content/astro/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/astro/supabasejs/content.tsx
@@ -1,11 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
   ConnectTabContent,
+  ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabs,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/drizzle/content.tsx b/apps/studio/components/interfaces/Connect/content/drizzle/content.tsx
index 20e25329494..2ef670083a6 100644
--- a/apps/studio/components/interfaces/Connect/content/drizzle/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/drizzle/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/exporeactnative/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/exporeactnative/supabasejs/content.tsx
index fd1815f163b..04a5806333d 100644
--- a/apps/studio/components/interfaces/Connect/content/exporeactnative/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/exporeactnative/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/flask/supabasepy/content.tsx b/apps/studio/components/interfaces/Connect/content/flask/supabasepy/content.tsx
index 09cc0aa8a23..08ff15511e1 100644
--- a/apps/studio/components/interfaces/Connect/content/flask/supabasepy/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/flask/supabasepy/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/flutter/supabaseflutter/content.tsx b/apps/studio/components/interfaces/Connect/content/flutter/supabaseflutter/content.tsx
index d0cb4c475df..26356a92a19 100644
--- a/apps/studio/components/interfaces/Connect/content/flutter/supabaseflutter/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/flutter/supabaseflutter/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/ionicangular/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/ionicangular/supabasejs/content.tsx
index 89e7f39f251..5470df4a99b 100644
--- a/apps/studio/components/interfaces/Connect/content/ionicangular/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/ionicangular/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/ionicreact/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/ionicreact/supabasejs/content.tsx
index ac86c1a17cc..2121f100ac6 100644
--- a/apps/studio/components/interfaces/Connect/content/ionicreact/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/ionicreact/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx
index 8c56900d9e4..0efa2826d83 100644
--- a/apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
   ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/nextjs/pages/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/nextjs/pages/supabasejs/content.tsx
index 29d4bea895b..76ab71a8987 100644
--- a/apps/studio/components/interfaces/Connect/content/nextjs/pages/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/nextjs/pages/supabasejs/content.tsx
@@ -1,11 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
   ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/nuxt/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/nuxt/supabasejs/content.tsx
index be56beed13b..1c9cfe2633a 100644
--- a/apps/studio/components/interfaces/Connect/content/nuxt/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/nuxt/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/prisma/content.tsx b/apps/studio/components/interfaces/Connect/content/prisma/content.tsx
index 3c097cf8968..89b1552a607 100644
--- a/apps/studio/components/interfaces/Connect/content/prisma/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/prisma/content.tsx
@@ -1,13 +1,13 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
-import { SimpleCodeBlock } from 'ui'
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
   ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { IS_PLATFORM } from 'lib/constants'
+} from '@/components/interfaces/Connect/ConnectTabs'
+import { IS_PLATFORM } from '@/lib/constants'
 
 const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/react/create-react-app/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/react/create-react-app/supabasejs/content.tsx
index 3a70ecfd3d9..13f869bbf15 100644
--- a/apps/studio/components/interfaces/Connect/content/react/create-react-app/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/react/create-react-app/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/react/vite/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/react/vite/supabasejs/content.tsx
index a28865fb223..94efe8a3a54 100644
--- a/apps/studio/components/interfaces/Connect/content/react/vite/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/react/vite/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/refine/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/refine/supabasejs/content.tsx
index 1c2cbb08447..36493112614 100644
--- a/apps/studio/components/interfaces/Connect/content/refine/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/refine/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx
index ac40753c886..b33c0556fe6 100644
--- a/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/solidjs/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/solidjs/supabasejs/content.tsx
index 08bfbc7b8a1..a79b934c727 100644
--- a/apps/studio/components/interfaces/Connect/content/solidjs/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/solidjs/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/sveltekit/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/sveltekit/supabasejs/content.tsx
index d7dd5da02de..0bafc854490 100644
--- a/apps/studio/components/interfaces/Connect/content/sveltekit/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/sveltekit/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/swift/supabaseswift/content.tsx b/apps/studio/components/interfaces/Connect/content/swift/supabaseswift/content.tsx
index a0f637e2e4a..9b0746d409c 100644
--- a/apps/studio/components/interfaces/Connect/content/swift/supabaseswift/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/swift/supabaseswift/content.tsx
@@ -1,12 +1,12 @@
 import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/tanstack/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/tanstack/supabasejs/content.tsx
index 0f5ef253f45..2c36da5d106 100644
--- a/apps/studio/components/interfaces/Connect/content/tanstack/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/tanstack/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
-  ConnectTabs,
-  ConnectTabTriggers,
-  ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/Connect/content/vuejs/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/vuejs/supabasejs/content.tsx
index 3d5b6d91cce..70e70bc39a5 100644
--- a/apps/studio/components/interfaces/Connect/content/vuejs/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Connect/content/vuejs/supabasejs/content.tsx
@@ -1,12 +1,12 @@
-import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
+import type { ContentFileProps } from '@/components/interfaces/Connect/Connect.types'
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
-} from 'components/interfaces/Connect/ConnectTabs'
-import { SimpleCodeBlock } from 'ui'
+} from '@/components/interfaces/Connect/ConnectTabs'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {
   return (
diff --git a/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts b/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
index 9a66178eec6..3ba4d4c7233 100644
--- a/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
@@ -1,5 +1,5 @@
 import { DOCS_URL } from 'lib/constants'
-import { CodeBlockLang } from 'ui'
+import { type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 export type DatabaseConnectionType =
   | 'uri'
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
index e0b38e9fd95..62c9fa7c425 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { getConnectionStrings } from '../../../DatabaseSettings.utils'
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
index e77eea6f6af..f15252b3970 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-install/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-install/content.tsx
index 67244a56703..ffb2040cc66 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-install/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-install/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 import examples from '@/components/interfaces/ConnectSheet/DirectConnectionExamples'
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/add-server/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/add-server/content.tsx
index 9a392c17cbd..134fa854d4b 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/add-server/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/add-server/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 import { useMcpUrl } from '@/components/interfaces/ConnectSheet/useMcpUrl'
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/authenticate/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/authenticate/content.tsx
index c8f91c803a5..724c23fceb3 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/authenticate/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/claude-code/authenticate/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/add-server/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/add-server/content.tsx
index c6e40aba273..0cf2f6c175a 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/add-server/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/add-server/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 import { useMcpUrl } from '@/components/interfaces/ConnectSheet/useMcpUrl'
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/authenticate/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/authenticate/content.tsx
index ad41be2d3fc..f026d1e824a 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/authenticate/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/authenticate/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx
index 072c056f941..5f57b5de8a4 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/orm-install/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/orm-install/content.tsx
index 09610bde428..0ade1ba6401 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/orm-install/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/orm-install/content.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 
diff --git a/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx b/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
index 799f225e258..2281e5d5340 100644
--- a/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
@@ -1,7 +1,6 @@
 import {
   Button,
   cn,
-  CodeBlock,
   Dialog,
   DialogClose,
   DialogContent,
@@ -11,6 +10,7 @@ import {
   DialogSectionSeparator,
   DialogTitle,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 interface ErrorDetailsDialogProps {
   open: boolean
diff --git a/apps/studio/components/interfaces/Docs/CodeSnippet.tsx b/apps/studio/components/interfaces/Docs/CodeSnippet.tsx
index daa780fc026..cef13723182 100644
--- a/apps/studio/components/interfaces/Docs/CodeSnippet.tsx
+++ b/apps/studio/components/interfaces/Docs/CodeSnippet.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { SimpleCodeBlock } from 'ui'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
 import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index 1fcf9c254d8..9d473f27b9b 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -13,9 +13,7 @@ import {
   Card,
   CardContent,
   CardFooter,
-  CardHeader,
   cn,
-  CodeBlock,
   copyToClipboard,
   CriticalIcon,
   Form_Shadcn_,
@@ -27,6 +25,7 @@ import {
   TabsList_Shadcn_ as TabsList,
   TabsTrigger_Shadcn_ as TabsTrigger,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
index b88c4e5ab85..963937919e2 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
@@ -23,7 +23,6 @@ import {
 import {
   Badge,
   Button,
-  CodeBlock,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
@@ -48,6 +47,7 @@ import {
   TabsTrigger_Shadcn_ as TabsTrigger,
   TextArea_Shadcn_ as Textarea,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
diff --git a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
index eee908ca926..1219c257647 100644
--- a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
+++ b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
@@ -23,7 +23,6 @@ import {
   CardHeader,
   CardTitle,
   cn,
-  CodeBlock,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -33,6 +32,7 @@ import {
   DialogTrigger,
   Separator,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { EDGE_FUNCTION_TEMPLATES } from './Functions.templates'
 
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
index f763f5d4b0b..6e8cc1d0d06 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
@@ -15,11 +15,11 @@ import {
   BreadcrumbSeparator_Shadcn_ as BreadcrumbSeparator,
   Button,
   cn,
-  CodeBlock,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import {
   PageHeader,
   PageHeaderAside,
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
index 7151241b9db..82e0d02d711 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
@@ -12,7 +12,6 @@ import {
   Badge,
   Button,
   cn,
-  CodeBlock,
   ContextMenu_Shadcn_,
   ContextMenuContent_Shadcn_,
   ContextMenuItem_Shadcn_,
@@ -41,6 +40,7 @@ import {
   TooltipTrigger,
 } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 const getNextRun = (schedule: string, lastRun?: string) => {
   // cron-parser can only deal with the traditional cron syntax but technically users can also
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
index a507198e00a..bd5720e4ac9 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
@@ -2,7 +2,6 @@ import { getScheduleDeleteCronJobRunDetailsSql } from '@supabase/pg-meta'
 import { CheckCircle2, XCircle } from 'lucide-react'
 import {
   Button,
-  CodeBlock,
   Dialog,
   DialogContent,
   DialogHeader,
@@ -21,6 +20,7 @@ import {
   TooltipTrigger,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { CLEANUP_INTERVALS } from './CronJobsTab.constants'
 import {
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
index b8a4a7aec7a..a319025031d 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
@@ -9,8 +9,9 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { CircleCheck, CircleX, Loader } from 'lucide-react'
 import { useMemo } from 'react'
 import DataGrid, { Column, Row } from 'react-data-grid'
-import { cn, CodeBlock, LoadingLine, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { cn, LoadingLine, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { calculateDuration, formatDate } from './CronJobs.utils'
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet.tsx
index 390f2e0745f..2e404d7963f 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet.tsx
@@ -10,7 +10,6 @@ import {
   Card,
   CardContent,
   cn,
-  CodeBlock,
   DialogSectionSeparator,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -33,6 +32,7 @@ import {
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx
index 01804b8d584..423e769e424 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx
@@ -1,10 +1,10 @@
 import { useParams } from 'common'
-
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { PropsWithChildren } from 'react'
-import { SimpleCodeBlock } from 'ui'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
 import { Markdown } from '../Markdown'
+import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 
 interface ContentSnippetProps {
   apikey?: string
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx
index 35f375305d1..a0bb6d9abf1 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx
@@ -1,9 +1,10 @@
-import { SimpleCodeBlock } from 'ui'
 import { useParams } from 'common'
-import { DocsButton } from 'components/ui/DocsButton'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
 import { Markdown } from '../Markdown'
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { DocsButton } from '@/components/ui/DocsButton'
+import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 
 interface ResourceContentProps {
   selectedLanguage: 'js' | 'bash'
diff --git a/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx
index 113d1d54630..5632a2c4f29 100644
--- a/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx
@@ -1,6 +1,7 @@
 import { DOCS_URL } from 'lib/constants'
 import { BarChart3, Code, Database, GitBranch, Shield, Table, Upload, UserPlus } from 'lucide-react'
-import { AiIconAnimation, CodeBlock } from 'ui'
+import { AiIconAnimation } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type { GettingStartedAction, GettingStartedStep } from './GettingStarted.types'
 import type { GettingStartedStatuses } from './useGettingStartedProgress'
diff --git a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
index 77ee666ff8d..32ef75d40e4 100644
--- a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
@@ -1,13 +1,10 @@
-import { AiAssistantDropdown } from 'components/ui/AiAssistantDropdown'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { ArrowDown, ArrowRight, ArrowUp, ChevronDown, ExternalLink, ScanSearch } from 'lucide-react'
-import { type RefObject, useMemo } from 'react'
+import { useMemo, type RefObject } from 'react'
 // eslint-disable-next-line no-restricted-imports
 import { type Column, type DataGridHandle } from 'react-data-grid'
 import {
   Button,
   cn,
-  CodeBlock,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -17,6 +14,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 
 import { buildQueryInsightFixPrompt } from '../../QueryPerformance/QueryPerformance.ai'
@@ -33,6 +31,8 @@ import {
   getColumnName,
   getTableName,
 } from '../QueryInsightsTable/QueryInsightsTable.utils'
+import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 
 interface UseQueryInsightsTableColumnsParams {
   sort: { column: string; order: 'asc' | 'desc' }
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
index 5aed88b1479..944ae227b9b 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
@@ -1,22 +1,22 @@
-import { Loader2 } from 'lucide-react'
-import { MouseEvent, useState } from 'react'
-
 import { GetIndexAdvisorResultResponse } from 'data/database/retrieve-index-advisor-result-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { Loader2 } from 'lucide-react'
+import { MouseEvent, useState } from 'react'
 import {
   Button,
   cn,
-  CodeBlock,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
   Separator,
   WarningIcon,
 } from 'ui'
-import { IndexImprovementText } from './IndexImprovementText'
-import { QueryPanelScoreSection } from '../QueryPanel'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
 import { useIndexInvalidation } from '../hooks/useIndexInvalidation'
+import { QueryPanelScoreSection } from '../QueryPanel'
 import { createIndexes } from './index-advisor.utils'
+import { IndexImprovementText } from './IndexImprovementText'
 
 interface IndexSuggestionIconProps {
   indexAdvisorResult: GetIndexAdvisorResultResponse
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
index 071535f74ea..42fbc269f05 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
@@ -22,12 +22,12 @@ import {
   AlertTitle_Shadcn_,
   Button,
   cn,
-  CodeBlock,
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { useIndexInvalidation } from './hooks/useIndexInvalidation'
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index 70afdd20335..2ccf2d6beef 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -8,7 +8,6 @@ import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
 import {
   Button,
   cn,
-  CodeBlock,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -23,6 +22,7 @@ import {
   TabsTrigger_Shadcn_,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
diff --git a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
index c531a7df6e6..40bffbafe0c 100644
--- a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
@@ -1,13 +1,14 @@
+import type { ModalProps } from '@ui/components/Modal/Modal'
+import TwoOptionToggle from 'components/ui/TwoOptionToggle'
+import { DOCS_URL } from 'lib/constants'
 import { snakeCase } from 'lodash'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-
-import type { ModalProps } from '@ui/components/Modal/Modal'
-import TwoOptionToggle from 'components/ui/TwoOptionToggle'
-import { DOCS_URL } from 'lib/constants'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { Button, CodeBlock, Modal, Tabs } from 'ui'
+import { Button, Modal, Tabs } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
 import { Markdown } from '../Markdown'
 import {
   generateFileCliCommand,
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 1cb968d19be..cc499899d72 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -1,22 +1,21 @@
-import dayjs from 'dayjs'
-import { RefreshCw, StopCircle } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { useQueryAbortMutation } from 'data/sql/abort-query-mutation'
 import { useOngoingQueriesQuery } from 'data/sql/ongoing-queries-query'
+import dayjs from 'dayjs'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useUrlState } from 'hooks/ui/useUrlState'
 import { IS_PLATFORM } from 'lib/constants'
+import { RefreshCw, StopCircle } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
 import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import type { ResponseError } from 'types'
 import {
   Button,
-  CodeBlock,
+  cn,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -26,8 +25,8 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export const OngoingQueriesPanel = () => {
diff --git a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
index 9d4af853bf9..bb34cbb4f9e 100644
--- a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
+++ b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
@@ -1,6 +1,3 @@
-import { Check, ChevronDown } from 'lucide-react'
-import { toast } from 'sonner'
-
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DocsButton } from 'components/ui/DocsButton'
 import InformationBox from 'components/ui/InformationBox'
@@ -10,14 +7,15 @@ import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-pos
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
+import { Check, ChevronDown } from 'lucide-react'
+import { toast } from 'sonner'
 import {
+  Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  CodeBlock,
+  Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Collapsible_Shadcn_,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -27,6 +25,7 @@ import {
   DialogTitle,
   WarningIcon,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 interface HardenAPIModalProps {
   visible: boolean
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index 2dcb41b37c7..2aaa77717cc 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -1,21 +1,21 @@
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { Check, Copy, MousePointerClick, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
-
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import {
   Button,
-  CodeBlock,
+  cn,
+  copyToClipboard,
+  Tabs_Shadcn_,
   TabsContent_Shadcn_,
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
-  Tabs_Shadcn_,
-  cn,
-  copyToClipboard,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
+
 import type { LogData, QueryType } from './Logs.types'
 import { apiKey, role as extractRole, jwtAPIKey } from './Logs.utils'
+import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
 
 export interface LogSelectionProps {
   log?: LogData
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
index 0b88871f0fe..444cddf7969 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
@@ -1,4 +1,5 @@
-import { CodeBlock } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
 import type { LogQueryError } from '../Logs.types'
 
 export interface ErrorRendererProps {
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
index 89e9af57518..e3d6bb379f1 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
@@ -1,6 +1,3 @@
-import { Eye, EyeOff } from 'lucide-react'
-import { useMemo, useState } from 'react'
-
 import { useParams } from 'common'
 import CommandRender from 'components/interfaces/Functions/CommandRender'
 import { convertKVStringArrayToJson } from 'components/interfaces/Integrations/Wrappers/Wrappers.utils'
@@ -14,6 +11,8 @@ import {
 } from 'data/vault/vault-secret-decrypted-value-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
+import { Eye, EyeOff } from 'lucide-react'
+import { useMemo, useState } from 'react'
 import {
   Accordion_Shadcn_,
   AccordionContent_Shadcn_,
@@ -23,8 +22,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  CodeBlock,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
 import { useAnalyticsBucketWrapperInstance } from '../useAnalyticsBucketWrapperInstance'
 import { getPyicebergSnippet } from './CreateTableInstructions.constants'
 
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
index 451d30b25d9..89c10bcdcfa 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
@@ -7,7 +7,6 @@ import Link from 'next/link'
 import {
   Button,
   cn,
-  CodeBlock,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -17,6 +16,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 interface InsertDataDialogProps {
   table: string
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
index 1b57d52ebc1..4d9e12f45d4 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
@@ -12,23 +12,23 @@ import { parseAsBoolean, useQueryState } from 'nuqs'
 import { useState } from 'react'
 import {
   Button,
-  CodeBlock,
+  cn,
+  Command_Shadcn_,
   CommandGroup_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Command_Shadcn_,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
   Sheet,
   SheetContent,
   SheetHeader,
   SheetSection,
   SheetTitle,
   SheetTrigger,
-  cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { useS3VectorsWrapperExtension } from '../useS3VectorsWrapper'
 import { useS3VectorsWrapperInstance } from '../useS3VectorsWrapperInstance'
diff --git a/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx b/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx
index ba0cf1617fa..408f8e1545d 100644
--- a/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx
@@ -1,14 +1,15 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-
-import { useViewDefinitionQuery } from 'data/database/view-definition-query'
-import { lintKeys } from 'data/lint/keys'
-import { useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
-import { Entity, isViewLike } from 'data/table-editor/table-editor-types'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { ScrollArea, SimpleCodeBlock } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { ScrollArea } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
+import { useViewDefinitionQuery } from '@/data/database/view-definition-query'
+import { lintKeys } from '@/data/lint/keys'
+import { useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
+import { Entity, isViewLike } from '@/data/table-editor/table-editor-types'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 
 interface ViewEntityAutofixSecurityModalProps {
   table: Entity
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
index b9958697eac..f1632f6e0cb 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
@@ -8,7 +8,6 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useState } from 'react'
 import {
   cn,
-  CodeBlock,
   ResizableHandle,
   ResizablePanel,
   Skeleton,
@@ -17,6 +16,7 @@ import {
   TabsList_Shadcn_ as TabsList,
   TabsTrigger_Shadcn_ as TabsTrigger,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { MemoizedRequestStartedBlock } from './ServiceFlow/components/blocks/RequestStartedBlock'
 import { MemoizedResponseCompletedBlock } from './ServiceFlow/components/blocks/ResponseCompletedBlock'
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
index b96637c23aa..8d2c243f958 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
@@ -1,9 +1,4 @@
 import dayjs from 'dayjs'
-
-import { DocsButton } from 'components/ui/DocsButton'
-import { InlineLink } from 'components/ui/InlineLink'
-import { useCLIReleaseVersionQuery } from 'data/misc/cli-release-version-query'
-import { DOCS_URL } from 'lib/constants'
 import {
   Badge,
   Button,
@@ -17,14 +12,19 @@ import {
   PopoverContent_Shadcn_,
   PopoverSeparator_Shadcn_,
   PopoverTrigger_Shadcn_,
-  SimpleCodeBlock,
   Tabs_Shadcn_,
   TabsContent_Shadcn_,
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
 import { getSemver, semverGte, semverLte } from './LocalVersionPopover.utils'
+import { DocsButton } from '@/components/ui/DocsButton'
+import { InlineLink } from '@/components/ui/InlineLink'
+import { useCLIReleaseVersionQuery } from '@/data/misc/cli-release-version-query'
+import { DOCS_URL } from '@/lib/constants'
 
 export const LocalVersionPopover = () => {
   const { data, isSuccess } = useCLIReleaseVersionQuery()
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
index 6f624fe17c5..9ad7541753b 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
@@ -14,12 +14,12 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useRef } from 'react'
 import {
   cn,
-  CodeBlock,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
 } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import type { CommandOptions } from 'ui-patterns/CommandMenu'
 import {
   Breadcrumb,
diff --git a/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx b/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
index 4386f5aa57f..3d324d88323 100644
--- a/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
@@ -1,14 +1,12 @@
 import { Code, X } from 'lucide-react'
-
 import {
   Button,
-  CodeBlock,
-  CodeBlockProps,
   cn,
   HoverCard_Shadcn_,
   HoverCardContent_Shadcn_,
   HoverCardTrigger_Shadcn_,
 } from 'ui'
+import { CodeBlock, type CodeBlockProps } from 'ui-patterns/CodeBlock'
 
 interface CollapsibleCodeBlockProps extends CodeBlockProps {
   onRemove?: () => void
diff --git a/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx b/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
index 8b01132a234..af11471c7a9 100644
--- a/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
@@ -14,8 +14,6 @@ import type { StreamdownProps } from 'streamdown'
 import {
   Button,
   cn,
-  CodeBlock,
-  CodeBlockLang,
   Dialog,
   DialogClose,
   DialogContent,
@@ -24,8 +22,9 @@ import {
   DialogSection,
   DialogTitle,
   DialogTrigger,
-  markdownComponents,
 } from 'ui'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
+import { markdownComponents } from 'ui-patterns/Markdown'
 
 import { EdgeFunctionBlock } from '../EdgeFunctionBlock/EdgeFunctionBlock'
 import { AssistantSnippetProps } from './AIAssistant.types'
diff --git a/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx b/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
index 76e1eebef4e..149124b350d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
-import { Button, CodeBlock } from 'ui'
-import { HoverCard_Shadcn_, HoverCardTrigger_Shadcn_, HoverCardContent_Shadcn_ } from 'ui'
 import { X } from 'lucide-react'
+import React from 'react'
+import { Button, HoverCard_Shadcn_, HoverCardContent_Shadcn_, HoverCardTrigger_Shadcn_ } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
 import { type SqlSnippet } from './AIAssistant.types'
 
 export const getSnippetLabel = (snippet: SqlSnippet, index: number): string => {
diff --git a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
index 30af2a93c72..1f1a056914e 100644
--- a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
+++ b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
@@ -1,10 +1,10 @@
+import { ReportBlockContainer } from 'components/interfaces/Reports/ReportBlock/ReportBlockContainer'
 import { Code } from 'lucide-react'
 import Link from 'next/link'
 import type { DragEvent, ReactNode } from 'react'
-
-import { ReportBlockContainer } from 'components/interfaces/Reports/ReportBlock/ReportBlockContainer'
-import { Button, CodeBlock, type CodeBlockLang, cn } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Button, cn } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 interface EdgeFunctionBlockProps {
   /** Title of the EdgeFunctionBlock */
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 28b6651c45e..f1001fee50a 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -41,7 +41,6 @@ import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import {
   Button,
   cn,
-  CodeBlock,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
@@ -57,7 +56,8 @@ import {
   PopoverTrigger_Shadcn_,
   SQL_ICON,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { containsUnknownFunction, isReadOnlySelect } from '../AIAssistantPanel/AIAssistant.utils'
 import { AIEditor } from '../AIEditor'
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
index d6d530ebbe3..a2508829e8b 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
@@ -5,7 +5,8 @@ import dayjs from 'dayjs'
 import { Code, Play } from 'lucide-react'
 import { DragEvent, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { Bar, BarChart, CartesianGrid, Cell, Tooltip, XAxis, YAxis } from 'recharts'
-import { Badge, Button, ChartContainer, ChartTooltipContent, cn, CodeBlock } from 'ui'
+import { Badge, Button, ChartContainer, ChartTooltipContent, cn } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { ButtonTooltip } from '../ButtonTooltip'
diff --git a/apps/studio/lib/toaster.tsx b/apps/studio/lib/toaster.tsx
new file mode 100644
index 00000000000..4339a122692
--- /dev/null
+++ b/apps/studio/lib/toaster.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+export function Toaster() {
+  const { theme } = useTheme()
+  return <SonnerToaster position="top-right" theme={theme as 'light' | 'dark' | 'system'} />
+}
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index a6f6f4aaf6f..27cb705ad4b 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -31,16 +31,6 @@ import {
   useThemeSandbox,
 } from 'common'
 import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
-import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
-import { StudioCommandProvider as CommandProvider } from 'components/interfaces/App/CommandMenu/StudioCommandProvider'
-import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { FeaturePreviewModal } from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
-import { UpdateBillingAddressModal } from 'components/interfaces/App/UpdateBillingAddressModal'
-import { MonacoThemeProvider } from 'components/interfaces/App/MonacoThemeProvider'
-import { RouteValidationWrapper } from 'components/interfaces/App/RouteValidationWrapper'
-import { MainScrollContainerProvider } from 'components/layouts/MainScrollContainerContext'
-import { GlobalErrorBoundaryState } from 'components/ui/ErrorBoundary/GlobalErrorBoundaryState'
-import { useRootQueryClient } from 'data/query-client'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import duration from 'dayjs/plugin/duration'
@@ -48,20 +38,32 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import { DevToolbar, DevToolbarProvider } from 'dev-tools'
-import { customFont, sourceCodePro } from 'fonts'
-import { useCustomContent } from 'hooks/custom-content/useCustomContent'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import { AuthProvider } from 'lib/auth'
-import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from 'lib/constants'
-import { ProfileProvider } from 'lib/profile'
-import { Telemetry } from 'lib/telemetry'
 import Head from 'next/head'
 import { NuqsAdapter } from 'nuqs/adapters/next/pages'
 import { ErrorInfo, useCallback, type ComponentProps } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { AiAssistantStateContextProvider } from 'state/ai-assistant-state'
-import type { AppPropsWithLayout } from 'types'
-import { SonnerToaster, TooltipProvider } from 'ui'
+import { TooltipProvider } from 'ui'
+
+import { StudioCommandMenu } from '@/components/interfaces/App/CommandMenu'
+import { StudioCommandProvider as CommandProvider } from '@/components/interfaces/App/CommandMenu/StudioCommandProvider'
+import { FeaturePreviewContextProvider } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import { FeaturePreviewModal } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewModal'
+import { MonacoThemeProvider } from '@/components/interfaces/App/MonacoThemeProvider'
+import { RouteValidationWrapper } from '@/components/interfaces/App/RouteValidationWrapper'
+import { UpdateBillingAddressModal } from '@/components/interfaces/App/UpdateBillingAddressModal'
+import { MainScrollContainerProvider } from '@/components/layouts/MainScrollContainerContext'
+import { GlobalErrorBoundaryState } from '@/components/ui/ErrorBoundary/GlobalErrorBoundaryState'
+import { useRootQueryClient } from '@/data/query-client'
+import { customFont, sourceCodePro } from '@/fonts'
+import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { AuthProvider } from '@/lib/auth'
+import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from '@/lib/constants'
+import { ProfileProvider } from '@/lib/profile'
+import { Telemetry } from '@/lib/telemetry'
+import { Toaster } from '@/lib/toaster'
+import { AiAssistantStateContextProvider } from '@/state/ai-assistant-state'
+import type { AppPropsWithLayout } from '@/types'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -185,7 +187,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                                 <FeaturePreviewModal />
                                 <UpdateBillingAddressModal />
                               </FeaturePreviewContextProvider>
-                              <SonnerToaster position="top-right" />
+                              <Toaster />
                               <MonacoThemeProvider />
                             </CommandProvider>
                           </AiAssistantStateContextProvider>
diff --git a/apps/ui-library/app/SonnerToast.tsx b/apps/ui-library/app/SonnerToast.tsx
deleted file mode 100644
index 28a013f1dbc..00000000000
--- a/apps/ui-library/app/SonnerToast.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client'
-
-import { SonnerToaster as Toaster } from 'ui'
-
-import { useConfig } from '@/hooks/use-config'
-
-export function SonnerToaster() {
-  const [config] = useConfig()
-  return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
-}
diff --git a/apps/ui-library/app/layout.tsx b/apps/ui-library/app/layout.tsx
index f82bfc3d378..e251215d895 100644
--- a/apps/ui-library/app/layout.tsx
+++ b/apps/ui-library/app/layout.tsx
@@ -7,7 +7,7 @@ import { genFaviconData } from 'common/MetaFavicons/app-router'
 import { Inter } from 'next/font/google'
 
 import { ThemeProvider } from './Providers'
-import { SonnerToaster } from './SonnerToast'
+import { Toaster } from './toaster'
 import { API_URL } from '@/lib/constants'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -53,7 +53,7 @@ export default async function Layout({ children }: RootLayoutProps) {
             enableSystem
           >
             {children}
-            <SonnerToaster />
+            <Toaster />
           </ThemeProvider>
         </FeatureFlagProvider>
       </body>
diff --git a/apps/ui-library/app/toaster.tsx b/apps/ui-library/app/toaster.tsx
new file mode 100644
index 00000000000..0fac1f8cd34
--- /dev/null
+++ b/apps/ui-library/app/toaster.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+import { useConfig } from '@/hooks/use-config'
+
+export function Toaster() {
+  const [config] = useConfig()
+  const { theme } = useTheme()
+  return (
+    <SonnerToaster
+      position={config.sonnerPosition}
+      expand={config.sonnerExpand}
+      theme={theme as 'light' | 'dark' | 'system'}
+    />
+  )
+}
diff --git a/apps/ui-library/components/block-item-code.tsx b/apps/ui-library/components/block-item-code.tsx
index 3ace544f82e..d6d45d509a6 100644
--- a/apps/ui-library/components/block-item-code.tsx
+++ b/apps/ui-library/components/block-item-code.tsx
@@ -2,7 +2,8 @@
 
 import { File } from 'lucide-react'
 import { useState } from 'react'
-import { CodeBlock, flattenTree, TreeView, TreeViewItem } from 'ui'
+import { flattenTree, TreeView, TreeViewItem } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { RegistryNode } from '@/lib/process-registry'
 
diff --git a/apps/www/app/providers.tsx b/apps/www/app/providers.tsx
index 663b4d9c206..3d397df4228 100644
--- a/apps/www/app/providers.tsx
+++ b/apps/www/app/providers.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Suspense } from 'react'
 import {
   AuthProvider,
   FeatureFlagProvider,
@@ -13,10 +12,13 @@ import {
 import { WwwCommandMenu } from 'components/CommandMenu'
 import { DevToolbar, DevToolbarProvider } from 'dev-tools'
 import { API_URL } from 'lib/constants'
-import { themes, TooltipProvider, SonnerToaster } from 'ui'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Suspense } from 'react'
+import { SonnerToaster, themes, TooltipProvider } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { useConsentToast } from 'ui-patterns/consent'
-import { NuqsAdapter } from 'nuqs/adapters/next/app'
+
+import { Toaster } from './toaster'
 
 function Providers({ children }: { children: React.ReactNode }) {
   useThemeSandbox()
@@ -35,7 +37,7 @@ function Providers({ children }: { children: React.ReactNode }) {
               <TooltipProvider delayDuration={0}>
                 <CommandProvider>
                   <TelemetryTagManager />
-                  <SonnerToaster position="top-right" />
+                  <Toaster />
                   <Suspense fallback={null}>{children}</Suspense>
                   <WwwCommandMenu />
                   <PageTelemetry
diff --git a/apps/www/app/toaster.tsx b/apps/www/app/toaster.tsx
new file mode 100644
index 00000000000..4339a122692
--- /dev/null
+++ b/apps/www/app/toaster.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { SonnerToaster } from 'ui'
+
+export function Toaster() {
+  const { theme } = useTheme()
+  return <SonnerToaster position="top-right" theme={theme as 'light' | 'dark' | 'system'} />
+}
diff --git a/apps/www/components/Enterprise/Security.tsx b/apps/www/components/Enterprise/Security.tsx
index 825ee023d5b..e9153edbb9f 100644
--- a/apps/www/components/Enterprise/Security.tsx
+++ b/apps/www/components/Enterprise/Security.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react'
-import { TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-
 import type { LucideIcon } from 'lucide-react'
+import React, { FC } from 'react'
+import { TextLink } from 'ui-patterns/TextLink'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 export interface SecuritySectionProps {
   id: string
diff --git a/apps/www/components/Enterprise/UseCases.tsx b/apps/www/components/Enterprise/UseCases.tsx
index d37b7819b37..c7ed09e69bb 100644
--- a/apps/www/components/Enterprise/UseCases.tsx
+++ b/apps/www/components/Enterprise/UseCases.tsx
@@ -1,15 +1,14 @@
 import 'swiper/css'
 
-import React, { FC } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import Link from 'next/link'
-
-import { TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import Panel from '~/components/Panel'
-
 import type { LucideIcon } from 'lucide-react'
 import Image from 'next/image'
+import Link from 'next/link'
+import React, { FC } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { TextLink } from 'ui-patterns/TextLink'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import Panel from '@/components/Panel'
 
 interface Props {
   id: string
diff --git a/apps/www/components/EventCallout.tsx b/apps/www/components/EventCallout.tsx
index 8599d596982..7478baf5455 100644
--- a/apps/www/components/EventCallout.tsx
+++ b/apps/www/components/EventCallout.tsx
@@ -1,8 +1,10 @@
-import React, { PropsWithChildren } from 'react'
-import Link from 'next/link'
-import { cn, TextLink } from 'ui'
-import Panel from './Panel'
 import { ChevronRightIcon, VideoCameraIcon } from '@heroicons/react/solid'
+import Link from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
+
+import Panel from './Panel'
 
 interface Props {
   className?: string
diff --git a/apps/www/components/LaunchWeek/11/HackathonCallout.tsx b/apps/www/components/LaunchWeek/11/HackathonCallout.tsx
index 9eede3f04cb..22707e76aad 100644
--- a/apps/www/components/LaunchWeek/11/HackathonCallout.tsx
+++ b/apps/www/components/LaunchWeek/11/HackathonCallout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { TextLink, cn } from 'ui'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
 const HackathonCallout = ({ className }: { className?: string }) => {
   return (
diff --git a/apps/www/components/LaunchWeek/12/HackathonCallout.tsx b/apps/www/components/LaunchWeek/12/HackathonCallout.tsx
index 9eede3f04cb..22707e76aad 100644
--- a/apps/www/components/LaunchWeek/12/HackathonCallout.tsx
+++ b/apps/www/components/LaunchWeek/12/HackathonCallout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { TextLink, cn } from 'ui'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
 const HackathonCallout = ({ className }: { className?: string }) => {
   return (
diff --git a/apps/www/components/LaunchWeek/X/LWXMeetups.tsx b/apps/www/components/LaunchWeek/X/LWXMeetups.tsx
index 3eb92fb246a..055f036197d 100644
--- a/apps/www/components/LaunchWeek/X/LWXMeetups.tsx
+++ b/apps/www/components/LaunchWeek/X/LWXMeetups.tsx
@@ -1,8 +1,10 @@
+import { SupabaseClient } from '@supabase/supabase-js'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
-import { TextLink, cn } from 'ui'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
+
 import useConfData from '../hooks/use-conf-data'
-import { SupabaseClient } from '@supabase/supabase-js'
 
 export interface Meetup {
   id?: any
diff --git a/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx b/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx
index 55a393fd604..5cff3da1d06 100644
--- a/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx
+++ b/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react'
-import { mainDays as days } from './data'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import SectionContainer from '~/components/Layouts/SectionContainer'
 import DaySection from './components/DaySection'
-import { TextLink } from 'ui'
+import { mainDays as days } from './data'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 const MainStage: FC = () => (
   <SectionContainer className="relative !max-w-none !py-0 lg:!container" id="main-stage">
diff --git a/apps/www/components/Modules/Cron/CronSQLSection.tsx b/apps/www/components/Modules/Cron/CronSQLSection.tsx
index d7023d0d793..981fa6a6518 100644
--- a/apps/www/components/Modules/Cron/CronSQLSection.tsx
+++ b/apps/www/components/Modules/Cron/CronSQLSection.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react'
-import type { LucideIcon } from 'lucide-react'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import CodeWindow from '~/components/CodeWindow'
+import CodeWindow from '@/components/CodeWindow'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 const codeSnippet = `
 select
diff --git a/apps/www/components/Modules/Queues/QueuesAPISection.tsx b/apps/www/components/Modules/Queues/QueuesAPISection.tsx
index aa6d3761d2e..53941912920 100644
--- a/apps/www/components/Modules/Queues/QueuesAPISection.tsx
+++ b/apps/www/components/Modules/Queues/QueuesAPISection.tsx
@@ -1,8 +1,9 @@
 import React, { FC } from 'react'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import CodeWindow from '~/components/CodeWindow'
+import CodeWindow from '@/components/CodeWindow'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 const codeSnippet = `const queues = createClient(supabaseUrl, supabaseKey, {
     db: { schema: "pgmq_public" },
diff --git a/apps/www/components/Modules/Queues/QueuesSQLSection.tsx b/apps/www/components/Modules/Queues/QueuesSQLSection.tsx
index e99680ca5e5..f18985bcc82 100644
--- a/apps/www/components/Modules/Queues/QueuesSQLSection.tsx
+++ b/apps/www/components/Modules/Queues/QueuesSQLSection.tsx
@@ -1,8 +1,9 @@
 import React, { FC } from 'react'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import CodeWindow from '~/components/CodeWindow'
+import CodeWindow from '@/components/CodeWindow'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 const codeSnippet = `
 select pgmq.create('my_special_queue');
diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx
index c42206eca7a..3f368d868d6 100644
--- a/apps/www/components/Nav/MobileMenu.tsx
+++ b/apps/www/components/Nav/MobileMenu.tsx
@@ -1,9 +1,5 @@
 'use client'
 
-import staticContent from '.generated/staticContent/_index.json'
-import ProductModulesData from '~/data/ProductModules'
-import { DEFAULT_EASE } from '~/lib/animations'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
@@ -13,9 +9,14 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
-import { Accordion, Button, TextLink } from 'ui'
+import { Accordion, Button } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
 import MenuItem from './MenuItem'
+import staticContent from '@/.generated/staticContent/_index.json'
+import ProductModulesData from '@/data/ProductModules'
+import { DEFAULT_EASE } from '@/lib/animations'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 interface Props {
   open: boolean
diff --git a/apps/www/components/Nav/ProductDropdown.tsx b/apps/www/components/Nav/ProductDropdown.tsx
index 83e0e586a76..e3b82c7e4a3 100644
--- a/apps/www/components/Nav/ProductDropdown.tsx
+++ b/apps/www/components/Nav/ProductDropdown.tsx
@@ -1,19 +1,18 @@
 'use client'
 
-import React from 'react'
+import { useBreakpoint } from 'common'
+import { ChevronRight, Sparkles } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ChevronRight, Sparkles } from 'lucide-react'
+import React from 'react'
+import { NavigationMenuLink } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { useBreakpoint } from 'common'
-import { TextLink } from 'ui'
-import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
 import MenuItem from './MenuItem'
-
-import ComparisonsData from 'data/Comparisons'
-import CustomersData from 'data/CustomerStories'
-import MainProductsData from 'data/MainProducts'
-import ProductModulesData from 'data/ProductModules'
+import ComparisonsData from '@/data/Comparisons'
+import CustomersData from '@/data/CustomerStories'
+import MainProductsData from '@/data/MainProducts'
+import ProductModulesData from '@/data/ProductModules'
 
 export const ProductDropdown = () => {
   const isTablet = useBreakpoint(1279)
diff --git a/apps/www/components/NewFeatureCard.tsx b/apps/www/components/NewFeatureCard.tsx
index 767939cc4f4..ea7de84d346 100644
--- a/apps/www/components/NewFeatureCard.tsx
+++ b/apps/www/components/NewFeatureCard.tsx
@@ -1,7 +1,9 @@
 import { Check } from 'lucide-react'
 import Link from 'next/link'
-import { Badge, Button, ButtonProps, Image } from 'ui'
-import Panel from '~/components/Panel'
+import { Badge, Button, ButtonProps } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import Panel from '@/components/Panel'
 
 export interface CardProps {
   title: string
diff --git a/apps/www/components/Realtime/example-layout.tsx b/apps/www/components/Realtime/example-layout.tsx
index 1994796698b..1f82fedb021 100644
--- a/apps/www/components/Realtime/example-layout.tsx
+++ b/apps/www/components/Realtime/example-layout.tsx
@@ -1,8 +1,11 @@
 'use client'
-import SandpackWrapper from './sandpack'
-import { Button, CodeBlock } from 'ui'
-import { useState } from 'react'
+
 import { ChevronLeft, ChevronRight, Code, Eye } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
+import SandpackWrapper from './sandpack'
 
 export type ExampleLayoutProps = {
   appJsCode: string
diff --git a/apps/www/components/Sections/ImageParagraphSection.tsx b/apps/www/components/Sections/ImageParagraphSection.tsx
index 1c856a84c04..d4dc082b4a9 100644
--- a/apps/www/components/Sections/ImageParagraphSection.tsx
+++ b/apps/www/components/Sections/ImageParagraphSection.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface Props {
   id: string
diff --git a/apps/www/components/Solutions/CTAForm.tsx b/apps/www/components/Solutions/CTAForm.tsx
index 736b48f6cf8..4c24c880d7e 100644
--- a/apps/www/components/Solutions/CTAForm.tsx
+++ b/apps/www/components/Solutions/CTAForm.tsx
@@ -1,7 +1,9 @@
 import React, { FC } from 'react'
-import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import TalkToPartnershipTeamForm from '~/components/Forms/TalkToPartnershipTeamForm'
+import { cn } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
+
+import TalkToPartnershipTeamForm from '@/components/Forms/TalkToPartnershipTeamForm'
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface Props {}
 
diff --git a/apps/www/components/Solutions/CtaSection.tsx b/apps/www/components/Solutions/CtaSection.tsx
index a73aa95a006..a773333ec60 100644
--- a/apps/www/components/Solutions/CtaSection.tsx
+++ b/apps/www/components/Solutions/CtaSection.tsx
@@ -1,7 +1,8 @@
 import Link from 'next/link'
 import React from 'react'
-import { Button, cn, Image } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
+import { Button, cn } from 'ui'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface Props {
   id: string
diff --git a/apps/www/components/Solutions/DeveloperExperienceSection.tsx b/apps/www/components/Solutions/DeveloperExperienceSection.tsx
index 1c5a4a3fff1..ae68be05e48 100644
--- a/apps/www/components/Solutions/DeveloperExperienceSection.tsx
+++ b/apps/www/components/Solutions/DeveloperExperienceSection.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import { cn, Image } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import { Badge } from 'ui'
-import { Check, X } from 'lucide-react'
+import { cn } from 'ui'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface Feature {
   id?: string
diff --git a/apps/www/components/Solutions/TwoColumnsSection.tsx b/apps/www/components/Solutions/TwoColumnsSection.tsx
index 5054d4f8691..b70ba7dcd86 100644
--- a/apps/www/components/Solutions/TwoColumnsSection.tsx
+++ b/apps/www/components/Solutions/TwoColumnsSection.tsx
@@ -1,8 +1,10 @@
-import React, { useState } from 'react'
-import Link from 'next/link'
 import { ArrowUpRight, Check, Copy } from 'lucide-react'
-import { Button, cn, TextLink, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import SectionContainer from 'components/Layouts/SectionContainer'
+import Link from 'next/link'
+import React, { useState } from 'react'
+import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface AIPrompt {
   id: string
diff --git a/apps/www/components/Supasquad/CtaSection.tsx b/apps/www/components/Supasquad/CtaSection.tsx
index a73aa95a006..a773333ec60 100644
--- a/apps/www/components/Supasquad/CtaSection.tsx
+++ b/apps/www/components/Supasquad/CtaSection.tsx
@@ -1,7 +1,8 @@
 import Link from 'next/link'
 import React from 'react'
-import { Button, cn, Image } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
+import { Button, cn } from 'ui'
+
+import SectionContainer from '@/components/Layouts/SectionContainer'
 
 interface Props {
   id: string
diff --git a/apps/www/data/aws-reinvent-2025.tsx b/apps/www/data/aws-reinvent-2025.tsx
index 63b3cfe9764..6df8332fd7a 100644
--- a/apps/www/data/aws-reinvent-2025.tsx
+++ b/apps/www/data/aws-reinvent-2025.tsx
@@ -1,10 +1,10 @@
-import { Calendar, MapPin, Users, Sparkles, Gift, MessageSquare, Timer, Check } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import { Check } from 'lucide-react'
 import dynamic from 'next/dynamic'
-import MainProducts from './MainProducts'
 import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { SITE_ORIGIN } from '~/lib/constants'
+import { Image } from 'ui-patterns/Image'
+
+import MainProducts from './MainProducts'
+import { SITE_ORIGIN } from '@/lib/constants'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/open-source/contributing/supasquad.tsx b/apps/www/data/open-source/contributing/supasquad.tsx
index 700b81e40d9..6b5b7dbd536 100644
--- a/apps/www/data/open-source/contributing/supasquad.tsx
+++ b/apps/www/data/open-source/contributing/supasquad.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
 export const data = {
   metadata: {
diff --git a/apps/www/data/products/modules/cron.tsx b/apps/www/data/products/modules/cron.tsx
index 17bcd2453f9..9eba10103f6 100644
--- a/apps/www/data/products/modules/cron.tsx
+++ b/apps/www/data/products/modules/cron.tsx
@@ -1,7 +1,8 @@
 // import Image from 'next/image'
 import { PRODUCT_MODULES } from 'shared-data/products'
-import BrowserFrame from '~/components/BrowserFrame'
-import { Image } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import BrowserFrame from '@/components/BrowserFrame'
 
 export default () => ({
   metaTitle: 'Supabase Cron | Schedule Recurring Jobs in Postgres',
diff --git a/apps/www/data/products/modules/queues.tsx b/apps/www/data/products/modules/queues.tsx
index ae5253b07b6..24d0645b2d4 100644
--- a/apps/www/data/products/modules/queues.tsx
+++ b/apps/www/data/products/modules/queues.tsx
@@ -1,6 +1,7 @@
 import { PRODUCT_MODULES } from 'shared-data/products'
-import BrowserFrame from '~/components/BrowserFrame'
-import { Image } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import BrowserFrame from '@/components/BrowserFrame'
 
 export default () => ({
   metaTitle: 'Supabase Queues | Durable Message Queues with Guaranteed Delivery',
diff --git a/apps/www/data/solutions/agencies.tsx b/apps/www/data/solutions/agencies.tsx
index d07347f33fd..157b1cd7e6f 100644
--- a/apps/www/data/solutions/agencies.tsx
+++ b/apps/www/data/solutions/agencies.tsx
@@ -1,10 +1,9 @@
-import dynamic from 'next/dynamic'
+import { CubeIcon } from '@heroicons/react/outline'
 import {
   ArrowLeftRight,
   Check,
   ClipboardCheck,
   FolderLock,
-  Globe2,
   HeartPulse,
   InfoIcon,
   Lightbulb,
@@ -17,30 +16,29 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
 
+import { companyStats } from '../company-stats'
 import MainProducts from '../MainProducts'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { TwoColumnsSectionProps } from 'components/Solutions/TwoColumnsSection'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
 import {
   FrameworkLink,
+  getEditors,
   type FeaturesSection,
   type FrameworkLinkProps,
   type HeroSection,
   type Metadata,
   type Quotes,
-  getEditors,
 } from './solutions.utils'
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { companyStats } from '../company-stats'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import type { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/agents.tsx b/apps/www/data/solutions/agents.tsx
index 3154dd3c4c6..8b4dcd2651e 100644
--- a/apps/www/data/solutions/agents.tsx
+++ b/apps/www/data/solutions/agents.tsx
@@ -1,3 +1,4 @@
+import { CubeIcon } from '@heroicons/react/outline'
 import {
   Check,
   ClipboardCheck,
@@ -11,25 +12,22 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
+import { Image } from 'ui-patterns/Image'
 
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
+import { getSharedSections } from './shared-sections'
 import {
   FrameworkLink,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-import { getSharedSections } from './shared-sections'
-import { Image } from 'ui'
-
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const data: () => {
   metadata: Metadata
diff --git a/apps/www/data/solutions/ai-builders.tsx b/apps/www/data/solutions/ai-builders.tsx
index cd0247c1529..76bd484e1cb 100644
--- a/apps/www/data/solutions/ai-builders.tsx
+++ b/apps/www/data/solutions/ai-builders.tsx
@@ -1,6 +1,6 @@
-import { Timer } from 'lucide-react'
 import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import { Timer } from 'lucide-react'
+
 import type {
   CTASection,
   FeaturesSection,
diff --git a/apps/www/data/solutions/b2b-saas.tsx b/apps/www/data/solutions/b2b-saas.tsx
index 02c1abec0f5..e3e785aa464 100644
--- a/apps/www/data/solutions/b2b-saas.tsx
+++ b/apps/www/data/solutions/b2b-saas.tsx
@@ -1,4 +1,5 @@
-import dynamic from 'next/dynamic'
+import { CubeIcon } from '@heroicons/react/outline'
+import { useBreakpoint } from 'common'
 import {
   Check,
   ClipboardCheck,
@@ -12,26 +13,22 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
+import { getSharedSections } from './shared-sections'
 import {
   FrameworkLink,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-import { getSharedSections } from './shared-sections'
-
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const data: () => {
   metadata: Metadata
diff --git a/apps/www/data/solutions/beginners.tsx b/apps/www/data/solutions/beginners.tsx
index cd9b89ee030..ae065ca9a71 100644
--- a/apps/www/data/solutions/beginners.tsx
+++ b/apps/www/data/solutions/beginners.tsx
@@ -1,16 +1,14 @@
 import { CubeIcon } from '@heroicons/react/outline'
+import { useBreakpoint } from 'common'
 import { Check, Sparkles, Timer } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { Button, cn, IconDiscord, Image } from 'ui'
+import { topTweets } from 'shared-data'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Button, cn, IconDiscord } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
-import { frameworks } from 'components/Hero/HeroFrameworks'
 import MainProducts from '../MainProducts'
-
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { TwitterSocialSectionProps } from 'components/TwitterSocialSection'
-import type { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
 import {
   FrameworkLink,
   getEditors,
@@ -18,11 +16,12 @@ import {
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
-import { topTweets } from 'shared-data'
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import type { TwitterSocialSectionProps } from '@/components/TwitterSocialSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const ComputePricingCalculator = dynamic(
diff --git a/apps/www/data/solutions/developers.tsx b/apps/www/data/solutions/developers.tsx
index 87cea843905..e560f21a0ad 100644
--- a/apps/www/data/solutions/developers.tsx
+++ b/apps/www/data/solutions/developers.tsx
@@ -1,4 +1,5 @@
-import dynamic from 'next/dynamic'
+import { CubeIcon } from '@heroicons/react/outline'
+import { useBreakpoint } from 'common'
 import {
   Check,
   ClipboardCheck,
@@ -15,33 +16,29 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
 
 import MainProducts from '../MainProducts'
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
 import {
   FrameworkLink,
-  type FrameworkLinkProps,
+  getEditors,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
-  getEditors,
 } from './solutions.utils'
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
-import { companyStats } from 'data/company-stats'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { companyStats } from '@/data/company-stats'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/finserv.tsx b/apps/www/data/solutions/finserv.tsx
index 7f2814aa49d..82252d8946c 100644
--- a/apps/www/data/solutions/finserv.tsx
+++ b/apps/www/data/solutions/finserv.tsx
@@ -11,26 +11,24 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
 
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
+import MainProducts from '../MainProducts'
+import { getSharedSections } from './shared-sections'
 import {
   FrameworkLink,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-import { getSharedSections } from './shared-sections'
-import MainProducts from '../MainProducts'
-import { Image } from 'ui'
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const data: () => {
   metadata: Metadata
diff --git a/apps/www/data/solutions/firebase.tsx b/apps/www/data/solutions/firebase.tsx
index dd05519e2bc..1e63896fa28 100644
--- a/apps/www/data/solutions/firebase.tsx
+++ b/apps/www/data/solutions/firebase.tsx
@@ -1,29 +1,30 @@
-import { cn, Image } from 'ui'
-import dynamic from 'next/dynamic'
 import { CubeIcon } from '@heroicons/react/outline'
 import {
   ArrowRight,
   ArrowUpRight,
-  Timer,
-  Lock,
-  ShieldCheck,
-  Users,
-  UserX,
+  Check,
+  ClipboardCheck,
   FolderLock,
+  HeartPulse,
+  InfoIcon,
   Lightbulb,
   List,
-  ClipboardCheck,
+  Lock,
   ShieldAlert,
-  HeartPulse,
-  Check,
-  InfoIcon,
+  ShieldCheck,
+  Timer,
+  Users,
+  UserX,
 } from 'lucide-react'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-
-import MainProducts from 'data/MainProducts'
+import dynamic from 'next/dynamic'
 import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { companyStats } from 'data/company-stats'
-import { MobbinLogo } from '~/components/BrandLogo'
+import { cn } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import { MobbinLogo } from '@/components/BrandLogo'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import { companyStats } from '@/data/company-stats'
+import MainProducts from '@/data/MainProducts'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/hackathon.tsx b/apps/www/data/solutions/hackathon.tsx
index 17a34e4469f..bd757355be9 100644
--- a/apps/www/data/solutions/hackathon.tsx
+++ b/apps/www/data/solutions/hackathon.tsx
@@ -1,50 +1,26 @@
-import dynamic from 'next/dynamic'
-import {
-  ArrowLeftRight,
-  Check,
-  ClipboardCheck,
-  FolderLock,
-  Globe2,
-  HeartPulse,
-  InfoIcon,
-  Lightbulb,
-  List,
-  Lock,
-  ShieldAlert,
-  ShieldCheck,
-  Sparkles,
-  Timer,
-  Users,
-  UserX,
-} from 'lucide-react'
 import { CubeIcon } from '@heroicons/react/outline'
-import { Image } from 'ui'
+import { useBreakpoint } from 'common'
+import { Check, InfoIcon, Sparkles, Timer } from 'lucide-react'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
 
 import MainProducts from '../MainProducts'
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
 import {
   FrameworkLink,
-  type FrameworkLinkProps,
+  getEditors,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
-  getEditors,
 } from './solutions.utils'
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
-import { companyStats } from 'data/company-stats'
-import { DerivLogo, SoshiLogo } from '~/components/BrandLogo'
+import { SoshiLogo } from '@/components/BrandLogo'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/healthcare.tsx b/apps/www/data/solutions/healthcare.tsx
index 1ad9be32e7c..d0a21a58f72 100644
--- a/apps/www/data/solutions/healthcare.tsx
+++ b/apps/www/data/solutions/healthcare.tsx
@@ -10,25 +10,23 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
+import { Image } from 'ui-patterns/Image'
 
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { WhatItTakesSectionProps } from 'components/Solutions/WhatItTakesSection'
+import { getSharedSections } from './shared-sections'
 import {
   FrameworkLink,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-import { getSharedSections } from './shared-sections'
-import { Image } from 'ui'
-
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import type { WhatItTakesSectionProps } from '@/components/Solutions/WhatItTakesSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const data: () => {
   metadata: Metadata
diff --git a/apps/www/data/solutions/innovation-teams.tsx b/apps/www/data/solutions/innovation-teams.tsx
index 5d1b6e707ae..79dd69b5128 100644
--- a/apps/www/data/solutions/innovation-teams.tsx
+++ b/apps/www/data/solutions/innovation-teams.tsx
@@ -1,15 +1,5 @@
 import { CubeIcon } from '@heroicons/react/outline'
 import { useBreakpoint } from 'common'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import { companyStats } from 'data/company-stats'
-import { useSendTelemetryEvent } from 'lib/telemetry'
 import {
   ArrowLeftRight,
   Check,
@@ -17,7 +7,6 @@ import {
   FolderLock,
   Globe2,
   HeartPulse,
-  InfoIcon,
   Lightbulb,
   List,
   Lock,
@@ -25,23 +14,28 @@ import {
   ShieldCheck,
   Sparkles,
   Timer,
-  UserX,
   Users,
+  UserX,
 } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { Image } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
 import MainProducts from '../MainProducts'
 import {
-  type FeaturesSection,
   FrameworkLink,
-  type FrameworkLinkProps,
+  getEditors,
+  type FeaturesSection,
   type HeroSection,
   type Metadata,
-  getEditors,
 } from './solutions.utils'
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { companyStats } from '@/data/company-stats'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/neon.tsx b/apps/www/data/solutions/neon.tsx
index 7c9c791b1cb..8bc75d2d414 100644
--- a/apps/www/data/solutions/neon.tsx
+++ b/apps/www/data/solutions/neon.tsx
@@ -1,29 +1,30 @@
-import { cn, Image } from 'ui'
-import dynamic from 'next/dynamic'
 import { CubeIcon } from '@heroicons/react/outline'
 import {
   ArrowRight,
   ArrowUpRight,
-  Timer,
-  Lock,
-  ShieldCheck,
-  Users,
-  UserX,
+  Check,
+  ClipboardCheck,
   FolderLock,
+  HeartPulse,
+  InfoIcon,
   Lightbulb,
   List,
-  ClipboardCheck,
+  Lock,
   ShieldAlert,
-  HeartPulse,
-  Check,
-  InfoIcon,
+  ShieldCheck,
+  Timer,
+  Users,
+  UserX,
 } from 'lucide-react'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-
-import MainProducts from 'data/MainProducts'
+import dynamic from 'next/dynamic'
 import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { companyStats } from 'data/company-stats'
-import { DerivLogo } from '~/components/BrandLogo'
+import { cn } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import { DerivLogo } from '@/components/BrandLogo'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import { companyStats } from '@/data/company-stats'
+import MainProducts from '@/data/MainProducts'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/no-code.tsx b/apps/www/data/solutions/no-code.tsx
index 0e30f4f07a5..b4b4f33444d 100644
--- a/apps/www/data/solutions/no-code.tsx
+++ b/apps/www/data/solutions/no-code.tsx
@@ -1,16 +1,14 @@
-import dynamic from 'next/dynamic'
 import { Check, PointerIcon, TrendingUp, ZapIcon } from 'lucide-react'
-import { cn, Image } from 'ui'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { cn } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
 import MainProducts from '../MainProducts'
-
-import type { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
-import type { FeaturesSection, HeroSection, Metadata } from './solutions.utils'
-import type { Quotes } from './solutions.utils'
-
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import type { FeaturesSection, HeroSection, Metadata, Quotes } from './solutions.utils'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const ComputePricingCalculator = dynamic(
diff --git a/apps/www/data/solutions/postgres-developers.tsx b/apps/www/data/solutions/postgres-developers.tsx
index a924451a079..aecdb3b329e 100644
--- a/apps/www/data/solutions/postgres-developers.tsx
+++ b/apps/www/data/solutions/postgres-developers.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import dynamic from 'next/dynamic'
+import { CubeIcon } from '@heroicons/react/outline'
+import { useBreakpoint } from 'common'
 import {
   Check,
   ClipboardCheck,
@@ -16,36 +16,33 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { cn, Image, Input_Shadcn_, Switch } from 'ui'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { cn, Input_Shadcn_, Switch } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
 import MainProducts from '../MainProducts'
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-import Logos from 'components/logos'
-
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
 import {
   FrameworkLink,
   getEditors,
   type FeaturesSection,
-  type FrameworkLinkProps,
   type HeroSection,
   type Metadata,
 } from './solutions.utils'
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
-import { companyStats } from 'data/company-stats'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import Logos from '@/components/logos'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { companyStats } from '@/data/company-stats'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
-const DatabaseVisual = dynamic(() => import('components/Products/DatabaseVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
 const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual'))
 const RealtimeLogs = dynamic(() => import('components/Products/Functions/RealtimeLogs'))
diff --git a/apps/www/data/solutions/startups.tsx b/apps/www/data/solutions/startups.tsx
index 61493118c50..72969028287 100644
--- a/apps/www/data/solutions/startups.tsx
+++ b/apps/www/data/solutions/startups.tsx
@@ -1,4 +1,5 @@
-import dynamic from 'next/dynamic'
+import { CubeIcon } from '@heroicons/react/outline'
+import { useBreakpoint } from 'common'
 import {
   Check,
   ClipboardCheck,
@@ -15,33 +16,29 @@ import {
   Users,
   UserX,
 } from 'lucide-react'
-import { CubeIcon } from '@heroicons/react/outline'
-import { cn, IconPartners, Image } from 'ui'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
 
+import { companyStats } from '../company-stats'
 import MainProducts from '../MainProducts'
-import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
-import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
-import { frameworks } from 'components/Hero/HeroFrameworks'
-
-import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
-import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
-import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
 import {
   FrameworkLink,
-  type FrameworkLinkProps,
+  getEditors,
   type FeaturesSection,
   type HeroSection,
   type Metadata,
-  getEditors,
 } from './solutions.utils'
-import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
-import type { SecuritySectionProps } from 'components/Enterprise/Security'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { useBreakpoint } from 'common'
-import { useSendTelemetryEvent } from 'lib/telemetry'
-import { companyStats } from '../company-stats'
+import type { SecuritySectionProps } from '@/components/Enterprise/Security'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
+import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
+import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
+import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
+import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
+import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
diff --git a/apps/www/data/solutions/vibe-coders.tsx b/apps/www/data/solutions/vibe-coders.tsx
index e201423c59c..2b597fdb871 100644
--- a/apps/www/data/solutions/vibe-coders.tsx
+++ b/apps/www/data/solutions/vibe-coders.tsx
@@ -1,5 +1,10 @@
-import { Timer, Zap, CheckCircle, Check, Sparkles } from 'lucide-react'
-import { Button, Image } from 'ui'
+import { useBreakpoint } from 'common'
+import { Check, CheckCircle, Sparkles, Timer, Zap } from 'lucide-react'
+import dynamic from 'next/dynamic'
+import { PRODUCT_SHORTNAMES } from 'shared-data/products'
+import { Image } from 'ui-patterns/Image'
+
+import MainProducts from '../MainProducts'
 import type {
   FeaturesSection,
   HeroSection,
@@ -7,14 +12,9 @@ import type {
   PostGridProps,
   Quotes,
 } from './solutions.utils'
-import dynamic from 'next/dynamic'
-
-import MainProducts from '../MainProducts'
-import { PRODUCT_SHORTNAMES } from 'shared-data/products'
-import { frameworks } from 'components/Hero/HeroFrameworks'
 import { FrameworkLink, getEditors } from './solutions.utils'
-import type { MPCSectionProps } from 'components/Solutions/MPCSection'
-import { useBreakpoint } from 'common'
+import { frameworks } from '@/components/Hero/HeroFrameworks'
+import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
 
 const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
 const ComputePricingCalculator = dynamic(
diff --git a/apps/www/lib/mdx/mdxComponents.tsx b/apps/www/lib/mdx/mdxComponents.tsx
index 7abff78971b..584117c9839 100644
--- a/apps/www/lib/mdx/mdxComponents.tsx
+++ b/apps/www/lib/mdx/mdxComponents.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import { CH } from '@code-hike/mdx/components'
-import dynamic from 'next/dynamic'
 import { ArrowUpRight, Triangle } from 'lucide-react'
+import dynamic from 'next/dynamic'
+import type { PropsWithChildren } from 'react'
 import {
   Badge,
   cn,
@@ -10,12 +11,10 @@ import {
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
   Heading,
-  Image,
-  Mermaid,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
-import type { PropsWithChildren } from 'react'
-import type { ImageProps } from 'ui/src/components/Image/Image'
+import { Image, type ImageProps } from 'ui-patterns/Image'
+import { Mermaid } from 'ui-patterns/Mermaid'
 
 const Avatar = dynamic(() => import('~/components/Avatar'))
 const Chart = dynamic(() => import('~/components/Charts/PGCharts'))
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 0d8b054ee6c..8125ced851e 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -2,8 +2,6 @@ import '@code-hike/mdx/styles.css'
 import 'config/code-hike.scss'
 import '../styles/index.css'
 
-import { WwwCommandMenu } from '~/components/CommandMenu'
-import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION } from '~/lib/constants'
 import {
   AuthProvider,
   FeatureFlagProvider,
@@ -22,12 +20,15 @@ import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { SonnerToaster, themes, TooltipProvider } from 'ui'
+import { themes, TooltipProvider } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { useConsentToast } from 'ui-patterns/consent'
 
 import useDarkLaunchWeeks from '../hooks/useDarkLaunchWeeks'
 import { useWwwCommandMenuTelemetry } from '../hooks/useWwwCommandMenuTelemetry'
+import { Toaster } from '@/app/toaster'
+import { WwwCommandMenu } from '@/components/CommandMenu'
+import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION } from '@/lib/constants'
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter()
@@ -100,7 +101,7 @@ export default function App({ Component, pageProps }: AppProps) {
             >
               <TooltipProvider delayDuration={0}>
                 <CommandProvider app="www" onTelemetry={onTelemetry}>
-                  <SonnerToaster position="top-right" />
+                  <Toaster />
                   <Component {...pageProps} />
                   <WwwCommandMenu />
                   <PageTelemetry
diff --git a/apps/www/pages/auth.tsx b/apps/www/pages/auth.tsx
index 8147f56cf60..fcf65ee5609 100644
--- a/apps/www/pages/auth.tsx
+++ b/apps/www/pages/auth.tsx
@@ -1,23 +1,23 @@
-import ApiExamples from 'data/products/auth/auth-api-examples'
-import AuthSqlRulesExamples from 'data/products/auth/auth-sql-rules-examples'
+import { useBreakpoint } from 'common'
 import { ArrowUpRight, Briefcase, Eye, Link as IconLink, Shield } from 'lucide-react'
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
 import NextImage from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Button, Image } from 'ui'
-import { useBreakpoint } from 'common'
-
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import ProductsNav from '~/components/Products/ProductsNav'
-import ProductHeader from '~/components/Sections/ProductHeader'
-import EventCallout from '~/components/EventCallout'
-
-import MainProducts from '~/data/MainProducts'
 import { PRODUCT_NAMES } from 'shared-data/products'
-import AuthProviders from '~/data/auth.json'
+import { Button } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import EventCallout from '@/components/EventCallout'
+import DefaultLayout from '@/components/Layouts/Default'
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import ProductsNav from '@/components/Products/ProductsNav'
+import ProductHeader from '@/components/Sections/ProductHeader'
+import AuthProviders from '@/data/auth.json'
+import MainProducts from '@/data/MainProducts'
+import ApiExamples from '@/data/products/auth/auth-api-examples'
+import AuthSqlRulesExamples from '@/data/products/auth/auth-sql-rules-examples'
 
 const SplitCodeBlockCarousel = dynamic(
   () => import('~/components/Carousels/SplitCodeBlockCarousel')
diff --git a/apps/www/pages/database.tsx b/apps/www/pages/database.tsx
index 5668940a248..78ea6d561f1 100644
--- a/apps/www/pages/database.tsx
+++ b/apps/www/pages/database.tsx
@@ -1,29 +1,28 @@
 // Import Swiper styles
 import 'swiper/css'
 
+import { ArrowUpRight, X } from 'lucide-react'
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
 import NextImage from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Badge, Button, Image, Tabs } from 'ui'
-
-// data
-import ApiExamplesData from 'data/products/database/api-examples'
-import ExtensionsExamplesData from 'data/products/database/extensions-examples'
-import SqlViewCarouselData from 'data/products/database/sql-view-carousel.json'
-import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
-import MainProducts from '~/data/MainProducts'
-import HighlightsCards from '~/data/products/database/highlight-cards'
-
-import { ArrowUpRight, X } from 'lucide-react'
 import { PRODUCT_NAMES } from 'shared-data/products'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Badge, Button, Tabs } from 'ui'
+import { Image } from 'ui-patterns/Image'
 import { TweetCard } from 'ui-patterns/TweetCard'
-import ProductsNav from '~/components/Products/ProductsNav'
-import ProductHeader from '~/components/Sections/ProductHeader'
-import { ETLVisual } from '~/data/products/database/etl-visual'
+
+import ProductsNav from '@/components/Products/ProductsNav'
+import ProductHeader from '@/components/Sections/ProductHeader'
+import MainProducts from '@/data/MainProducts'
+import ApiExamplesData from '@/data/products/database/api-examples'
+import { ETLVisual } from '@/data/products/database/etl-visual'
+import ExtensionsExamplesData from '@/data/products/database/extensions-examples'
+import HighlightsCards from '@/data/products/database/highlight-cards'
+import SqlViewCarouselData from '@/data/products/database/sql-view-carousel.json'
+import TableViewCarouselData from '@/data/products/database/table-view-carousel.json'
 
 const NewFeatureCard = dynamic(() => import('~/components/NewFeatureCard'))
 const ImageCarousel = dynamic(() => import('~/components/Carousels/ImageCarousel'))
diff --git a/apps/www/pages/events/[slug].tsx b/apps/www/pages/events/[slug].tsx
index 15482eafbcb..1c69fe6e4a4 100644
--- a/apps/www/pages/events/[slug].tsx
+++ b/apps/www/pages/events/[slug].tsx
@@ -4,35 +4,32 @@ import {
   MicrophoneIcon,
   VideoCameraIcon,
 } from '@heroicons/react/solid'
+import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
+import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
 import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
 import matter from 'gray-matter'
 import { ChevronLeft, X as XIcon } from 'lucide-react'
+import type { GetStaticProps, InferGetStaticPropsType } from 'next'
 import { MDXRemote } from 'next-mdx-remote'
 import { NextSeo } from 'next-seo'
 import NextImage from 'next/image'
 import Link from 'next/link'
+import { Button } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
-import authors from 'lib/authors.json'
-import { capitalize, isNotNullOrUndefined } from '~/lib/helpers'
-import mdxComponents from '~/lib/mdx/mdxComponents'
-import { mdxSerialize } from '~/lib/mdx/mdxSerialize'
-import { getAllPostSlugs, getPostdata } from '~/lib/posts'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
-
-import advancedFormat from 'dayjs/plugin/advancedFormat'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
-
-import { Button, Image } from 'ui'
-import ShareArticleActions from '~/components/Blog/ShareArticleActions'
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-
-import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
-import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
-import type Author from '~/types/author'
+import ShareArticleActions from '@/components/Blog/ShareArticleActions'
+import DefaultLayout from '@/components/Layouts/Default'
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import authors from '@/lib/authors.json'
+import { capitalize, isNotNullOrUndefined } from '@/lib/helpers'
+import mdxComponents from '@/lib/mdx/mdxComponents'
+import { mdxSerialize } from '@/lib/mdx/mdxSerialize'
+import { getAllPostSlugs, getPostdata } from '@/lib/posts'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
+import type Author from '@/types/author'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
diff --git a/apps/www/pages/features/[slug].tsx b/apps/www/pages/features/[slug].tsx
index 9113cdcd10b..4399be9b95b 100644
--- a/apps/www/pages/features/[slug].tsx
+++ b/apps/www/pages/features/[slug].tsx
@@ -3,16 +3,16 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 import ReactMarkdown from 'react-markdown'
+import { Badge, Button, cn } from 'ui'
+import { Image } from 'ui-patterns/Image'
 
-import { Badge, Button, cn, Image } from 'ui'
-import ShareArticleActions from '~/components/Blog/ShareArticleActions'
-import CTABanner from '~/components/CTABanner'
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import PrevNextFeatureNav from '~/components/PrevNextFeatureNav'
-
-import type { FeatureType } from '~/data/features'
-import { features } from '~/data/features'
+import ShareArticleActions from '@/components/Blog/ShareArticleActions'
+import CTABanner from '@/components/CTABanner'
+import DefaultLayout from '@/components/Layouts/Default'
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import PrevNextFeatureNav from '@/components/PrevNextFeatureNav'
+import { features } from '@/data/features'
+import type { FeatureType } from '@/data/features'
 
 interface FeaturePageProps {
   feature: FeatureType
diff --git a/apps/www/pages/partners/index.tsx b/apps/www/pages/partners/index.tsx
index 10e928bf3e3..268405b7f86 100644
--- a/apps/www/pages/partners/index.tsx
+++ b/apps/www/pages/partners/index.tsx
@@ -1,18 +1,18 @@
-import { range } from 'lib/helpers'
+import { useBreakpoint } from 'common'
+import { Code } from 'lucide-react'
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { Badge, Button } from 'ui'
+import { TextLink } from 'ui-patterns/TextLink'
 
-import { useBreakpoint } from 'common'
-import { Badge, Button, TextLink } from 'ui'
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import Panel from '~/components/Panel'
-import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered'
-
-import pageData from '~/data/partners'
-import { Code } from 'lucide-react'
+import DefaultLayout from '@/components/Layouts/Default'
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import Panel from '@/components/Panel'
+import ProductHeaderCentered from '@/components/Sections/ProductHeaderCentered'
+import pageData from '@/data/partners'
+import { range } from '@/lib/helpers'
 
 const Partners = () => {
   const router = useRouter()
diff --git a/apps/www/pages/storage.tsx b/apps/www/pages/storage.tsx
index 03c3993ab39..80a231a1293 100644
--- a/apps/www/pages/storage.tsx
+++ b/apps/www/pages/storage.tsx
@@ -1,21 +1,23 @@
-import ApiExamples from 'data/products/storage/api-examples'
-import DashboardViewData from 'data/products/storage/dashboard-carousel.json'
-import StoragePermissionsData from 'data/products/storage/permissions-examples'
-import Solutions from '~/data/MainProducts'
 import { ArrowUpRight, Shuffle, Wifi, X } from 'lucide-react'
 import { NextSeo } from 'next-seo'
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { PRODUCT_NAMES } from 'shared-data/products'
-import { Button, Image } from 'ui'
-import ImageCarousel from '~/components/Carousels/ImageCarousel'
-import FeatureColumn from '~/components/FeatureColumn'
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import ProductIcon from '~/components/ProductIcon'
-import ProductsNav from '~/components/Products/ProductsNav'
-import ProductHeader from '~/components/Sections/ProductHeader'
-import dynamic from 'next/dynamic'
+import { Button } from 'ui'
+import { Image } from 'ui-patterns/Image'
+
+import ImageCarousel from '@/components/Carousels/ImageCarousel'
+import FeatureColumn from '@/components/FeatureColumn'
+import DefaultLayout from '@/components/Layouts/Default'
+import SectionContainer from '@/components/Layouts/SectionContainer'
+import ProductIcon from '@/components/ProductIcon'
+import ProductsNav from '@/components/Products/ProductsNav'
+import ProductHeader from '@/components/Sections/ProductHeader'
+import Solutions from '@/data/MainProducts'
+import ApiExamples from '@/data/products/storage/api-examples'
+import DashboardViewData from '@/data/products/storage/dashboard-carousel.json'
+import StoragePermissionsData from '@/data/products/storage/permissions-examples'
 
 const APISection = dynamic(() => import('~/components/Sections/APISection'))
 const SingleQuote = dynamic(() => import('~/components/Sections/SingleQuote'))
diff --git a/packages/ui-patterns/index.tsx b/packages/ui-patterns/index.tsx
index f0bcf7d138e..8a2eb48ea6b 100644
--- a/packages/ui-patterns/index.tsx
+++ b/packages/ui-patterns/index.tsx
@@ -5,9 +5,7 @@
  * DO NOT add new components to this file.
  */
 export * from './src/admonition'
-export * from './src/AssistantChat/AssistantChatForm'
 export * from './src/AuthenticatedDropdownMenu'
-export * from './src/Banners'
 export * from './src/Chart'
 export * from './src/CommandMenu'
 export * from './src/ComputeBadge'
@@ -15,13 +13,10 @@ export * from './src/EmptyStatePresentational'
 export * from './src/FilterBar'
 export * from './src/GlassPanel'
 export * from './src/InnerSideMenu'
-export * from './src/McpUrlBuilder'
 export * from './src/MobileSheetNav'
 export * from './src/PageContainer'
 export * from './src/PageHeader'
 export * from './src/PageSection'
-export * from './src/PopupFrame'
-export * from './src/PromoToast'
 export * from './src/Row'
 export * from './src/ShimmeringLoader'
 export * from './src/StatusCode'
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index 3fc471fb16c..69f5049aae3 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -34,6 +34,10 @@
       "import": "./src/AuthenticatedDropdownMenu/index.tsx",
       "types": "./src/AuthenticatedDropdownMenu/index.tsx"
     },
+    "./Banners/Announcement": {
+      "import": "./src/Banners/Announcement.tsx",
+      "types": "./src/Banners/Announcement.tsx"
+    },
     "./Banners/AnnouncementBanner": {
       "import": "./src/Banners/AnnouncementBanner.tsx",
       "types": "./src/Banners/AnnouncementBanner.tsx"
@@ -62,6 +66,18 @@
       "import": "./src/Chart/index.tsx",
       "types": "./src/Chart/index.tsx"
     },
+    "./CodeBlock/CodeBlock": {
+      "import": "./src/CodeBlock/CodeBlock.tsx",
+      "types": "./src/CodeBlock/CodeBlock.tsx"
+    },
+    "./CodeBlock/CodeBlock.utils": {
+      "import": "./src/CodeBlock/CodeBlock.utils.ts",
+      "types": "./src/CodeBlock/CodeBlock.utils.ts"
+    },
+    "./CodeBlock": {
+      "import": "./src/CodeBlock/index.tsx",
+      "types": "./src/CodeBlock/index.tsx"
+    },
     "./CommandMenu/api/Badges": {
       "import": "./src/CommandMenu/api/Badges.tsx",
       "types": "./src/CommandMenu/api/Badges.tsx"
@@ -410,6 +426,18 @@
       "import": "./src/IconPanel/index.tsx",
       "types": "./src/IconPanel/index.tsx"
     },
+    "./Image/Image": {
+      "import": "./src/Image/Image.tsx",
+      "types": "./src/Image/Image.tsx"
+    },
+    "./Image/ZoomContent": {
+      "import": "./src/Image/ZoomContent.tsx",
+      "types": "./src/Image/ZoomContent.tsx"
+    },
+    "./Image": {
+      "import": "./src/Image/index.tsx",
+      "types": "./src/Image/index.tsx"
+    },
     "./InnerSideMenu": {
       "import": "./src/InnerSideMenu/index.tsx",
       "types": "./src/InnerSideMenu/index.tsx"
@@ -418,6 +446,10 @@
       "import": "./src/LogsBarChart/index.tsx",
       "types": "./src/LogsBarChart/index.tsx"
     },
+    "./Markdown": {
+      "import": "./src/Markdown/index.tsx",
+      "types": "./src/Markdown/index.tsx"
+    },
     "./McpUrlBuilder/McpConfigPanel": {
       "import": "./src/McpUrlBuilder/McpConfigPanel.tsx",
       "types": "./src/McpUrlBuilder/McpConfigPanel.tsx"
@@ -474,6 +506,14 @@
       "import": "./src/McpUrlBuilder/utils/mcpIconAssets.ts",
       "types": "./src/McpUrlBuilder/utils/mcpIconAssets.ts"
     },
+    "./Mermaid/Mermaid": {
+      "import": "./src/Mermaid/Mermaid.tsx",
+      "types": "./src/Mermaid/Mermaid.tsx"
+    },
+    "./Mermaid": {
+      "import": "./src/Mermaid/index.tsx",
+      "types": "./src/Mermaid/index.tsx"
+    },
     "./MetricCard": {
       "import": "./src/MetricCard/index.tsx",
       "types": "./src/MetricCard/index.tsx"
@@ -566,6 +606,18 @@
       "import": "./src/ShimmeringLoader/index.tsx",
       "types": "./src/ShimmeringLoader/index.tsx"
     },
+    "./SimpleCodeBlock/SimpleCodeBlock": {
+      "import": "./src/SimpleCodeBlock/SimpleCodeBlock.tsx",
+      "types": "./src/SimpleCodeBlock/SimpleCodeBlock.tsx"
+    },
+    "./SimpleCodeBlock": {
+      "import": "./src/SimpleCodeBlock/index.tsx",
+      "types": "./src/SimpleCodeBlock/index.tsx"
+    },
+    "./SimpleCodeBlock/prism": {
+      "import": "./src/SimpleCodeBlock/prism.ts",
+      "types": "./src/SimpleCodeBlock/prism.ts"
+    },
     "./SqlToRest/assumptions": {
       "import": "./src/SqlToRest/assumptions.ts",
       "types": "./src/SqlToRest/assumptions.ts"
@@ -602,6 +654,10 @@
       "import": "./src/StatusCode/index.tsx",
       "types": "./src/StatusCode/index.tsx"
     },
+    "./TextLink": {
+      "import": "./src/TextLink/index.tsx",
+      "types": "./src/TextLink/index.tsx"
+    },
     "./ThemeToggle": {
       "import": "./src/ThemeToggle.tsx",
       "types": "./src/ThemeToggle.tsx"
@@ -725,13 +781,16 @@
     "framer-motion": "^11.1.9",
     "github-slugger": "^2.0.0",
     "icons": "workspace:*",
+    "highlightjs-curl": "^1.3.0",
     "js-yaml": "^3.14.1",
     "lodash": "catalog:",
     "lucide-react": "*",
+    "mermaid": "^11.12.1",
     "mdast": "^3.0.0",
     "monaco-editor": "*",
     "next-themes": "*",
     "openai": "^4.75.1",
+    "prism-react-renderer": "^2.3.1",
     "react": "catalog:",
     "react-countdown": "^2.3.5",
     "react-dom": "catalog:",
@@ -739,6 +798,7 @@
     "react-hook-form": "^7.45.0",
     "react-intersection-observer": "^9.8.2",
     "react-markdown": "^9.0.1",
+    "react-medium-image-zoom": "^5.2.4",
     "react-syntax-highlighter": "^15.6.6",
     "react-use": "^17.5.0",
     "recharts": "catalog:",
@@ -766,6 +826,7 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "api-types": "workspace:*",
     "next-router-mock": "^0.9.13",
     "tsx": "catalog:",
diff --git a/packages/ui/src/layout/banners/Announcement.tsx b/packages/ui-patterns/src/Banners/Announcement.tsx
similarity index 95%
rename from packages/ui/src/layout/banners/Announcement.tsx
rename to packages/ui-patterns/src/Banners/Announcement.tsx
index 97df6391683..95142b4f5cb 100644
--- a/packages/ui/src/layout/banners/Announcement.tsx
+++ b/packages/ui-patterns/src/Banners/Announcement.tsx
@@ -3,8 +3,7 @@
 import { X } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 import { PropsWithChildren, useEffect, useState } from 'react'
-
-import { cn } from '../../lib/utils/cn'
+import { cn } from 'ui'
 
 export interface AnnouncementProps {
   show: boolean
@@ -21,7 +20,7 @@ interface AnnouncementComponentProps {
   announcementKey: `announcement_${string}`
 }
 
-const Announcement = ({
+export const Announcement = ({
   show = true,
   dismissable = true,
   className,
@@ -76,5 +75,3 @@ const Announcement = ({
     )
   }
 }
-
-export default Announcement
diff --git a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
index 120742c7632..e2386daad1a 100644
--- a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
+++ b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
@@ -1,5 +1,4 @@
-import { Announcement } from 'ui/src/layout/banners'
-
+import { Announcement } from './Announcement'
 import announcementJSON from './data.json'
 import LW15Banner from './LW15Banner'
 
diff --git a/packages/ui/src/components/CodeBlock/CodeBlock.tsx b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
similarity index 98%
rename from packages/ui/src/components/CodeBlock/CodeBlock.tsx
rename to packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
index 9fd2068f014..84dba94b860 100644
--- a/packages/ui/src/components/CodeBlock/CodeBlock.tsx
+++ b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
@@ -27,10 +27,8 @@ import swift from 'react-syntax-highlighter/dist/cjs/languages/hljs/swift'
 import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript'
 import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml'
 import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'
+import { Button, cn, copyToClipboard } from 'ui'
 
-import { copyToClipboard } from '../../lib/utils'
-import { cn } from '../../lib/utils/cn'
-import { Button } from '../Button/Button'
 import { monokaiCustomTheme } from './CodeBlock.utils'
 
 export type CodeBlockLang =
diff --git a/packages/ui/src/components/CodeBlock/CodeBlock.utils.ts b/packages/ui-patterns/src/CodeBlock/CodeBlock.utils.ts
similarity index 100%
rename from packages/ui/src/components/CodeBlock/CodeBlock.utils.ts
rename to packages/ui-patterns/src/CodeBlock/CodeBlock.utils.ts
diff --git a/packages/ui/src/components/CodeBlock/index.tsx b/packages/ui-patterns/src/CodeBlock/index.tsx
similarity index 100%
rename from packages/ui/src/components/CodeBlock/index.tsx
rename to packages/ui-patterns/src/CodeBlock/index.tsx
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index 876db8191e3..4c897f57463 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -12,8 +12,8 @@ import {
   CommandGroup_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  markdownComponents,
 } from 'ui'
+import { markdownComponents } from 'ui-patterns/Markdown'
 import { StatusIcon } from 'ui/src/components/StatusIcon'
 
 import {
diff --git a/packages/ui/src/components/Image/Image.tsx b/packages/ui-patterns/src/Image/Image.tsx
similarity index 95%
rename from packages/ui/src/components/Image/Image.tsx
rename to packages/ui-patterns/src/Image/Image.tsx
index 0cf76b99f4e..44c9ef045aa 100644
--- a/packages/ui/src/components/Image/Image.tsx
+++ b/packages/ui-patterns/src/Image/Image.tsx
@@ -7,8 +7,8 @@ import { useTheme } from 'next-themes'
 import NextImage, { type ImageProps as NextImageProps } from 'next/image'
 import { useEffect, useState } from 'react'
 import Zoom from 'react-medium-image-zoom'
+import { cn } from 'ui'
 
-import { cn } from '../../lib/utils'
 import ZoomContent from './ZoomContent'
 
 export type CaptionAlign = 'left' | 'center' | 'right'
@@ -49,7 +49,7 @@ export interface ImageProps extends Omit<NextImageProps, 'src'> {
  * - captionAlign: {'left' | 'center' | 'right'} (optional) to align the caption
  * - containerClassName: {string} (optional) to style the parent <figure> container
  */
-const Image = ({ src, alt = '', zoomable, ...props }: ImageProps) => {
+export const Image = ({ src, alt = '', zoomable, ...props }: ImageProps) => {
   const [mounted, setMounted] = useState(false)
   const { resolvedTheme } = useTheme()
   const isLessThanLgBreakpoint = useBreakpoint()
@@ -102,5 +102,3 @@ const getCaptionAlign = (align?: CaptionAlign) => {
       return 'text-center'
   }
 }
-
-export default Image
diff --git a/packages/ui/src/components/Image/ZoomContent.tsx b/packages/ui-patterns/src/Image/ZoomContent.tsx
similarity index 100%
rename from packages/ui/src/components/Image/ZoomContent.tsx
rename to packages/ui-patterns/src/Image/ZoomContent.tsx
diff --git a/packages/ui-patterns/src/Image/index.tsx b/packages/ui-patterns/src/Image/index.tsx
new file mode 100644
index 00000000000..d28c8bd778c
--- /dev/null
+++ b/packages/ui-patterns/src/Image/index.tsx
@@ -0,0 +1 @@
+export { Image, type ImageProps } from './Image'
diff --git a/packages/ui/src/lib/Markdown/index.tsx b/packages/ui-patterns/src/Markdown/index.tsx
similarity index 84%
rename from packages/ui/src/lib/Markdown/index.tsx
rename to packages/ui-patterns/src/Markdown/index.tsx
index 1ae80188bb3..3994fabf275 100644
--- a/packages/ui/src/lib/Markdown/index.tsx
+++ b/packages/ui-patterns/src/Markdown/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import Image from 'next/image'
-
-import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
-import { cn } from '../utils'
+import { cn } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 const NextImageHandler = (props: any) => {
   return (
diff --git a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
index ed0c2193ba9..0617e7ebff2 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import React, { useMemo, useState } from 'react'
-import { cn, CodeBlock, Separator } from 'ui'
+import { cn, Separator } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { InfoTooltip } from '../info-tooltip'
 import { ClientSelectDropdown } from './components/ClientSelectDropdown'
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
index 7ef4e4bc0c5..c3b1fa1781e 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
@@ -5,7 +5,7 @@ import yaml from 'js-yaml'
 import { ExternalLink } from 'lucide-react'
 import Image from 'next/image'
 import { Button, cn } from 'ui'
-import { CodeBlock, type CodeBlockLang } from 'ui/src/components/CodeBlock'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 import type { McpClient, McpClientConfig, McpOnCopyCallback } from '../types'
 import { getMcpButtonData } from '../utils/getMcpButtonData'
diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
index f6b494652a9..ec98861fc94 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
@@ -1,4 +1,4 @@
-import { CodeBlock } from 'ui/src/components/CodeBlock'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import type {
   AntigravityMcpConfig,
diff --git a/packages/ui/src/components/Mermaid/Mermaid.tsx b/packages/ui-patterns/src/Mermaid/Mermaid.tsx
similarity index 99%
rename from packages/ui/src/components/Mermaid/Mermaid.tsx
rename to packages/ui-patterns/src/Mermaid/Mermaid.tsx
index 7d63da7c1e7..4b55be44615 100644
--- a/packages/ui/src/components/Mermaid/Mermaid.tsx
+++ b/packages/ui-patterns/src/Mermaid/Mermaid.tsx
@@ -3,8 +3,7 @@
 import mermaid from 'mermaid'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-
-import { cn } from '../../lib/utils/cn'
+import { cn } from 'ui'
 
 // @mildtomato - 28/11/2025
 // Colors are hardcoded because Mermaid's parser doesn't support CSS variables
diff --git a/packages/ui/src/components/Mermaid/index.tsx b/packages/ui-patterns/src/Mermaid/index.tsx
similarity index 100%
rename from packages/ui/src/components/Mermaid/index.tsx
rename to packages/ui-patterns/src/Mermaid/index.tsx
diff --git a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
index 19a75e25542..9e0223d7098 100644
--- a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
+++ b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
@@ -1,13 +1,6 @@
 import { useEffect, useState } from 'react'
-
-import {
-  CodeBlock,
-  CodeBlockLang,
-  TabsContent_Shadcn_,
-  TabsList_Shadcn_,
-  TabsTrigger_Shadcn_,
-  Tabs_Shadcn_,
-} from 'ui'
+import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 interface MultipleCodeBlockFile {
   name: string
diff --git a/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx b/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
similarity index 96%
rename from packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx
rename to packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
index 3dfcc9bad24..8dcb1b1e3d5 100644
--- a/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx
+++ b/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
@@ -9,10 +9,8 @@
 import { useTheme } from 'next-themes'
 import { Highlight, Language, Prism, themes } from 'prism-react-renderer'
 import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'
+import { Button, cn, copyToClipboard } from 'ui'
 
-import { copyToClipboard } from '../../lib/utils'
-import { cn } from './../../lib/utils/cn'
-import { Button } from './../Button'
 import { dart } from './prism'
 
 // Context for copy callback - can be provided by parent components
diff --git a/packages/ui/src/components/SimpleCodeBlock/index.tsx b/packages/ui-patterns/src/SimpleCodeBlock/index.tsx
similarity index 100%
rename from packages/ui/src/components/SimpleCodeBlock/index.tsx
rename to packages/ui-patterns/src/SimpleCodeBlock/index.tsx
diff --git a/packages/ui/src/components/SimpleCodeBlock/prism.ts b/packages/ui-patterns/src/SimpleCodeBlock/prism.ts
similarity index 100%
rename from packages/ui/src/components/SimpleCodeBlock/prism.ts
rename to packages/ui-patterns/src/SimpleCodeBlock/prism.ts
diff --git a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
index 6cea26d5f5e..e648130f397 100644
--- a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
+++ b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
@@ -28,8 +28,8 @@ import {
 } from 'react'
 import Markdown from 'react-markdown'
 import { format } from 'sql-formatter'
-import { cn, CodeBlock, Collapsible, Tabs } from 'ui'
-import { Alert } from 'ui/src/components/shadcn/ui/alert'
+import { Alert_Shadcn_ as Alert, cn, Collapsible, Tabs } from 'ui'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { assumptions } from './assumptions'
 import { BaseUrlDialog } from './base-url-dialog'
diff --git a/packages/ui/src/components/TextLink/TextLink.tsx b/packages/ui-patterns/src/TextLink/index.tsx
similarity index 94%
rename from packages/ui/src/components/TextLink/TextLink.tsx
rename to packages/ui-patterns/src/TextLink/index.tsx
index 005d5d6a2ac..94be861b754 100644
--- a/packages/ui/src/components/TextLink/TextLink.tsx
+++ b/packages/ui-patterns/src/TextLink/index.tsx
@@ -2,8 +2,7 @@
 
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
-
-import { cn } from '../../lib/utils/cn'
+import { cn } from 'ui'
 
 interface Props {
   label: string
@@ -15,7 +14,7 @@ interface Props {
   target?: '_blank' | '_self'
 }
 
-function TextLink({
+export function TextLink({
   url = '',
   label,
   className,
@@ -57,5 +56,3 @@ function TextLink({
     </Link>
   )
 }
-
-export default TextLink
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 850a633ea39..c746f000789 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,12 +1,7 @@
-// Markdown components
-
-export * from './src/lib/Markdown'
-
 // GENERAL
 
 export * from './src/components/Button'
 export * from './src/components/Icon/IconBackground'
-export * from './src/components/Image'
 
 // DISPLAYS
 
@@ -15,9 +10,6 @@ export * from './src/components/Tabs'
 export * from './src/components/Alert'
 export * from './src/components/Accordion'
 export * from './src/components/Collapsible'
-export * from './src/components/CodeBlock'
-export * from './src/components/SimpleCodeBlock'
-export * from './src/components/Mermaid'
 
 // NAV
 
@@ -268,16 +260,9 @@ export * from './src/components/TreeView'
 export * from './src/components/shadcn/ui/chart'
 export * from './src/components/shadcn/ui/sidebar'
 
-// links
-
-export * from './src/components/TextLink'
-
-// used for LW
-export * from './src/layout/banners'
-
+// ICONS
 export * from './src/components/StatusIcon'
 
-// ICONS
 // export icons
 export * from './src/components/Icon/icons/IconBriefcase2'
 export * from './src/components/Icon/icons/IconBroadcast'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a9c72b79dea..16c1fb1287d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -56,13 +56,9 @@
     "date-fns": "^2.30.0",
     "formik": "^2.2.9",
     "framer-motion": "^11.0.3",
-    "highlightjs-curl": "^1.3.0",
     "input-otp": "^1.2.3",
     "lodash": "catalog:",
     "lucide-react": "^0.436.0",
-    "mermaid": "^11.12.1",
-    "next-themes": "^0.3.0",
-    "prism-react-renderer": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "catalog:",
     "react-accessible-treeview": "^2.11.2",
@@ -71,9 +67,7 @@
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",
     "react-intersection-observer": "^9.8.2",
-    "react-medium-image-zoom": "^5.2.4",
     "react-resizable-panels": "^4.6.5",
-    "react-syntax-highlighter": "^15.6.6",
     "recharts": "catalog:",
     "sonner": "^1.5.0",
     "tailwind-merge": "^1.13.2",
@@ -89,9 +83,7 @@
     "@types/react": "catalog:",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "catalog:",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitest/coverage-v8": "^3.2.0",
-    "common": "workspace:*",
     "config": "workspace:*",
     "glob": "^8.1.0",
     "style-dictionary": "^3.7.1",
@@ -99,8 +91,5 @@
     "typescript": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:"
-  },
-  "peerDependencies": {
-    "next": "catalog:"
   }
 }
diff --git a/packages/ui/src/components/Button/Button.test.tsx b/packages/ui/src/components/Button/Button.test.tsx
index 0defd7a47ec..2e6f8d709f3 100644
--- a/packages/ui/src/components/Button/Button.test.tsx
+++ b/packages/ui/src/components/Button/Button.test.tsx
@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import Link from 'next/link'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
 
@@ -75,16 +74,6 @@ describe('#Button', () => {
     expect(screen.queryByRole('button')).toHaveClass('w-full')
   })
 
-  it("shouldn't crash when wrapped with next/link", () => {
-    expect(() =>
-      render(
-        <Button asChild>
-          <Link href="https://supabase.com">Button</Link>
-        </Button>
-      )
-    ).not.toThrow()
-  })
-
   it('should forward ref', () => {
     const ref: React.MutableRefObject<HTMLButtonElement | null> = {
       current: null,
diff --git a/packages/ui/src/components/Image/index.tsx b/packages/ui/src/components/Image/index.tsx
deleted file mode 100644
index 225e542fa1e..00000000000
--- a/packages/ui/src/components/Image/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Image } from './Image'
diff --git a/packages/ui/src/components/NavMenu/nav-menu.test.tsx b/packages/ui/src/components/NavMenu/nav-menu.test.tsx
index 6c45ae91595..10bd5b04ebc 100644
--- a/packages/ui/src/components/NavMenu/nav-menu.test.tsx
+++ b/packages/ui/src/components/NavMenu/nav-menu.test.tsx
@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react'
-import Link from 'next/link'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
 
@@ -28,7 +27,7 @@ describe('NavMenu Component', () => {
     render(
       <NavMenu>
         <NavMenuItem active={false}>
-          <Link href="/">Home</Link>
+          <span>Home</span>
         </NavMenuItem>
       </NavMenu>
     )
diff --git a/packages/ui/src/components/TextLink/index.ts b/packages/ui/src/components/TextLink/index.ts
deleted file mode 100644
index 077167d986d..00000000000
--- a/packages/ui/src/components/TextLink/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TextLink } from './TextLink'
diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index 72e45a8ff1b..e9fcb9e957c 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useTheme } from 'next-themes'
 import { Toaster as Sonner } from 'sonner'
 
 import { cn } from '../../../lib/utils'
@@ -9,11 +8,9 @@ import { StatusIcon } from './../../StatusIcon'
 
 export const SONNER_DEFAULT_DURATION = 4000
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner> & { theme: 'light' | 'dark' | 'system' }
 
 const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
-
   return (
     <Sonner
       icons={{
@@ -21,7 +18,6 @@ const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
         error: <StatusIcon variant="destructive" />,
         info: <StatusIcon variant="default" />,
       }}
-      theme={theme as ToasterProps['theme']}
       // pointer-events-auto is needed to fix the toast when above radix modals. Set the width to 420px to fix the toast
       // progress component (bottom row rendered in two lines).
       className="toaster group pointer-events-auto"
diff --git a/packages/ui/src/layout/banners/index.tsx b/packages/ui/src/layout/banners/index.tsx
deleted file mode 100644
index 7785bf95411..00000000000
--- a/packages/ui/src/layout/banners/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Announcement } from './Announcement'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ddd710aa4be..99d5c74e2ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2483,9 +2483,6 @@ importers:
       framer-motion:
         specifier: ^11.0.3
         version: 11.11.17(@emotion/is-prop-valid@1.2.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      highlightjs-curl:
-        specifier: ^1.3.0
-        version: 1.3.0
       input-otp:
         specifier: ^1.2.3
         version: 1.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2495,18 +2492,6 @@ importers:
       lucide-react:
         specifier: ^0.436.0
         version: 0.436.0(react@18.3.1)
-      mermaid:
-        specifier: ^11.12.1
-        version: 11.12.1(supports-color@8.1.1)
-      next:
-        specifier: 'catalog:'
-        version: 15.5.14(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
-      next-themes:
-        specifier: ^0.3.0
-        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      prism-react-renderer:
-        specifier: ^2.3.1
-        version: 2.3.1(react@18.3.1)
       prop-types:
         specifier: ^15.7.2
         version: 15.8.1
@@ -2531,15 +2516,9 @@ importers:
       react-intersection-observer:
         specifier: ^9.8.2
         version: 9.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-medium-image-zoom:
-        specifier: ^5.2.4
-        version: 5.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-resizable-panels:
         specifier: ^4.6.5
         version: 4.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-syntax-highlighter:
-        specifier: ^15.6.6
-        version: 15.6.6(react@18.3.1)
       recharts:
         specifier: 'catalog:'
         version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2580,15 +2559,9 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.0
-      '@types/react-syntax-highlighter':
-        specifier: ^15.5.13
-        version: 15.5.13
       '@vitest/coverage-v8':
         specifier: ^3.2.0
         version: 3.2.4(supports-color@8.1.1)(vitest@3.2.4)
-      common:
-        specifier: workspace:*
-        version: link:../common
       config:
         specifier: workspace:*
         version: link:../config
@@ -2661,6 +2634,9 @@ importers:
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
+      highlightjs-curl:
+        specifier: ^1.3.0
+        version: 1.3.0
       icons:
         specifier: workspace:*
         version: link:../icons
@@ -2676,6 +2652,9 @@ importers:
       mdast:
         specifier: ^3.0.0
         version: 3.0.0
+      mermaid:
+        specifier: ^11.12.1
+        version: 11.12.1(supports-color@8.1.1)
       monaco-editor:
         specifier: '*'
         version: 0.52.2
@@ -2688,6 +2667,9 @@ importers:
       openai:
         specifier: ^4.75.1
         version: 4.104.0(encoding@0.1.13)(ws@8.19.0)(zod@3.25.76)
+      prism-react-renderer:
+        specifier: ^2.3.1
+        version: 2.3.1(react@18.3.1)
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -2709,6 +2691,9 @@ importers:
       react-markdown:
         specifier: ^9.0.1
         version: 9.0.1(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+      react-medium-image-zoom:
+        specifier: ^5.2.4
+        version: 5.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-syntax-highlighter:
         specifier: ^15.6.6
         version: 15.6.6(react@18.3.1)
@@ -2785,6 +2770,9 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.0
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
       api-types:
         specifier: workspace:*
         version: link:../api-types
@@ -9084,9 +9072,6 @@ packages:
   '@types/d3-interpolate@2.0.5':
     resolution: {integrity: sha512-UINE41RDaUMbulp+bxQMDnhOi51rh5lA2dG+dWZU0UY/IwQiG/u2x8TfnWYU9+xwGdXsJoAvrBYUEQl0r91atg==}
 
-  '@types/d3-interpolate@3.0.2':
-    resolution: {integrity: sha512-zAbCj9lTqW9J9PlF4FwnvEjXZUy75NQqPm7DMHZXuxCFTpuTrdK2NMYGQekf4hlasL78fCYOLu4EE3/tXElwow==}
-
   '@types/d3-interpolate@3.0.4':
     resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
 
@@ -14669,9 +14654,6 @@ packages:
   ml-xsadd@3.0.1:
     resolution: {integrity: sha512-Fz2q6dwgzGM8wYKGArTUTZDGa4lQFA2Vi6orjGeTVRy22ZnQFKlJuwS9n8NRviqz1KHAHAzdKJwbnYhdo38uYg==}
 
-  mlly@1.8.0:
-    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
-
   mlly@1.8.1:
     resolution: {integrity: sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==}
 
@@ -21456,7 +21438,7 @@ snapshots:
       globals: 15.15.0
       kolorist: 1.8.0
       local-pkg: 1.1.2
-      mlly: 1.8.0
+      mlly: 1.8.1
     transitivePeerDependencies:
       - supports-color
 
@@ -26769,10 +26751,6 @@ snapshots:
     dependencies:
       '@types/d3-color': 2.0.6
 
-  '@types/d3-interpolate@3.0.2':
-    dependencies:
-      '@types/d3-color': 3.1.1
-
   '@types/d3-interpolate@3.0.4':
     dependencies:
       '@types/d3-color': 3.1.1
@@ -26841,7 +26819,7 @@ snapshots:
       '@types/d3-format': 3.0.4
       '@types/d3-geo': 3.1.0
       '@types/d3-hierarchy': 3.1.6
-      '@types/d3-interpolate': 3.0.2
+      '@types/d3-interpolate': 3.0.4
       '@types/d3-path': 1.0.9
       '@types/d3-polygon': 3.0.2
       '@types/d3-quadtree': 3.0.6
@@ -33565,13 +33543,6 @@ snapshots:
 
   ml-xsadd@3.0.1: {}
 
-  mlly@1.8.0:
-    dependencies:
-      acorn: 8.16.0
-      pathe: 2.0.3
-      pkg-types: 1.3.1
-      ufo: 1.6.3
-
   mlly@1.8.1:
     dependencies:
       acorn: 8.16.0
@@ -33825,7 +33796,7 @@ snapshots:
       chokidar: 5.0.0
       citty: 0.1.6
       compatx: 0.2.0
-      confbox: 0.2.2
+      confbox: 0.2.4
       consola: 3.4.2
       cookie-es: 2.0.0
       croner: 9.1.0
@@ -34877,7 +34848,7 @@ snapshots:
 
   pkg-types@2.3.0:
     dependencies:
-      confbox: 0.2.2
+      confbox: 0.2.4
       exsolve: 1.0.8
       pathe: 2.0.3