Todo Tower, animated React component

A to-do list stacked like bricks. Tick a task or drag it out sideways and the pile drops into the gap with a bounce; any brick left hanging too far over the one below tips off the edge.

Pro
Cards
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Call the landlord

Pay the invoice

Export the icons

Book the flights

Renew the domain

Reply to Nadia

Tick one, or drag one out sideways.

Props

Prop	Type	Default	What it does
tasks	TodoTowerTask[]	TODO_TOWER_TASKS	Starting pile, top to bottom. Each task has text and x, its sideways offset in px.
moreTasks	string[]	TODO_TOWER_MORE	Labels the Add a task button drops onto the top of the pile, in turn.
overhang	number	24	How far (px) a brick may hang past the one beneath it before it tips off.
maxBricks	number	8	Most bricks the pile holds; adding does nothing past this.
onComplete	(text: string) => void	—	Called with a task's label when it is ticked off.
autoplay	boolean	false	Ticks tasks off and adds new ones by itself until someone touches the pile.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/todo-tower
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
todo-tower/
index.ts
todo-tower.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { TodoTower } from "@/components/todo-tower";

export default function Page() {
  return (
    <main>
      <TodoTower />
    </main>
  );
}

TodoTodo Tower, animated React component

Play with it

Props

More cards

Todo Tower, animated React component