shadcn.io is not affiliated with official shadcn/ui
Slide-In Notification Panel Block for Ark UI
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 Ark 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."