Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Notification Inbox Awards Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An awards notification inbox for Solid with Ark 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.

Why does This week not change?

Dates are fixed in the data, never computed from today: This week is the week of March 10, 2025. Group your own events by a date you compute on the server.

Are these real awards?

No. Redwing, the Nettlewell Awards and the Iriscroft Index are made up for the example.

All 137 awards blocks