shadcn.io is not affiliated with official shadcn/ui
Task Inbox Kanban Block for Vue
A three-column personal inbox (Inbox, Today, Done) with a capture field that adds a task on Enter and a round check that moves a card to Done and back.
Installation
Overview
Clear a pile of small jobs with this task inbox for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Inbox, Today and Done, and nine tasks, with a capture field above them: type a task and press Enter, or the Add button, and it lands on top of Inbox while focus stays in the Input, so a list can be poured in from the keyboard. The round Checkbox on every card is a move: ticking sends the task to Done, struck through, and unticking returns it to the column it came from. Cards also move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". Each column head counts its cards and the sentence under the heading is worked out from them; a polite status line reports each change and Reset restores the inbox, added tasks included. On a phone the columns scroll sideways in one named region. For to-do apps, capture tools and any inbox you sort by hand.
FAQ
How do I fill it with my own tasks?
Edit COLUMNS and START. A task has an id, the column it starts in, an origin (the column it returns to when unticked, normally the same), a short source line and a title. The counts and the header sentence are calculated from the cards.
How does quick capture work?
The field is a form: Enter submits it, the task goes on top of Inbox, the field clears and keeps focus, and the status line says "Added to Inbox" with the task. An empty field says "Write a task first" and adds nothing. New tasks live in the component's state, so Reset removes them. To keep them, post to your API from capture and use the saved task in the list.
Where does an unticked task go?
Back to the column it stood in before it was done, at the end of that column. The board remembers it in origin, which settleCards updates on every move that ends outside Done, so dragging a task from Inbox to Today and then ticking it returns it to Today when unticked.
How do I move a card without a mouse?
Tick its check for Done, or Tab to the grip at the start of the card, named "Move" with the task's title: Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced.
What stays in the demo?
Everything: tasks, ticks and moves live in the component's state, nothing is saved or synced, and a reload or Reset restores the starting inbox.
How does it look on a phone?
The capture field stays above the board, the columns scroll sideways with the next column showing and scroll up and down inside the board's fixed height, and the "Enter adds" hint gives way to the Add button. Touch drags from the grip only; the check and the menu move a card with a single tap.