shadcn.io is not affiliated with official shadcn/ui
Focus Mode Task List Block for Vue
A one-task-at-a-time view with the current task large, Done next and Skip for now buttons, a quiet Up next queue with Show all and a switch that hides the queue, and an empty state when the list is done.
Installation
Overview
Show people one thing to do, with this focus mode to-do list block for Vue with Ark UI. A hairline frame holds a card with the current task in large type, its context in a Badge and "Task 2 of 7", then the only colored control, a Shine Button labelled "Done, next", beside a ghost "Skip for now" that moves the task to the end of the queue and says so. Under it a quiet "Up next" list shows the next three tasks, "Show all" opens the rest inside the same box, and a Switch hides the queue altogether. Finish the last task and an Empty state, "That's the list", takes the card's place with a Start again button. Every state keeps the same height, and the frame is ruled by Guides. For focus apps, to-do widgets and any product that wants less on screen.
FAQ
How do I load my own tasks?
Replace TASKS with your tasks, each with an id, a title and a context, and list their ids in START in the order you want them shown. The position text, the queue and the counts are derived from the order and from how many have been finished.
What stays local, and how do I save for real?
Everything. Finishing, skipping and starting again change state on the page and nothing is sent anywhere, so the list resets when you reload. In your app write each result from finish and skip to your own store and load the order from it.
What does Skip for now do?
It moves the current task to the end of the queue, so the next one comes up, and the status line names both. If only one task is queued there is nowhere to skip to, and the status line says so instead of changing anything.
How do Show all and Hide the queue behave?
"Show all" appears when more than three tasks wait, and opens the rest inside the same fixed-height box, which then scrolls. Turning on "Hide the queue" replaces the list with one sentence in that same box, so nothing moves on the page either way.
Is it accessible?
The primary button keeps its place across tasks, the Show all button reports aria-expanded, the switch has a name and the list of upcoming tasks is a labelled ordered list. A single polite status message announces each finish, skip and restart, and after Start again focus moves to "Done, next".