# Todo 1 - Simple checkbox todo list

> A simple todo list with a heading, task titles, and checkboxes that toggle completion and fade completed items.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/todo1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/todo1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/todo1-light-a53df8e4039949fc.png
- Registry item: https://shadcnblocks.com/r/todo1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/todo1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `checkbox`, `item`

## Files

### `block/todo1/todo1.tsx`

```tsx
"use client";

import { useState } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import {
  Item,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const initialTodos = [
  {
    id: "1",
    title: "Complete project documentation",
    completed: false,
  },
  {
    id: "2",
    title: "Purchase Shadcn blocks from shadcnblocks.com",
    completed: false,
  },
  {
    id: "3",
    title: "Buy groceries",
    completed: false,
  },
  {
    id: "4",
    title: "Morning workout routine",
    completed: true,
  },
  {
    id: "5",
    title: "Read React documentation",
    completed: false,
  },
];

const Todo1 = () => {
  const [todos, setTodos] = useState(initialTodos);

  const toggleTodo = (id: string) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

  return (
    <section className="py-32">
      <div className="container">
        <div className="mx-auto flex max-w-2xl flex-col gap-8">
          <div className="flex flex-col gap-2">
            <h2 className="text-3xl font-semibold md:text-4xl">
              Simple Todo List
            </h2>
            <p className="text-muted-foreground">
              Click tasks to toggle completion status with visual feedback
            </p>
          </div>
          <ItemGroup>
            {todos.map((todo) => (
              <Item
                key={todo.id}
                variant={todo.completed ? "muted" : "default"}
                className={`cursor-pointer items-center border-b transition-opacity ${
                  todo.completed ? "opacity-60" : ""
                }`}
                onClick={() => toggleTodo(todo.id)}
              >
                <ItemMedia>
                  <Checkbox
                    checked={todo.completed}
                    onCheckedChange={() => toggleTodo(todo.id)}
                    onClick={(e) => e.stopPropagation()}
                  />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle
                    className={
                      todo.completed ? "text-muted-foreground line-through" : ""
                    }
                  >
                    {todo.title}
                  </ItemTitle>
                </ItemContent>
              </Item>
            ))}
          </ItemGroup>
        </div>
      </div>
    </section>
  );
};

export { Todo1 };
```