shadcn.io is not affiliated with official shadcn/ui
Notification Inbox Awards Block for React
An awards inbox in two groups, This week and Earlier, each row an event (Won, Shortlisted, Entered or Renewed) with a drawn mark and a word, an unread dot with the word Unread, and a Mark all as read button.
Installation
Overview
An awards notification inbox for React with Base UI. The compact header carries a live count of what is unread and one ghost button, Mark all as read, then two groups of rows ruled from rail to rail, This week and Earlier, newest first, end the block. Each row has a small drawn mark and a word for the event (Won, Shortlisted, Entered or Renewed), the award, its programme and category, and the date. An unread row has a filled dot and the word "Unread"; a read one has a hollow dot and "Read", so the state is never told by colour alone. Marking all as read changes those words, updates the count and announces it; nothing moves. It's built from Button, Badge, Guides and your theme's tokens. The programmes and awards are made up for the example, and the read state stays on this page.
FAQ
How do I change the notifications?
Edit THIS_WEEK and EARLIER at the top of the file. Each notification has an id, a kind (won, shortlisted, entered or renewed), a title, a programme, a category, a fixed day and whether it is unread. The count in the header is taken from the same list.
Where is the read state kept?
In memory on this page only, which is what the example promises. To keep it, call your API in markAll and set the state from the response.
What happens when nothing is unread?
The button stays in place with the same label, reads as unavailable and no longer acts, and the count says "All caught up: nothing unread". The block keeps its height.
How does it read to a screen reader?
The groups are headings, each over a list. A row reads as its state (Unread or Read), the event, the award with its programme and category, and the date. The count line is also a polite live region, so marking everything read is announced.
Related
- Pro
Kudos Composer Feed Awards
People and teamsA team-chat kudos feed in a split: a composer with a value select, a recipient field, a message and a Send kudos button at the start, and the latest six kudos at the end, with each new one added at the top.
- Pro
Kanban Stages Awards
Themed formatsThree board columns, Entered, Shortlisted and Won, with count headers, an arrow showing the path and award cards that carry a drawn mark and a dated badge.
- Pro
News Crawl Ticker Awards
Strips and bannersOne bar with a single line of dated award announcements crawling by a CSS keyframe, with a pause button and a still, wrapped line under reduced motion.
- Pro
Coverage Ledger Press Awards
Press and quotesA start-aligned header with a counted tally over a ruled ledger of press stories for a publishing CMS: each row sets the publication as its own wordmark, the headline as a link, a type badge and the date.
- Pro
Sortable Table Awards
Lists and tablesA sortable table of awards with buttons in the column heads, aria-sort, status badges with an icon and a word, a sticky first column and a count in the foot.
- Pro
Kudos Tally Matrix Awards
People and teamsA peer-recognition tally for a team-culture programme: five people by four values as a ruled table, each count in a cell that gets heavier as the count grows, with a total for every person and every value.