shadcn.io is not affiliated with official shadcn/ui
Eisenhower Matrix Kanban Block for Svelte
An Eisenhower matrix of eleven tasks in Do first, Schedule, Delegate and Eliminate quadrants, where Delegate asks for an owner and Eliminate is the not-doing pile.
Installation
Overview
Sort a week into what to do, plan, hand off or drop with this Eisenhower matrix for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four quadrants laid out as a grid, urgency across and importance down: Do first, Schedule, Delegate and Eliminate. Each of the eleven tasks is a card with its due date and how many days away it is, worked out from a fixed date. A task in Delegate asks for an owner with a Native Select and says "Needs an owner" until one is chosen, and Eliminate is the not-doing pile. The sentence under the heading counts what is being done, delegated and dropped. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to"; a polite status line reports each move and Reset restores the matrix. The frame is ruled by Guides. On a phone the quadrants stack in one named region. For a personal week, a team's backlog triage and any list that needs a decision per item.
FAQ
How do I fill it with my own tasks?
Edit COLUMNS, OWNERS and START. A task has an id, a title, a column of do, plan, hand or drop, an ISO due date or "", and an owner that stays "" until someone is chosen. The days to a due date are counted from AS_OF, and the header counts are calculated from the cards.
What does Delegate do that the others don't?
Only a task in Delegate shows the owner select, because that is the quadrant where somebody else has to take it. Until one is chosen the task says "Needs an owner" and the header and the status line count how many are still waiting. The owner is kept on the task if it leaves and comes back.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the task's title. Space or Enter picks it up, the arrow keys move it (left and right change quadrant along the row, up and down reorder and then cross to the quadrant above or below; they swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the four quadrants with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The moves and the owners live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the people and the cards are made up. To keep a change, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The quadrants stack one under another in a named region that scrolls up and down, each at a fixed height with its own scrolling list, so the page does not jump when a task moves. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.