diff --git a/packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx b/packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx
index 39a9e6a955f..ab192ca1a45 100644
--- a/packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx
+++ b/packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx
@@ -1,6 +1,6 @@
 import {Task, Tasks} from './Tasks.js'
 import {getLastFrameAfterUnmount, render} from '../../testing/ui.js'
-import {unstyled} from '../../../../public/node/output.js'
+import {unstyled, TokenizedString} from '../../../../public/node/output.js'
 import {AbortController} from '../../../../public/node/abort.js'
 import {Stdout} from '../../ui.js'
 import React from 'react'
@@ -392,6 +392,31 @@ describe('Tasks', () => {
     expect(unstyled(getLastFrameAfterUnmount(renderInstance)!)).toEqual('')
     await expect(promise).resolves.toEqual(undefined)
   })
+
+  test('supports TokenizedString as title', async () => {
+    // Given
+    const firstTaskFunction = vi.fn(async () => {})
+    const secondTaskFunction = vi.fn(async () => {})
+
+    const firstTask: Task = {
+      title: new TokenizedString('tokenized task 1'),
+      task: firstTaskFunction,
+    }
+
+    const secondTask: Task = {
+      title: 'string task 2',
+      task: secondTaskFunction,
+    }
+
+    // When
+    const renderInstance = render(<Tasks tasks={[firstTask, secondTask]} silent={false} />)
+    await renderInstance.waitUntilExit()
+
+    // Then
+    expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot('""')
+    expect(firstTaskFunction).toHaveBeenCalled()
+    expect(secondTaskFunction).toHaveBeenCalled()
+  })
 })
 
 async function taskHasRendered() {
diff --git a/packages/cli-kit/src/private/node/ui/components/Tasks.tsx b/packages/cli-kit/src/private/node/ui/components/Tasks.tsx
index 05ea0c57a90..cb5153d1793 100644
--- a/packages/cli-kit/src/private/node/ui/components/Tasks.tsx
+++ b/packages/cli-kit/src/private/node/ui/components/Tasks.tsx
@@ -4,10 +4,11 @@ import {isUnitTest} from '../../../../public/node/context/local.js'
 import {AbortSignal} from '../../../../public/node/abort.js'
 import useAbortSignal from '../hooks/use-abort-signal.js'
 import {useExitOnCtrlC} from '../hooks/use-exit-on-ctrl-c.js'
+import {TokenizedString} from '../../../../public/node/output.js'
 import React, {useRef, useState} from 'react'
 
 export interface Task<TContext = unknown> {
-  title: string
+  title: string | TokenizedString
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
   task: (ctx: TContext, task: Task<TContext>) => Promise<void | Task<TContext>[]>
   retry?: number
@@ -107,8 +108,10 @@ function Tasks<TContext>({
     return null
   }
 
+  const title = typeof currentTask.title === 'string' ? currentTask.title : currentTask.title.value
+
   return state === TasksState.Loading && !isAborted ? (
-    <LoadingBar title={currentTask.title} noColor={noColor} noProgressBar={noProgressBar} />
+    <LoadingBar title={title} noColor={noColor} noProgressBar={noProgressBar} />
   ) : null
 }