A task list with an add field, a check mark that draws itself, a strike-through that sweeps across the text, collapsing delete and up and down reordering that glides into place.
npx shadcn@latest add https://hyperblur.dev/r/list-todo-animated.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-todo-animated.tsx.
import { ListTodoAnimated } from "@/components/hyperblur/list-todo-animated"
<ListTodoAnimated defaultItems={[{ id: "1", text: "Review the pricing page" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; text: string; done?: boolean }[] | Controlled list. Pair with onChange. | |
| defaultItems | TodoItem[] | Initial list when uncontrolled. Three sample tasks are used when omitted. | |
| onChange | (items: TodoItem[]) => void | Called after every add, toggle, delete, reorder or clear. | |
| placeholder | string | "Add a task and press Enter" | Placeholder of the add field. |
| maxHeight | number | Maximum list height in pixels. The list scrolls beyond it. | |
| autoDemo | number | 0 | Milliseconds between automatic check and uncheck steps while nothing is hovered or focused. 0 turns it off. |
| accent | string | "#2f7bff" | Checkbox and progress color. |