Task

Display task progress with collapsible details and file references.

import {
  Task,
  TaskContent,
  TaskItem,
  TaskItemFile,
  TaskTrigger,
} from "@/components/ai-elements/task"

export function TaskDemo() {
  return (
    <div className="w-full max-w-2xl space-y-4">
      <Task>
        <TaskTrigger title="Searching codebase for Button component" />
        <TaskContent>
          <TaskItem>
            Found in <TaskItemFile>components/ui/button.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Used in <TaskItemFile>pages/home.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Referenced in <TaskItemFile>components/header.tsx</TaskItemFile>
          </TaskItem>
        </TaskContent>
      </Task>

      <Task>
        <TaskTrigger title="Analyzing dependencies" />
        <TaskContent>
          <TaskItem>
            Found 3 direct dependencies in{" "}
            <TaskItemFile>package.json</TaskItemFile>
          </TaskItem>
          <TaskItem>All dependencies are up to date</TaskItem>
        </TaskContent>
      </Task>
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add task

Usage

import {
  Task,
  TaskTrigger,
  TaskContent,
  TaskItem,
  TaskItemFile,
} from "@/components/ai-elements/task"

<Task>
  <TaskTrigger title="Searching codebase" />
  <TaskContent>
    <TaskItem>
      Found in <TaskItemFile>components/ui/button.tsx</TaskItemFile>
    </TaskItem>
  </TaskContent>
</Task>

Examples

Default

import {
  Task,
  TaskContent,
  TaskItem,
  TaskItemFile,
  TaskTrigger,
} from "@/components/ai-elements/task"

export function TaskDemo() {
  return (
    <div className="w-full max-w-2xl space-y-4">
      <Task>
        <TaskTrigger title="Searching codebase for Button component" />
        <TaskContent>
          <TaskItem>
            Found in <TaskItemFile>components/ui/button.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Used in <TaskItemFile>pages/home.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Referenced in <TaskItemFile>components/header.tsx</TaskItemFile>
          </TaskItem>
        </TaskContent>
      </Task>

      <Task>
        <TaskTrigger title="Analyzing dependencies" />
        <TaskContent>
          <TaskItem>
            Found 3 direct dependencies in{" "}
            <TaskItemFile>package.json</TaskItemFile>
          </TaskItem>
          <TaskItem>All dependencies are up to date</TaskItem>
        </TaskContent>
      </Task>
    </div>
  )
}

export default function Example() {
  return (
    <div className="space-y-4">
      <Task>
        <TaskTrigger title="Searching codebase for Button component" />
        <TaskContent>
          <TaskItem>
            Found in <TaskItemFile>components/ui/button.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Used in <TaskItemFile>pages/home.tsx</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Referenced in <TaskItemFile>components/header.tsx</TaskItemFile>
          </TaskItem>
        </TaskContent>
      </Task>
 
      <Task>
        <TaskTrigger title="Analyzing dependencies" />
        <TaskContent>
          <TaskItem>
            Found 3 direct dependencies in <TaskItemFile>package.json</TaskItemFile>
          </TaskItem>
          <TaskItem>All dependencies are up to date</TaskItem>
        </TaskContent>
      </Task>
    </div>
  )
}

API Reference

Task

Collapsible task container.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial open state
`className`	`string`	-	Custom CSS classes

TaskTrigger

Trigger button to expand task.

Prop	Type	Default	Description
`title`	`string`	-	Task title
`children`	`ReactNode`	-	Custom trigger content
`className`	`string`	-	Custom CSS classes

TaskContent

Container for task details.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Task items
`className`	`string`	-	Custom CSS classes

TaskItem

Individual task detail item.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Item content
`className`	`string`	-	Custom CSS classes

TaskItemFile

File reference badge.

Prop	Type	Default	Description
`children`	`ReactNode`	-	File name
`className`	`string`	-	Custom CSS classes

Suggestion Tool

On This Page

Installation Usage Examples Default API Reference Task TaskTrigger TaskContent TaskItem TaskItemFile