shadcn.io is not affiliated with official shadcn/ui
Split View Task List Block for React
A tasks window with a keyboard-walkable list at the start and the chosen task's title, notes, due date, priority, Mark done and Delete at the end, with New task, Undo and one pane at a time on a phone.
Installation
Overview
Edit a task beside the list it came from, with this split view to-do list for React with Base UI. A fixed-height window has a top bar with the title, a count and the only colored control, a Shine Button called New task that adds a task at the top and selects it. At the start is the list of ten tasks, each a Checkbox named by its title beside a button with its due label and priority: Up and Down move between tasks, Home and End jump, Enter picks one. At the end the chosen task is open for editing: an Input for the title, a Textarea for notes with a character count, a date field for the due date, a Segment Group for the priority, an outline Mark done button and a Delete button. Edits apply as you make them, Delete leaves a one-line Undo in the foot, and the window never changes height: only the list and the detail scroll. Below the medium breakpoint it shows one pane at a time with a Back button. For task apps, inboxes and any master and detail screen.
FAQ
How do I load my own tasks?
Replace START. Each task has an id, a title, notes, an ISO due date (an empty string for none), a priority of low, medium or high and a done flag. The list, the counts and the detail all read from that array.
What stays local, and how do I save for real?
Everything. Edits, ticks, new tasks and deletes change state on the page and nothing is sent, so the tasks come back as they were after a reload. In your app save from change (one call per edit, or debounce the typing), startNew and remove.
How does the keyboard work in the list?
Only the chosen task is in the tab order. Up and Down move focus to the next or previous task without choosing it, Home and End go to the first and last, and Enter or Space picks the focused one. The checkboxes are separate stops so ticking never changes which task is open.
Can I take a delete back?
Yes. Delete removes the task, opens its neighbour and shows "Undo" in the foot; Undo puts the task back at the same position and selects it. The foot holds one delete at a time.
Is it accessible?
Every field has a visible label, the priority group is named by its label, the list is a list of buttons with aria-current on the open task, and a polite status message in the foot announces each change. Focus moves to the new task's title, to a neighbour after a delete, and to the details heading when a task is picked on a phone.