Todo List Item

Component 80

About

A reusable animated todo list item component with swipe actions and strike-through animation. Inspired by the original non-reusable implementation by @alirdev and @sekachov design. Features: - Smooth strike-through animation on completion - Swipe gestures for actions - Action buttons for complete/delete - Theme support using shadcn/ui colors - Fully typed props

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

Code

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

Usage.tsx

import * as React from "react";
import { TodoItem, type Todo } from "@/components/ui/to-do-item";

const todosData: Todo[] = [
  { id: 1, title: "Complete documentation", completed: false },
  { id: 2, title: "Review pull requests", completed: false },
  { id: 3, title: "Update dependencies", completed: false },
];

export function TodoListDemo() {
  const [todos, setTodos] = React.useState(todosData);
  const [show, setShow] = React.useState<number | null>(null);

  const handleToggle = (id: number) => {
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t))
    );
  };

  const handleDelete = (id: number) => {
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

  return (
    <div className="flex flex-col gap-2 w-full max-w-sm">
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onComplete={handleToggle}
          onDelete={handleDelete}
          showActions={show}
          onShowActions={setShow}
        />
      ))}
    </div>
  );
}

export { TodoListDemo };