Progress0 of 0 (0%)
Install Clerk SDK
package.json(json)
Configure ClerkProvider
src/app/layout.tsx(tsx)
Add middleware
src/middleware.ts(ts)
Create sign-in page
src/app/sign-in/page.tsx(tsx)
Create sign-up page
Progress0 of 0 (0%)
Check for security issues
Run test suite
Generate summary
Overview
A collapsible task list component for displaying AI agent workflow progress. Shows task status (pending, in-progress, completed, error) with a progress counter. Supports file references and custom task rendering.
Installation
bunx shadcn@latest add @elements/task-listUsage
import {
TaskList,
TaskListItem,
TaskListFile,
TaskListProgress,
} from "@/components/elements/ai-elements/agentic/task-list";
const tasks = [
{ id: "1", title: "Analyze codebase", status: "completed" },
{ id: "2", title: "Generate types", status: "in-progress" },
{ id: "3", title: "Write tests", status: "pending" },
];
export function TaskListExample() {
return (
<TaskList title="Implementation Tasks" tasks={tasks}>
<TaskListItem status="completed">
Analyze codebase structure
</TaskListItem>
<TaskListItem status="in-progress">
Generate TypeScript types
<TaskListFile filename="types.ts" language="TypeScript" />
</TaskListItem>
<TaskListItem status="pending">
Write unit tests
</TaskListItem>
</TaskList>
);
}Props
TaskList
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Tasks" | Header title |
tasks | TaskItem[] | [] | Array of tasks for automatic rendering |
defaultOpen | boolean | true | Initial open state |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
TaskItem
interface TaskItem {
id: string;
title: string;
status: TaskStatus;
description?: string;
}
type TaskStatus = "pending" | "in-progress" | "completed" | "error";TaskListItem
| Prop | Type | Description |
|---|---|---|
status | TaskStatus | Current task status |
description | string | Optional description |
TaskListFile
| Prop | Type | Description |
|---|---|---|
filename | string | File name to display |
language | string | Optional language label |
Features
- Progress counter (completed/total)
- Status icons with animations
- File reference badges
- Collapsible with smooth animations
- Automatic or custom task rendering
- Progress bar component