shadcn.io is not affiliated with official shadcn/ui
Event Reminder Notification Block for Ark UI
A day planner's three reminders: a select sets how early each one comes and every time follows it at once, with Snooze in steps of five minutes, Skip and Restore, and a badge on the recurring events.
Installation
Overview
Let people decide how early a reminder should come, with this event reminder notification for React with Ark UI. It is Nudgeday, a day planner, listing today's three events: each row has the start time, the title and a line that says when it will remind you, worked out from the start and the lead time chosen in a Native Select above the list (5, 10, 15 or 30 minutes before). Change the lead and all three times change at once. Each reminder can be snoozed in steps of five minutes, never past the start, or skipped, and a skipped one is put back with Restore; the recurring events carry a Badge. One polite status line says what changed, and every row keeps its height. Guides draw the lines. For day planners, task apps, calendars and any list of things that remind you.
FAQ
How do I fill it with my own events?
Edit PLANS: each has an id, a title, a place, a start as an ISO time in UTC and repeats (empty for a one-off, or the word shown in the badge). LEADS are the choices of the select, SNOOZE_STEP and MAX_SNOOZES set how far Snooze goes. Every time on the page is worked out from the start and the lead, so there is nothing else to keep in step.
How does the lead time change the list?
A reminder comes the chosen number of minutes before the start: with 15 minutes, an event at 10:30 reminds you at 10:15. The select changes the lead for every reminder at once, the status line names the first time that results, and the times that are skipped are left out of it.
What do Snooze and Skip do?
Snooze moves one reminder five minutes later, up to three times and never past the start; the row says how far it was snoozed, and the button stays in place but goes quiet when there is nowhere to go, saying why in the status line. Skip turns that reminder off and shows Restore in the same place; Restore puts it back as it was. In this demo nothing is scheduled: the choices live on this page. In your app save them with the event.
Why a native select?
A native select opens the device's own picker, which is the best control for four fixed choices on a phone, and it needs nothing to work the same on every base. Its labels start with a number, so on an RTL page the select sits in an LTR box to keep "15 minutes before" in order.