Ai Task List

A list of tasks with status indicators, nested steps, and visual feedback. Renders checkmarks on completion and an underline for running tasks. Use to show an agent's progress with clear visual cues.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-task-list

npx layro-cli add @educlopez/ai-task-list

npx layro-cli add @educlopez/ai-task-list

bunx layro-cli add @educlopez/ai-task-list

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { Fragment } from "react";

const SPRING_DEFAULT = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};
const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;
const CHECK_PATH = "M 3.5 7.5 L 6 10 L 10.5 4.5";
const BOX_SIZE = 14;