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

@@ -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} />
-}

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>

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'}
+    />
+  )
+}

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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

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',

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',

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',

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()

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' }
 

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>

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'} />
+}

apps/learn/app/SonnerToast.tsx

@@ -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} />
-}

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>

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'}
+    />
+  )
+}

apps/learn/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  export const styles: Record<string, string>
+  export default styles
+}

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

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()

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

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()

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'

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

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 {

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 {

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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'

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'

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'
 

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'

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'

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'
 

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'

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'
 

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'
 

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'
 

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

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'

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'

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'
 

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'
 

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,

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

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 {

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'

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'
 

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

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'

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'

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' }

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

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'

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'
 

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,

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 = () => {

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

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

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 {

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'
 

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

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'

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

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'

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()

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,

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

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'

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 => {

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 */

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'

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'

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'} />
+}