shadcn.io is not affiliated with official shadcn/ui
Priority Task List Block for React
A task list where each row carries a High, Medium or Low priority picker, a filter row with counts, a Sort by priority button that reorders only when pressed, and a foot that counts the open High tasks.
Installation
Overview
Put the tasks that matter first, with this prioritised to-do list block for React with Base UI. Every row shows a Checkbox named by its title, a due date worked out from a fixed day, and a priority button made of a signal glyph and the word High, Medium or Low. Pressing it opens a small Popover of the three levels, so a priority never changes by accident. A filter row of pills with counts narrows the list to one level and scrolls sideways on a phone, and the foot counts the open High tasks. The outline Sort by priority button reorders the list only when you press it, High first and in the same order within a level, then says "Sorted: High first." An add field with the Shine Button puts a new task at the top at Medium, and an Empty state fills the list when a level has no tasks. Guides rule the bands. For personal task apps, support queues and any list where order is the point.
FAQ
How is priority shown without colour?
Each level is a signal glyph (one, two or three bars) and its word, so it reads in any theme and in greyscale. Nothing uses red, amber or green. The row button is named for the task and the level, for example "Priority of 'Renew the parking permit': High. Change."
Why doesn't the list re-sort when I change a priority?
Rows never move under your pointer. Changing a level updates the glyph and the counts only; Sort by priority is the one action that reorders. The sort is stable, so tasks of the same level keep the order they already had.
How does the level picker work with the keyboard?
Enter or Space on the button opens it, the arrow keys move between the three levels and set the one you are on, and Escape closes it and returns focus to the button. A mouse click on a level also closes it.