Notification centres

Inboxes, unread badges, grouped feeds and preference panels.

A notification list is a read/unread state machine with a feed on top, and the details that make it usable are grouping (five likes, not five rows), a mark-all that does not require aim, and a preferences panel in reach of the bell. These carry all three, plus the empty state — which, for a notification centre, is the state most users see most days.

7 matching7 blocksFree to copy
Open the full page for this block

Toast Notification Stack

A corner stack whose live region is mounted before any message exists, errors announce assertively, and the auto-dismiss timer pauses on hover and on focus.

Notifications171 lines1 dep
Open the full page for this block

Notification Preferences Matrix

Per-event, per-channel switches as a real table, with required notifications locked and explained, and column headers that toggle a whole channel and report a mixed state honestly.

Notifications284 lines1 dep
Open the full page for this block

Notification Inbox Panel

The bell panel: filterable list with read state, the unread count in the accessible name rather than only in a badge, and machine-readable timestamps beside the human ones.

Notifications255 lines1 dep
Open the full page for this block

Push Permission Pre-Prompt

The soft ask before the browser dialog you only get one shot at — what will be sent, what will not, and a decline of the same weight as the yes.

Notifications222 lines1 dep
Open the full page for this block

Notification Digest

A day's notifications collapsed into one digest, grouped by what they are rather than when they arrived.

Notifications152 linesNo deps
Open the full page for this block

Digest Schedule Form

The control that turns notification volume down instead of off, which is the choice most people actually want.

Notifications175 linesNo deps
Open the full page for this block

Notification Channel List

Which channel carries which event, so the loud ones can be moved rather than muted entirely.

Notifications142 linesNo deps

Questions about notification centres

When does something count as read?
On open of the panel is too aggressive and on click is too conservative. Marking a group read when it has been visible for a beat is the compromise most products land on — and an explicit mark-all covers the rest.
Should the badge show a count or a dot?
A dot for "something happened", a count when the number is actionable. A badge reading 247 has stopped being information and become wallpaper.
Are these notification centres free to use?
All 7 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add toast-stack` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.