Search

Search components and blocks

Sign in

Agent Task List

Open page

Shows the steps an agent is working through: the active task shimmers (using the reusable TextShimmer component) while it's being worked on, tasks complete one at a time in order, and the progress dots and count turn green once every task is done, before looping back to the first task.

pnpm dlx shadcn@latest add @ditherui/agent-task-list
Agent is Performing Task
0/4
  • Read project files
  • Plan implementation
  • Write component code
  • Run tests

Install

$ pnpm dlx shadcn@latest add @ditherui/agent-task-list

Props

tasksAgentTask[]—
stepDurationnumber (ms)1800
holdDurationnumber (ms)2200

Text Shimmer

Open page

A reusable shimmer-text effect for whatever's actively running — an in-progress task, a streaming response, a loading label. Built on the shimmer utility already shipped by this project's shadcn Tailwind layer.

pnpm dlx shadcn@latest add @ditherui/text-shimmer
Generating response…

Install

$ pnpm dlx shadcn@latest add @ditherui/text-shimmer

Props

durationnumber (ms)2000
pausedbooleanfalse
asChildbooleanfalse
className / style / ...span propsReact.ComponentProps<"span">—

When to use the agent task list

Use the task list to show the steps an agent is working through. The active task shimmers and tasks complete one at a time in order.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components