shadcn.io is not affiliated with official shadcn/ui
Do Not Disturb Notification Block for React
A focus app's do-not-disturb panel: a status card that says in a sentence what the settings amount to, a 24-hour strip of the muted hours, one hour, until tomorrow or a nightly schedule, and the calls that still get through.
Installation
Overview
Mute an app without losing track of when it ends, with this do-not-disturb panel for React with Base UI. A compact header holds the title and one Switch for the whole thing. Inside a hairline frame with a plus mark on each corner, a status card comes first: a badge (Muting, Scheduled or Flowing, each with its own shape), a sentence such as "Muting until Wed 14 Oct, 10:30 UTC", a strip of the next 24 hours with the muted ones shaded and a mark for now, and a short list of the length and what still gets through. Beside it the controls: a Segment Group to mute for 1 hour, until tomorrow or on a custom nightly schedule, two Native Selects for its start and end, and three Checkboxes for the exceptions (starred calls, a second call within three minutes, on-call alerts). Every time is worked out from one typed "now", so nothing ticks. It's built from Switch, Segment Group, Native Select, Checkbox, Badge, Field and Guides, with a CSS entrance only. For a focus mode, a meeting app's quiet hours or any app that can be silenced for a while.
FAQ
Where do the times come from, and does anything tick?
From AS_OF, a typed time at the top of the file (Wednesday 14 October, 09:30 UTC), and the settings. One hour ends at 10:30, until tomorrow at 09:00 the next day, and a custom schedule is read as "every day from this time to that one", wrapping past midnight. Nothing reads the clock and nothing ticks, so the page says the same thing every time you open it. In your app replace AS_OF with the current time, read after the page loads, and recompute when a stretch ends.
What does the custom schedule say?
If the stretch is running now, the card says "Muting until" and the time it ends. If not, it says "Quiet from" and the next start, with the badge reading Scheduled and a line that notifications flow until then. Changing the start or end time switches the group to Custom for you, and if the two times are the same the card says to pick two different times and the end time is marked invalid.
How do I read the 24-hour strip?
It draws the 24 hours from the one that now falls in, an hour per cell, with a mark where now is. The muted stretch is shaded, partly where it starts or ends inside an hour, and the shade is lighter while the switch is off, to show what turning it on would mute. It is drawn in foreground tones only, and a screen reader gets one sentence for it ("The next 24 hours from 09:00 UTC: muted from 09:30 to 10:30 UTC.").
What do the exceptions do?
They are three typed choices that the card lists back in words ("Starred calls and on-call alerts", or "Nothing" when none is ticked). They change what the card says and nothing else: this demo has no calls to let through. In your app, send the ticked ones with the schedule so your server knows what to deliver while muted.
What stays local?
All of it. Nothing is saved or sent: the switch, the mode, the times and the exceptions live in the page, and a polite status message says the sentence the card ends on after every change. To make it real, store the settings with the account, let your notification service check them before it delivers, and keep the card's sentence as the proof the person sees.
Related
- Pro
Sound Toggle Notification
PreferencesA meeting app's sound settings: a master switch, a volume slider with a level meter, a switch and a tone for each kind of notification, and a Play button that makes a real short tone in your browser when pressed.
- Pro
Preference Matrix Notification
PreferencesA notification preference matrix: five kinds of notification down the page and four channels across, a checkbox in every cell, an all-types row that turns a channel on or off, marks on changed cells and an unsaved count.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.
- Pro
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- 621Pro
Digest View Notification
Quiet and digestsA morning digest panel: tabs for Today, Yesterday and This week, three cells of counts that roll to each period, sections with the top three items and +N more, and an email switch that sends nothing.
- Pro
Low-Priority Updates Bundle Notification
Quiet and digestsA quiet notification bundle: seven low-priority updates folded into one row that opens into the list, with a dismiss per row, Dismiss all with an Undo, and a switch that moves what remains to a digest at a time worked out from the page's now.