shadcn.io is not affiliated with official shadcn/ui
Drag to Sort Task List Block for React
A priority backlog you reorder by dragging a grip or pressing Move up and Move down, with a live numbered Order list beside it and the new position announced after every move.
Installation
Overview
Let people rank their own work, with this sortable to-do list block for React with Base UI. Each row has a grip you drag with a pointer and two buttons, Move up and Move down, that work with a keyboard or a touch screen and stay put at the ends of the list. After a move, focus stays on the button you used, a ring fades where the row landed and a polite status line says where it went ("Moved 'Pay the invoice' to 2 of 7"). At the end of the frame a numbered Order list renumbers as you go, and is the text version of the order. Each task is a Checkbox, ticking one never moves it, and a Shine Button with an Input adds a task at the end. The frame and its split are ruled by Guides. On a phone the Order list drops under the backlog. For backlogs, priority lists and ranked queues.
FAQ
How does the drag work without a library?
Pressing a grip captures the pointer on the list. While you move, the row under the pointer is found with elementsFromPoint and the dragged task takes its place; releasing drops it. The grip is hidden from assistive technology because the Move buttons do the same job for keyboards and screen readers.
How do I reorder with the keyboard?
Tab to a row's Move up or Move down button and press Enter or Space. After the move focus stays on that task's button, so you can press it again to keep going. The button's name includes the task title.
What is the Order list for?
It shows the same order as a plain numbered list, so the result of a drag or a button press is readable at a glance and by a screen reader. It renumbers on every move.
Related
- Pro
A plain task list with an add field, checkboxes that count what is done, delete and Clear done, and a one-line Undo that puts removed tasks back where they were.
- Pro
A task list where finished tasks carry an Archive button, one header action archives them all with an Undo, and a closing Archive section restores tasks one at a time or all at once.
- Pro
Eighteen tasks on shared hairlines in two columns, with a Compact and Comfortable row switch that never moves the page, and an Add task button that opens a row in the first cell.
- Pro
A late-night task list that draws each check and runs a line through a finished title, with a soft glow on the row you are on and a rolling count of what is left.
- Pro
A quiet task list with no row borders or counters: ticked tasks fold into a closed Done section, rows can be renamed in place, and one field at the foot adds a task.
- Pro
A task finder with a search field that marks matching words, All, Open and Done tabs with live counts, a foot that says what is showing, and an empty state with a way back.