shadcn.io is not affiliated with official shadcn/ui
Slide-In Notification Panel Block for React
A notifications panel that slides in from the end of a sales pipeline's page, open on load: a bell that toggles it, five rows that mark themselves read, and Clear all with an exact Undo.
Installation
Overview
Give notifications their own panel without leaving the page, with this slide-in for React with Base UI. It's the panel of Dealfold, a sales pipeline: a drawn board of three lanes of deal cards in a hairline frame with a plus mark on each corner, under a top bar that holds the real bell. The panel is open on load, under the bar at the end of the layout, and it slides in and out in CSS when the bell is pressed; the bell names the unread count ("Notifications, 3 unread") and says whether the panel is open. Opening it moves focus to its heading, and Escape or the Close button shuts it and puts focus back on the bell. The five rows mark themselves read when pressed and the bell's Badge follows; "Clear all" empties the list into a designed Empty state, with a receipt ("Cleared 5.") and Undo in the same slot, and Undo brings back exactly what it took. It's built from Button, Badge, Empty and Guides, with CSS motion only. For a CRM, a tracker or any app whose notifications belong at the side.
FAQ
Why is the panel in the page and not the catalog Sheet?
A sheet belongs to the whole window and takes its side from the page's direction when it opens; this panel belongs to the block's frame, so it is clipped by it, sits at the end in both directions (it uses end-0 and slides out with a direction-aware translation) and is open in the preview without trapping focus. In your app you may well want a sheet for the same content: keep Row and the rest, and put them in the catalog Sheet.
Where does focus go?
Pressing the bell when the panel is closed opens it and focuses its heading; pressing it again closes it with focus still on the bell. Escape while focus is inside the stage, and the Close button, shut the panel and put focus on the bell. While it is closed the panel is inert and invisible, so Tab can't reach anything in it. Clear all moves focus to Undo, and Undo moves it back to Clear all. Nothing takes focus on load.
What stays local, and how do I make it real?
Read state and Clear all live in the block and reset on reload; nothing is saved or deleted anywhere, and the empty state says Undo brings the notifications back. To make it real, replace NOTES with your list, send the id from openNote when a row is pressed, and send the ids from clearAll to your server, keeping Undo to restore them. The bell's count is worked out from the list and what has been read.
Is it accessible?
The bell is a button with aria-expanded and aria-controls; the panel is a non-modal dialog named by its heading; each row's title is the one control and an unread row is a dot, a heavier title and the word "Unread" for a screen reader, never a colour. One polite status message says what each press did. With reduced motion the panel appears and goes without sliding.
What happens when everything is cleared?
The list is replaced by an Empty state in the same box ("You are all caught up"), the bell loses its badge, and the slot above the list shows "Cleared 5." with Undo where Clear all was, so the panel never changes height or moves a control. With nothing to clear, Clear all stays on screen, quiet, and answers "Nothing to clear."
Related
- 5Pro
Bell Dropdown Notification
Bells and panelsThe list under a CRM's notification bell, shown open under its top bar: five notifications that mark themselves read when pressed, a bell whose count and name go down with them, Mark all read and See all.
- 997Pro
Badge Counter Notification
Unread and countsA UI kit's count badge drawn on three header buttons: a number field sets the bell, a toggle switches number and dot, and each cell prints what is shown and what a screen reader hears.
- Pro
Floating Notification Card
Floating cardsA visitor's message floating on a pricing page: a toggle group parks the card in any of four corners, Reply swaps its buttons for a one-line field, and Dismiss and Show again replay the slide-in.
- 421Pro
Tabbed Inbox Notification
Bells and panelsA notification centre as a narrow panel: tabs for All, Mentions and Alerts with their own unread counts, rows you press to mark read, a mark all read for the open tab and a clear with an undo.
- 4Pro
Mark All Read With Undo Notification
Unread and countsA summary band with a rolling unread count and a mark all read that fades the dots in turn and offers an exact undo, over a list where every row can be marked unread again.
- Pro
An archive of notifications as a table whose auto-delete column is worked out again when you pick a retention period, with a restore per row, an undo, and an alert dialog before it empties.