shadcn.io is not affiliated with official shadcn/ui
Notification Center Billing Block for React
A billing inbox sheet drawn open over a payouts page: needs-action and update groups with fixed dates, a Fix it link and a Snooze select (1 day, 3 days, until the due date) on each action, and Mark all as read.
Installation
Overview
Keep payment alerts in one place with this billing notification center for React with Base UI. It shows the payouts page of Tollwick, a marketplace payments product, with a bell in its header and its Sheet, "Billing inbox (3)", drawn open over a sketch of the page. The sheet has two groups: Needs action (a failed payment, a card that expires in 18 days) and Updates (a renewal, credits added). Every action has a Fix it link and a Native Select to snooze it for 1 day, 3 days or until the due date, which moves the row to "Snoozed until 18 Oct" with an Undo. The one Shine Button, "Mark all as read", clears the unread dots and the count on the bell. The bell opens the real Sheet, from the end edge in either text direction, and focus returns to it on close. It's built from Sheet, Native Select, Badge, Button, Shine Button and Guides, with a CSS entrance only. For account pages, payment dashboards and any subscription app.
FAQ
Which part is only for the preview?
On load the sheet is drawn in place: a native non-modal dialog over the sketch, so nothing is trapped or focused and the page around the demo stays usable. In your app keep the Sheet and its trigger, and delete the in-place copy (the "in-place" state, the scrim with its dialog and the Escape effect). Both wrappers share the same list component and the same state, so what you snooze in place is still snoozed in the real sheet.
How does snoozing work?
Choosing a snooze sets a date on the notice: one or three days after the fixed date, or the notice's own due date. The row then shows "Snoozed until" that date and stops counting as unread, and Undo brings it back. The dates are fixed in data, never the clock. In your app store the snooze with the notice and bring it back on that date.
Where do Fix it and Mark all as read go?
Fix it only says in the status line which settings page it would open. Mark all as read changes local state and says how many it marked. Nothing leaves the page: connect them to your payment settings route and to an API call that marks notices read.
Which side does the sheet open from?
From the end edge: the right in left-to-right text and the left in right-to-left. The side is read from the page's direction when the bell is pressed.
Is it accessible?
The real sheet traps focus, closes with Escape and returns focus to the bell, which has a hidden count in its name. Unread notices have a dot and a hidden word, each snooze select is named for its notice, and what happens is spoken by a polite status message that also lives inside the open sheet.