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>
);
}