Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Bulk Actions Task List Block for Vue

An inbox task list with a select-all box, Shift-click ranges, and a closing action bar to Complete, Move to a day, set Priority or Delete the selection, each with Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Clear a pile of tasks in a few clicks, with this bulk actions to-do list block for Vue with Ark UI. A select-all box with a mixed state heads the list, every row has its own box, and Shift-click or Shift+Space selects the range from the last box you touched. The closing band is always there: "Select tasks to act on them" until you pick some, then "3 selected" with Complete (the Shine Button), Move to and Priority, which are native selects that apply the moment you choose, and Delete, which asks first in an Alert Dialog. Each action changes the rows, says what it did, and leaves a one-line Undo that puts the list back exactly. Delete every task and an Empty state fills the same height. The frame is ruled by Guides. For inbox cleaners, backlogs and any list you triage in batches.

FAQ

How do I load my own tasks?

Replace START. A task has an id, a title, a done flag, an ISO due date and a level of 0 to 2 for Low, Normal or High priority. Due labels such as "Overdue 2 days" or "Fri 16 Oct" are worked out against the fixed AS_OF date.

How does range selection work?

Click one box, then Shift-click another, or focus a box and press Shift+Space: every task between the two is selected, or cleared if you were clearing. The last box you touched is the anchor for the next range.

What does Undo restore?

The whole list as it was before the last action, including due dates, priorities, done flags and deleted rows in their old positions. It holds one action at a time, and a new action replaces the line. Delete asks for confirmation first and can still be undone.

What stays local, and how do I save for real?

Every action changes page state only and the list returns to its start on reload. Send the picked ids and the change from apply to your own API, and keep the snapshot on the client if you want Undo to work offline.

Is it accessible?

Each box is named "Select" plus the task, the select-all box reports a mixed state, the action controls are named for what they change, and one polite status message announces each result. The sticky bar of other libraries is not used, so the actions stay in the page order.

All 100 todo list blocks