diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
index 099fce21483e2..d043776d22f1b 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { noop as css } from '../../helpers/noop-template'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 
 function useCopyLegacy(content: string) {
   type CopyState =
@@ -185,7 +185,7 @@ export function CopyButton({
       aria-disabled={isDisabled}
       disabled={isDisabled}
       data-nextjs-data-runtime-error-copy-button
-      className={cn(
+      className={cx(
         props.className,
         'nextjs-data-runtime-error-copy-button',
         `nextjs-data-runtime-error-copy-button--${copyState.state}`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx
index 9ad2aa5f2b96c..d8820a4e96741 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx
@@ -1,6 +1,6 @@
 import { DialogHeader } from '../../dialog/dialog-header'
 import { noop as css } from '../../../helpers/noop-template'
-import { cn } from '../../../helpers/merge-class-names'
+import { cx } from '../../../helpers/cx'
 
 type ErrorOverlayDialogHeaderProps = {
   children?: React.ReactNode
@@ -13,7 +13,7 @@ export function ErrorOverlayDialogHeader({
 }: ErrorOverlayDialogHeaderProps) {
   return (
     <DialogHeader
-      className={cn(
+      className={cx(
         'nextjs-container-errors-header',
         isTurbopack && 'nextjs-error-overlay-dialog-header-turbopack-background'
       )}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx
index 24a57adefc0aa..9fee4de7dcce9 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx
@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'
 import { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'
 import { noop as css } from '../../../../helpers/noop-template'
-import { cn } from '../../../../helpers/merge-class-names'
+import { cx } from '../../../../helpers/cx'
 
 interface ErrorFeedbackProps {
   errorCode: string
@@ -44,7 +44,7 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
 
   return (
     <div
-      className={cn('error-feedback', className)}
+      className={cx('error-feedback', className)}
       role="region"
       aria-label="Error feedback"
     >
@@ -58,7 +58,7 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
           <button
             aria-label="Mark as helpful"
             onClick={() => handleFeedback(true)}
-            className={cn('feedback-button', voted === true && 'voted')}
+            className={cx('feedback-button', voted === true && 'voted')}
             type="button"
           >
             <ThumbsUp aria-hidden="true" />
@@ -66,7 +66,7 @@ export function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {
           <button
             aria-label="Mark as not helpful"
             onClick={() => handleFeedback(false)}
-            className={cn('feedback-button', voted === false && 'voted')}
+            className={cx('feedback-button', voted === false && 'voted')}
             type="button"
           >
             <ThumbsDown
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx
index dea601d630891..5b5ee21767b94 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 export type ToastProps = React.HTMLProps<HTMLDivElement> & {
   children?: React.ReactNode
   onClick?: () => void
@@ -19,7 +19,7 @@ export const Toast: React.FC<ToastProps> = function Toast({
         e.preventDefault()
         return onClick?.()
       }}
-      className={cn('nextjs-toast', className)}
+      className={cx('nextjs-toast', className)}
     >
       <div data-nextjs-toast-wrapper>{children}</div>
     </div>
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx
index e4b5c4bbc60a6..cb60bb048c060 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx
@@ -1,5 +1,5 @@
 import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'
-import { cn } from '../../helpers/merge-class-names'
+import { cx } from '../../helpers/cx'
 import { noop as css } from '../../helpers/noop-template'
 
 export function VersionStalenessInfo({
@@ -17,13 +17,13 @@ export function VersionStalenessInfo({
 
   return (
     <span
-      className={cn(
+      className={cx(
         'nextjs-container-build-error-version-status',
         'dialog-exclude-closing-from-outside-click',
         isTurbopack && 'turbopack-border'
       )}
     >
-      <Eclipse className={cn('version-staleness-indicator', indicatorClass)} />
+      <Eclipse className={cx('version-staleness-indicator', indicatorClass)} />
       <span data-nextjs-version-checker title={title}>
         {text}
       </span>{' '}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.test.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.test.ts
new file mode 100644
index 0000000000000..61408cd212751
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.test.ts
@@ -0,0 +1,27 @@
+import { cx } from './cx'
+
+describe('cx', () => {
+  it('should return an empty string for no arguments', () => {
+    expect(cx()).toBe('')
+  })
+
+  it('should join multiple string arguments with spaces', () => {
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('should filter out falsy values', () => {
+    expect(cx('foo', null, 'bar', undefined, 'baz', false)).toBe('foo bar baz')
+  })
+
+  it('should handle single string argument', () => {
+    expect(cx('foo')).toBe('foo')
+  })
+
+  it('should not add extra spaces when falsy values are between strings', () => {
+    expect(cx('foo', null, 'bar')).toBe('foo bar')
+  })
+
+  it('should handle all falsy values', () => {
+    expect(cx(null, undefined, false)).toBe('')
+  })
+})
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.ts
new file mode 100644
index 0000000000000..69ab9676c600c
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.ts
@@ -0,0 +1,9 @@
+/**
+ * Merge multiple args to a single string with spaces. Useful for merging class names.
+ * @example
+ * cx('foo', 'bar') // 'foo bar'
+ * cx('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'
+ */
+export function cx(...args: (string | undefined | null | false)[]): string {
+  return args.filter(Boolean).join(' ')
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.test.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.test.ts
deleted file mode 100644
index 5806af23c04d8..0000000000000
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { mergeClassNames } from './merge-class-names'
-
-describe('mergeClassNames', () => {
-  it('should return an empty string for no arguments', () => {
-    expect(mergeClassNames()).toBe('')
-  })
-
-  it('should join multiple string arguments with spaces', () => {
-    expect(mergeClassNames('foo', 'bar', 'baz')).toBe('foo bar baz')
-  })
-
-  it('should filter out falsy values', () => {
-    expect(mergeClassNames('foo', null, 'bar', undefined, 'baz', false)).toBe(
-      'foo bar baz'
-    )
-  })
-
-  it('should handle single string argument', () => {
-    expect(mergeClassNames('foo')).toBe('foo')
-  })
-
-  it('should not add extra spaces when falsy values are between strings', () => {
-    expect(mergeClassNames('foo', null, 'bar')).toBe('foo bar')
-  })
-
-  it('should handle all falsy values', () => {
-    expect(mergeClassNames(null, undefined, false)).toBe('')
-  })
-})
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.ts
deleted file mode 100644
index 156a20203b64a..0000000000000
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-class-names.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Merge multiple args to a single string with spaces. Useful for merging class names.
- *
- * @example
- * mergeClassNames('foo', 'bar') // 'foo bar'
- * mergeClassNames('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'
- *
- * @alias `cn()`
- */
-export function mergeClassNames(
-  ...args: (string | undefined | null | false)[]
-): string {
-  return args.filter(Boolean).join(' ')
-}
-
-export { mergeClassNames as cn }