Todo List

Component

About

A compound checklist component that renders a titled list of toggleable tasks, each with a round checkbox that fills in with a check mark when marked done.

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

Code

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

Usage.tsx

import { Todo } from "@/components/ui/todo";

export default function TodoDemo() {
  return (
    <div
      style={{
        width: "100%",
        minHeight: "100%",
        padding: "2rem",
        background: "var(--eink-color-background)",
        color: "var(--eink-color-primary)",
      }}
    >
      <Todo onChange={(id, checked) => console.log(id, checked)}>
        <Todo.Item id="water-plants">Water the plants</Todo.Item>
        <Todo.Item id="feed-cat">Feed the cat</Todo.Item>
        <Todo.Item id="pay-rent">Pay rent</Todo.Item>
      </Todo>
    </div>
  );
}