Loading…

Todo Tower

beta

To-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.

Display
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add todo-tower

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { TodoTower } from "@/components/ui/todo-tower";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery

API

Generated from the component's own types, so a prop cannot appear here without existing.

<TodoTower>

Prop	Type	Default
`checkLabel` The check button's name for a to-do.	`(label: string) => string`	(text) => `Done: ${text}`
`completedLabel` Announced when a to-do is completed.	`(label: string) => string`	(text) => `Completed: ${text}`
`defaultItems` Initial to-dos when uncontrolled, top of the stack first.	`TodoItem[]`	`[]`
`fill`	`"light" \| "dark"`	`"light"`
`gravity` How hard the stack pulls back together, 0–100.	`number`	`50`
`items` Controlled to-dos, top of the stack first.	`TodoItem[]`	—
`label` The list's accessible name.	`string`	`"To-dos"`
`loop` Re-drop the whole stack once the last card is done (uncontrolled only).	`boolean`	`false`
`onComplete` Called with the to-do that was completed.	`(item: TodoItem) => void`	—
`onItemsChange` Called with the remaining to-dos after one is completed.	`(items: TodoItem[]) => void`	—
`slip` How loosely the cards above a held one sway, 0–100.	`number`	`45`
`stroke`	`boolean`	—

Plus every attribute of <div> except defaultValue, onChange.

Accessibility

A labelled list. Each card's check is a real button named "Done: <task>", so Tab and Enter/Space complete tasks; completion is announced politely and focus moves to the card that drops into the gap. Dragging and swaying the stack is decoration with no keyboard equivalent because it does nothing. Under reduced motion there is no sway, flick or drop.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

checkLabel

The check button's name for a to-do.

(label: string) => string

(text) => `Done: ${text}`

completedLabel

Announced when a to-do is completed.

(label: string) => string

(text) => `Completed: ${text}`

defaultItems

Initial to-dos when uncontrolled, top of the stack first.

TodoItem[]

[]

fill

"light" | "dark"

"light"

gravity

How hard the stack pulls back together, 0–100.

number

50

items

Controlled to-dos, top of the stack first.

TodoItem[]

—

label

The list's accessible name.

string

"To-dos"

loop

Re-drop the whole stack once the last card is done (uncontrolled only).

boolean

false

onComplete

Called with the to-do that was completed.

(item: TodoItem) => void

—

onItemsChange

Called with the remaining to-dos after one is completed.

(items: TodoItem[]) => void

—

slip

How loosely the cards above a held one sway, 0–100.

number

45

stroke

boolean

—