Something new is coming.Join the waitlist

Todo List

PreviousNext

Minimal todo list with animated check, strikethrough, slide-right, and smooth reorder to the bottom when completed. Built with Framer Motion layout transitions.

Open fullscreen demo

Installation

npx shadcn@latest add https://tentui.com/r/todo-list.json

Usage

"use client";
 
import { TodoList } from "@/components/todo-list";
 
export function Tasks() {
  return (
    <TodoList
      defaultItems={[
        { id: "1", label: "Organize a user testing session" },
        { id: "2", label: "Prepare designs for client review" },
        { id: "3", label: "15-minute meditation" }
      ]}
    />
  );
}

Click an item to mark it complete — the checkbox fills, a strikethrough draws across the label, the row nudges right, and the item glides to the bottom of the list. Click again to undo.

Props

PropTypeDefaultDescription
itemsTodoItem[]—Controlled list items.
defaultItemsTodoItem[]demo itemsInitial items when uncontrolled.
onItemsChange(items: TodoItem[]) => void—Fired when an item is toggled.
classNamestring—Forwarded to the root <ul>.

Each TodoItem has id, label, and optional completed.