Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Priority Task List Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Put the tasks that matter first, with this prioritised to-do list block for React with Radix 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.

What stays local, and how do I save for real?

Everything. The tasks live in page state and nothing is sent anywhere, so the list resets when you reload. In your app write each change from add, toggle, pickLevel and sortNow to your own store and load the first list from it.

How does it look on a phone?

The filter pills scroll sideways in their own row, each task is a title with its due date under it and the level button at the end, and a long list scrolls inside a named region instead of lengthening the page.

All 100 todo list blocks