shadcn.io is not affiliated with official shadcn/ui
Eisenhower Matrix Task List Block for Radix UI
Eight tasks with Urgent and Important toggles that work out each task's quadrant, a 2 x 2 band of Do first, Schedule, Delegate and Delete with counts, a quadrant filter and an Assign select for delegated work.
Installation
Overview
Sort a task list by what actually needs doing, with this Eisenhower matrix to-do list block for React with Radix UI. A hairline frame with a plus mark on each corner holds eight tasks, each a Checkbox named by its title with two toggle buttons, Urgent and Important, that show a tick when they are on. The quadrant is never typed: both on is Do first, important only is Schedule, urgent only is Delegate and neither is Delete, and the task's second line says which one it is the moment you press. A 2 x 2 band under the list names each quadrant with its count and its tasks. Pressing a quadrant's name narrows the list to it, pressing it again clears the filter, and a held-height list keeps the panel the same size either way, with an Empty state for a quadrant with nothing in it. Delegate tasks carry a Native Select to assign them. Bands are ruled by Guides. For prioritising workshops, weekly planning and any app that helps people decide before they start.
FAQ
How is the quadrant decided?
From the two toggles and nothing else. quadOf(task) returns Do first when both are on, Schedule when only Important is, Delegate when only Urgent is, and Delete when neither is. Because the quadrant is derived, the 2 x 2 band, the counts and the second line of each row always agree, and there is no separate place to move a task to.
What does pressing a quadrant do?
It narrows the list above to that quadrant and shows "3 of 8 shown". Pressing the same quadrant again, or Show all, brings every task back. The list region keeps its height while it filters, and a quadrant with no tasks shows an empty state in the same space.
What stays local, and how do I save for real?
Everything. Ticking, flipping a toggle and assigning change state on the page, and the board resets when you reload. In your app write each change from the done, flip and assign handlers to your own store, and load the tasks from it. The assignees are a typed list of teams; replace PEOPLE with your own users.
Is it accessible?
Each toggle is a button with aria-pressed and a name that carries its task ("Urgent, Fix the checkout error"), and a tick appears when it is on, so state never depends on colour. Quadrant names are buttons with aria-pressed, the lists inside the band are named scroll regions you can reach by keyboard, and one polite status message says where a task moved ("It moved to Do first").