shadcn.io is not affiliated with official shadcn/ui
Full Task Composer Block for React
A task composer with a required title, a due date with Today, Tomorrow and Next Monday quick picks, a priority, an assignee and a reminder, checked against real rules, beside a list that shows every field on each task.
Installation
Overview
Capture everything a project task needs in one place, with this task composer block for React with Base UI. A form built from Field, Input and Native Select asks for a required title, a due date (with Today, Tomorrow and Next Monday buttons worked out from a fixed day), a priority, an assignee and a reminder. The Shine Button adds the task, and the form checks itself first: a title is needed, a due date can't have passed, and a reminder needs a due date, one more than a day away for a day-before reminder. Each message sits under its own field and focus goes to the first wrong one. The list beside the form shows each task with its due label, priority glyph and word, assignee Avatar and a bell with the words "Reminder: 1 day before". Clear done keeps a one-line Undo and an Empty state fills the list. On a phone the form stacks above the list. For project trackers and any app with a rich task form.
FAQ
Which rules does the form enforce?
A title is required; a due date, when given, can't be before the fixed "today"; a reminder needs a due date, and "1 day before" needs a due date after today. The first wrong field gets focus and an error naming the fix.
Do reminders notify anyone?
No. A reminder is a label stored on the task and shown in the list. To send real ones, read remind and due on your server and schedule the message there.
How are the quick picks worked out?
From the AS_OF constant: Today is that day, Tomorrow the next, and Next Monday the first Monday after it. Point AS_OF at the real date in your app. The date field is a native date input, so it uses the device's own picker.