shadcn.io is not affiliated with official shadcn/ui
Quick Add Task Dialog Block for Ark UI
A task list with a Quick add dialog shown open: one field that reads typed marks for priority, person, tag and due date, shows them as removable chips and files the task at the top.
Installation
Overview
Let people capture a task without leaving the keyboard, with this quick add dialog for React with Ark UI. It sits on the task list of Jotsill, a capture-first task app: the page's header holds an outline Quick add Button, and the list is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog holds one Input in a Field that reads a few typed marks as you go: !high or !low for priority, @nora for who, #home for a tag, and >fri, >tomorrow or >20oct for a due date worked out from a fixed day. Typing @ offers the four people as buttons, each recognised mark becomes a chip you can remove (removing it strips the word from the text), and one line shows the task as it will be filed. Add task, the only Shine Button, puts it at the top and the list's count goes up. For preview the dialog is drawn open in place when the page loads; Quick add opens the real Dialog with the same field and the same chips. For capture-first task apps, inboxes and any product where adding must be fast.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the list: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Quick add button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same QuickFields component and share the block's state, so text typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How are the marks read, and is it a model?
No model: it is a handful of typed rules in readWord, applied to each word. A word that starts with ! and says high or low is a priority, @ plus one of the four handles is a person, # plus letters is a tag, and > plus today, tomorrow, a weekday or a day and month (20oct) is a due date. Weekdays mean the next one after the fixed AS_OF day, and a day and month that has passed rolls to next year. A word that matches no rule stays in the title.
What do the chips do?
Each chip names what was understood ("Due: Fri 16 Oct") and has a remove button named for it. Removing a chip deletes that word from the text, so the field and the chips never disagree, and the polite status line says so. Marks you type twice are all shown; the last one wins for priority, person and date.
What stays local, and how do I save for real?
Everything. Add task puts the task at the top of the list in local state, bumps the count in the header and says in a polite status message that nothing is saved. In your app post the parsed task from add, load the people from your API in place of PEOPLE, and swap AS_OF for the current date.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts in the field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Quick add. The trigger is the Quick add button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus. The people offered after @ are buttons in a labelled list, and an empty field shows its problem under the field and keeps focus there.