shadcn.io is not affiliated with official shadcn/ui
Low-Priority Updates Bundle Notification Block for React
A 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.
Installation
Overview
Keep the quiet notifications out of the way without losing them, with this low-priority bundle for React with Base UI. It is the quiet row of Mutefield, a low-priority digest service, in a narrow hairline frame with a plus mark on each corner: one summary, "7 low-priority updates since 08:00 UTC", that opens a Collapsible into the list, a dismiss on every row and a Dismiss all Button beside the summary that turns into an Undo. A dismissed row stays in its place as a struck line with its own Undo, so the list never changes height. Under it a Switch says "Move these to my 08:00 digest", and its sentence tells when that digest goes out: Thu 15 Oct at 08:00 UTC, worked out from the page's fixed now. A single polite status line says what changed. It is drawn with Guides and CSS motion only, and nothing is timed. For digests, notification centres and any feed with a quiet tier.
FAQ
How do I fill it with my updates?
Edit UPDATES: each has an id, an ISO at time and a title. SINCE is where the summary counts from, DIGEST_HOUR is the hour the digest goes out, and AS_OF is the page's fixed now, so the digest date ("Thu 15 Oct") is worked out once from it and reads the same for every visitor. Every count comes from the data, never typed twice.
What do the dismiss buttons do, and what is local?
They mark rows as dismissed in this tab and say so in the status line. Dismiss all dismisses the ones still waiting and its Undo restores exactly those, not rows you had dismissed one by one. Nothing is stored or sent: a reload brings every update back. In your app call your service from dismiss and dismissAll, and keep the Undo as the way to take it back.
Does the switch schedule anything?
No. It changes the sentence under it, the "wait for your digest on ..." line with the date and time, and the status says nothing is scheduled in this demo. In your app the switch would save a preference and your digest job would read it.
Does the panel move when I dismiss something?
No. Rows keep one height whether they are waiting or dismissed, the switch's sentence has room for its longest wording, and the status line reserves its lines. Only opening the summary makes the panel taller, and that is the point of it.
Is it accessible?
The summary is a button that says whether the list is open, Dismiss all and each dismiss name what they act on, and on a phone Dismiss all is an icon with its full name for a screen reader. After a press focus goes to the Undo that replaced the button, and back again after Undo. The dismissed state is written in words ("Dismissed") as well as struck through.
Related
- Pro
Urgent Page Acknowledgement Notification
Incidents and alertsAn on-call paging panel with three urgent alerts that demand an answer: severity as a word, a glyph and a weight, a fixed escalation time, and an Acknowledge that stamps the time and takes the escalation line away.
- 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
Do Not Disturb Notification
Quiet and digestsA 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.
- 312Pro
Grouped Accordion Notification
Sort and findNotifications grouped into Messages, Updates and Alerts in an accordion, each group with an unread count, its own mark read beside the trigger, a one-line summary when folded, and collapse and clear for the whole list.
- Pro
Snooze Notification
Quiet and digestsA 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
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.