Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar Event Notification Block for React

A meeting about to start in a scheduling app: a catalog Timer counting down to it with a Pause, the agenda with start times, who is coming with an RSVP, Join call, Snooze 5 minutes and a real calendar file to download.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Remind people of a meeting just before it starts, with this calendar event notification for React with Base UI. It is Slotmoor, a scheduling app, telling you the design standup begins in ten minutes, in three bands. The first has the event's facts in a Data List and the catalog Timer counting the minutes and seconds down to the start, with a Pause that holds it. The second lists the agenda, each item with its start time worked out from the lengths before it, and who is coming as an Avatar group with an RSVP in a Segment Group (Yes, Maybe, No) whose counts follow your answer. The third holds the actions: Join call, the one Shine Button; Add to calendar, a real download of an .ics file; and Snooze 5 minutes. Guides draw the lines. For meeting reminders, class starts, webinars and anything with a start time and a join link.

FAQ

How do I fill it with my own event?

Edit EVENT (the title and the start as an ISO time in UTC), AGENDA (each item has minutes; their sum is the length and the end time) and PEOPLE (initials, name and answer). AS_OF is the page's fixed "now": the countdown starts at the start time minus that, so in your app give the Timer the real time left, and format times in the viewer's zone if you prefer.

Does the countdown run by itself?

It begins once the page is running in the browser (the server draws dashes), counts down from the typed ten minutes and stops at zero, where the card says it is starting now. A visible Pause holds it and Pause again lets it go on, from the same moment. Under reduced motion the seconds are hidden and the clock moves by the minute. The digits are decorative: the sentence beside them ("Starts in 9 minutes") carries the time, and it changes only once a minute.

Is the calendar file real?

Yes. Add to calendar downloads a standards-based .ics file built from the typed event: the title, the start and end in UTC, the agenda in the description and an alarm five minutes before, with CRLF line ends and long lines folded. Open it in any calendar app. The time is fixed on 14 October 2026, so replace EVENT before you ship it.

What really happens when I press the buttons?

Join call only says what it would do ("In your meeting app this opens the call") and opens nothing. Your RSVP, the snooze and the pause live on this page: your answer changes the counts, Snooze 5 minutes sets the next reminder to a time five minutes after the page's now and Undo snooze takes it back. Nothing is sent to the others. In your app send the RSVP to your server and schedule the reminder there.

Does anything move when I answer, snooze or pause?

No. The countdown cell keeps its size, the counts line has room for its longest wording, the next reminder is always a line of the facts ("None" until you snooze), and the status line keeps two lines on a screen of ordinary width and three on a phone.

Is it accessible?

The RSVP is a named group of choices, the Pause is a toggle button that says whether it is pressed, every result is said once in a polite status line, and the avatars are decorative beside a sentence that counts who is going. The countdown does not announce each second.

  • Pro

    An event countdown for a developer conference: a calendar tile with the name and a sentence saying when it starts, four cells of days, hours, minutes and seconds in a corner-marked frame, and a Shine Button to reserve a seat.

  • Pro

    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.

  • Pro

    A board pack due tomorrow evening in two hairline cells: a risk word, a progress bar and the working hours to go on one side, subtask checkboxes with their hours on the other, so ticking one recomputes the risk, plus a popover to request an extension.

  • Pro

    Snooze Notification

    Quiet and digests

    A notification with a snooze popover: Later today, Tomorrow and Next week worked out from one fixed time, a custom hour, a Snoozed list with wake times and a Wake now that sends one back.

  • Pro

    Two pending workspace invitations with who invited you, the role as a glyph and a word and the time, each answered in place without moving: Accept leaves a receipt with Undo and Switch workspace, Decline asks first, and the count follows.

  • Pro

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.