shadcn.io is not affiliated with official shadcn/ui
Digest View Notification Block for Radix UI
A morning digest panel: tabs for Today, Yesterday and This week, three cells of counts that roll to each period, sections with the top three items and +N more, and an email switch that sends nothing.
Installation
Overview
Give a busy person one read for everything they missed, with this notification digest for React with Radix UI. A compact header holds the title and one sentence over a hairline frame with a plus mark on each corner. A Tabs list switches between Today, Yesterday and This week. Under it a band of three cells shares hairlines and stays three across on a phone: New, Mentions and Alerts, each a Sliding Number that rolls to the count of the chosen period. Below, three sections, one per kind, list the three newest items each with a type tile, a title and a fixed time, and end with "+N more" for the rest. The periods are worked out from each item's time and the page's fixed "now", giving 6, 9 and 24 items, and every period keeps the panel's height, so changing tabs moves nothing. The foot has a Switch for emailing the digest at 08:00 and a status line that says nothing is emailed. It's built from Tabs, Sliding Number, Switch and Guides, with a CSS entrance only. For a manager's morning summary, a weekly review or any recap.
FAQ
How do I fill it with my own items?
Edit ITEMS at the top of the file. Each has an id, a kind (mention, alert or update), a title and an ISO at time. PERIODS and KINDS name the tabs and the sections. An item belongs to a period when its day falls on today, on yesterday, or on or after this week's Monday, all worked out from AS_OF, so the counts in the cells and the "+N more" lines are derived and never typed. TOP sets how many items a section lists.
What stays local, and how do I make it real?
The email switch only changes the status line, and says so: nothing is emailed and nothing is saved. To make it real, send the switch's value to your notification settings and have your mail job build the same digest from the same list for each recipient. The "+N more" text is not a control here; in your app it would link to the full list for that kind.
Why does the panel keep its height between tabs?
Today has 6 items and This week has 24, but each section lists at most three, so the periods differ by a few rows. An unseen copy of the longest period sits in the same grid cell as the open one, so the panel is always as tall as the longest and the foot never moves. The row heights are fixed too, so a long title can't change them.
How do the counts roll?
The three cells are Sliding Number components outside the tab panels, so the same instance gets a new value when you change tabs and its digits roll to it. With reduced motion on, the digits change in place. Each cell also carries its number as text for a screen reader, so the count is read once, not as a column of digits.
Is it accessible?
The tabs are real tabs: arrow keys move along them and Tab moves into the panel. Each section is a labelled list under its own heading, with the period in its name ("Mentions, Today"). The summary cells are a list, each saying its label and number in text. The status line is a polite live region present from the start, and the switch has a name that says the time.
How does it look on a phone?
The tab list scrolls sideways if it must, the three cells stay three across at every width, and the sections stack as they do on a desktop. Each item keeps a fixed row of two lines for the title and a narrow time column, and the foot stacks the switch over its status line.