shadcn.io is not affiliated with official shadcn/ui
No Reminders Empty State Block for Vue
A reminders app with nothing set: a Remind me popover drawn open over a note with three empty slots, an hourglass whose sand has not fallen, a field and three presets that write a day and time, and one Set reminder button.
Installation
Overview
Show an empty reminders list with the one popover that fills it, with this no reminders empty state for Vue with Ark UI. A header holds the real Remind me button for Nudgeroot, a reminders app. Under it a stage draws a note with three empty slots, and drawn open in place beside a twin of that button is the app's popover card: an hourglass whose sand has not fallen (a dashed line marks where it will pile), an Input for what to be reminded of and three presets, each showing the day and time it writes: In 1 hour, Tomorrow morning and Next Monday. The Shine Button, the only colored control, sets the reminder: a row appears on the note behind the card and the sand turns solid. The card sets a reminder and nothing else; the repeat, the calendar and the channel are for a settings form. The frame's corners come from Guides, and the whole block uses CSS transitions only. Shown open in place for the preview; in your app keep the Popover and drop the in-place copy.
FAQ
What happens when I press Set reminder, and what stays in the page?
The reminder goes into the page's state: a row with its text and its day and time appears on the note behind the card, the count reads one of three and the sand in the hourglass turns solid. Nothing is saved, scheduled or sent, and nothing will ever fire: reload and the note is empty again, and Start over empties it without a reload. To wire it for real, hand the text and the time to your scheduler where the code says so and list what comes back.
Where do the days and times come from?
From a typed "now": Friday 9 October 2026 at 08:40, never the clock. In 1 hour is that day at 09:40, Tomorrow morning is Saturday 10 October at 09:00 and Next Monday is Monday 12 October at 09:00, all worked out with UTC date arithmetic. In your app, compute the presets from the visitor's own time after mount.
What part is the preview's, and what is real?
On load the card is drawn in place on the stage so the page does not trap or move focus. The Remind me button opens the real, non-modal Popover (Escape closes it and focus goes back to the button) and the in-place copy stays closed until a reload. Both share one form and the page's state, so what you typed in place is there in the real card. In your app keep the Popover and delete the in-place copy.
Is it usable with a keyboard and a screen reader?
Tab reaches the field, the three presets (a radio group, so the arrow keys move between them) and Set reminder. Each preset is named with its words and its date. Set reminder with an empty field says so and puts focus back in the field. The note behind the card is drawn and hidden from assistive technology; the polite status line says what was set ("Reminder set for Sat 10 Oct, 09:00 in this demo. Nothing will fire.").