shadcn.io is not affiliated with official shadcn/ui
Natural Language Task List Block for Ark UI
A task field you write in plain words, such as call the landlord next Friday at 5pm high priority #home, that underlines what it understood and lists the due date, priority and tags with a Not this button on each.
Installation
Overview
Let people write a task the way they would say it, with this natural language to-do list block for React with Ark UI. A hairline frame with a plus mark on each corner holds an Input and the only Shine Button, Add task, with a line under the field that repeats your sentence and underlines each phrase the parser understood. A "Parsed as" band lists what it found in four rows: the task, the due date and time ("Fri 23 Oct 17:00"), the priority and the tags. Every phrase has a Not this button that puts those words back into the title, so a wrong guess costs one press. Below, a held-height list of Checkbox rows shows the tasks with their dates worked out from a fixed day. The patterns are listed in RULES and are plain regular expressions: today, tomorrow, next week, a weekday, next Friday, in 3 days, 20 Oct, 5pm, at 17:30, high priority, urgent and a #tag. For planners, inboxes and any product where typing a sentence beats filling a form.
FAQ
How does it understand the sentence, and is it a model?
It is not a model. RULES is a short list of patterns, each with a function that turns its match into a value, and they run over your text. The matches are sorted by where they start, a phrase inside a longer one is dropped, and only the first date, time and priority count (every tag does). What is left, tidied of stray connectors like "on" and "at", is the title. The patterns are typed in the file, so you can read them, add one or change what "next week" means.
What does next Friday mean, and what is today?
Dates are worked out against AS_OF, a fixed Wednesday 14 October 2026, so the server and every visitor agree. A plain weekday is the next one after today ("Friday" is 16 Oct), and "next Friday" is that weekday in the week that starts next Monday (23 Oct). A day and month that has already passed rolls to next year. Point AS_OF at the current date in your app.
What does Not this do?
It tells the parser to leave that phrase alone. The words go back into the title in their place, the row falls back to its default ("No date", "Normal") and the polite status message says which phrase came back. The choice lasts until you add the task or edit the sentence into something new.
What stays local, and how do I save for real?
Everything. Add task puts the parsed task at the top of the list in local state and the list resets on reload. In your app send the parsed fields from add to your server, or send the raw sentence and let the server run the same rules, so the two never differ.
Is it accessible?
The field has a visible label, the understood phrases are underlined and also spoken (each carries an off-screen word for its kind), an empty submit shows its problem under the field and keeps focus there, and each Not this button is named for its phrase. One polite status message reports what changed. Underlines are never the only cue: the Parsed as list says the same in words.