shadcn.io is not affiliated with official shadcn/ui
Notification Centre Testimonials Block for Svelte
A reverse split: a notification window in a hairline frame where customer praise arrives as unread rows, with a new-count badge, rows that mark themselves read and a Mark all as read button, beside a header with a Shine Button.
Installation
Overview
Customer praise shown the way your own product delivers news. On a desktop the window is on the left, in a frame with + marks on its corners, and on the right a header for Handrail, a workspace for design handoff, with a Shine Button and two figures pinned to the foot. The window has a title bar with a "3 new" badge and a "Mark all as read" button above five rows, each with the customer's initials, name, role, a one-line quote, how long ago it arrived and a blue dot while it is unread. Pressing a row marks that one read, and pressing the button clears them all, so the badge counts down to "All read" and the button turns into "Restore unread" to run it again. Nothing is saved: it is a demo of a feature, for product pages whose audience already lives in an inbox. On a phone the header and button come first, then the window. It's built from Guides, Item, Avatar, Status, Badge, Button and Shine Button, with CSS only and your theme's tokens.
FAQ
How do I change the notifications?
Edit NOTES at the top of the file: each has a quote, the customer's name, role and initials, and a relative time. SEEN lists the ids that start out read; every other note starts unread, and the badge is worked from the list, so adjust the header sentence ("Five notes… three of them still unread") if you add or remove rows. FACTS holds the two figures under the header.
How do I operate it with the keyboard?
Each row has a check button, named "Mark as read" with the customer's name, which reports whether it is pressed; press Enter or Space on it to toggle that row. With a mouse or a finger you can press anywhere on the row, because the button stretches over it. The "Mark all as read" button at the top works the same way and keeps focus when it turns into "Restore unread".
What do screen readers hear?
Every row is a figure with the customer as its caption and the words as a blockquote, and an unread row starts with the word "Unread". The dot is decorative. After each change one polite status line says what happened, for example "Marked read: Lena Hoffmann. 2 new."
Is anything saved or sent?
No. Read and unread live in the component's state and reset when the page reloads, which is why the button can restore them. To make a real inbox, load the notes from your own API and call it from toggle and toggleAll.