Task List

Component 134

About

Task List This component renders a list of tasks in a table format. It features a staggered animation for list items, making the UI feel dynamic and modern. It's designed to be highly reusable, accepting a title and an array of tasks as props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Task List to your project and fits it to your theme.

Code

How Task List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { TaskList, Task } from "@/components/ui/task-list"; // Adjust the import path

const Demo = () => {
  // Sample data to populate the task list
  const sampleTasks: Task[] = [
    {
      id: 1,
      task: "Schedule initial client meeting",
      category: "Discovery",
      status: "Completed",
      dueDate: "June 3, 2025",
    },
    {
      id: 2,
      task: "Gather business goals and user needs",
      category: "Discovery",
      status: "Completed",
      dueDate: "June 4, 2025",
    },
    {
      id: 3,
      task: "Review current website performance",
      category: "Discovery",
      status: "In Progress",
      dueDate: "June 5, 2025",
    },
    {
      id: 4,
      task: "Create wireframes for key pages",
      category: "Design",
      status: "Pending",
      dueDate: "June 10, 2025",
    },
    {
      id: 5,
      task: "Develop high-fidelity mockups",
      category: "Design",
      status: "Pending",
      dueDate: "June 15, 2025",
    },
  ];

  return (
    <div className="flex items-center justify-center h-full w-full bg-background p-4 md:p-8">
      <TaskList tasks={sampleTasks} />
    </div>
  );
};

export default Demo;