shadcn.io is not affiliated with official shadcn/ui
Basic Task List Block for Vue
A plain task list with an add field, checkboxes that count what is done, delete and Clear done, and a one-line Undo that puts removed tasks back where they were.
Installation
Overview
Give people a task list that does the basics well, with this to-do list block for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an add band with a labelled Input and the only colored control, a Shine Button that adds the task at the top; an empty submit says "Write a task first" under the field and keeps focus there. Below it a held-height list shows seven tasks, each a Checkbox named by its title with a due date worked out from a fixed day ("Overdue 2 days", "Today", "Fri 16 Oct"), and a ghost button that deletes it. The foot counts what is done with a rolling Sliding Number, clears the finished tasks with an outline button, and keeps a one-line Undo for the last delete or clear. Delete every task and an Empty state fills the same space. Bands are ruled by Guides, and the only motion is a CSS entrance. For personal task apps, onboarding checklists and any product that starts with a list.
FAQ
How do I load my own tasks?
Replace START with your tasks. Each has an id, a title, a done flag and an optional ISO due date. Due labels are worked out against the AS_OF constant, a fixed "today" that keeps the server and every visitor in agreement; point it at the current date when you use real data.
What stays local, and how do I save for real?
Everything. Adding, ticking, deleting, clearing and undoing change state on the page and nothing is sent anywhere, so the list resets when you reload. In your app write each change from add, toggle, remove, clearDone and undo to your own store, and load the initial list from it.
How does Undo work?
Deleting a task or clearing the done ones removes them and shows one line, for example "Deleted 'Order paint samples'", with an Undo button. Undo puts them back at the same positions they had, not at the end. The line holds one removal; adding a task or removing another replaces it. There is no toast, so nothing disappears on a timer.
Is it accessible?
Each checkbox is named by its task title, the delete button names the task it removes, and the add field has a label. A single polite status message announces what changed ("Added 'x' at the top", "3 archived. Undo is available"). Done is shown by the checkbox, a muted color and a strike through the title, never by color alone, and Clear done stays focusable and answers when nothing is done.