shadcn.io is not affiliated with official shadcn/ui
Grouped Accordion Notification Block for Vue
Notifications grouped into Messages, Updates and Alerts in an accordion, each group with an unread count, its own mark read beside the trigger, a one-line summary when folded, and collapse and clear for the whole list.
Installation
Overview
Keep a busy hour readable by grouping what arrives, with this grouped list for Vue with Ark UI. Three groups, Messages, Updates and Alerts, share an Accordion that can hold several open. Each group's header has its icon, its name and a Badge with its unread count; a Mark read Button sits beside the trigger rather than inside it, and becomes an icon button on a phone. Marking a group read zeroes its badge. A folded group keeps a one-line summary ("3 messages, latest from Priya"), and Collapse all and Expand all work the whole list. Rows have a dot, a heavier title and the word Unread for a screen reader when they are unread, never a color. Clear all empties the list into an Empty state that holds the height the list had, with an Undo. It's built from Accordion, Badge, Button, Empty and Guides, with a CSS entrance only. For an operations console, a system's notifications or any list that groups.
FAQ
How do I fill it with my own groups?
Edit GROUPS (an id, a name and the noun the summary uses) and NOTES, each with its group id, a title, a line of desc, who it is from, an ISO at time and whether it starts unread. The badges, the summaries ("latest from" is the first note of the group) and the Collapse all label are worked out from those. Times are written in UTC and shown against AS_OF, so the page reads the same on the server and in every time zone.
What stays local, and how do I make it real?
Read state, the open groups and Clear all live in the page and reset on reload; nothing is sent. To make it real, send the ids from the Mark read handler (it already builds the list of the group's unread ids) and the id of a pressed title, and load the groups from your API. Undo after Clear all would send the reverse.
Why is Mark read next to the trigger and not inside it?
A button inside the accordion's trigger button is invalid HTML and breaks keyboard and screen reader use. So the trigger leaves room at its end and Mark read sits beside it as its own control, in the focus order straight after its group's trigger. It is named "Mark read, Messages", also when only the icon shows on a phone, and it stays focusable at zero (it answers "Nothing unread in Messages").
What does Clear all do to the height?
It reads the list's height just before it empties, and the empty state takes at least that height, so nothing below it moves. Undo brings the groups back with the open and read state they had.
Is it accessible?
Each group header is a heading with a trigger button that says whether it is open, and the groups can be opened and closed from the keyboard. Each group's list is labelled by its name. Unread counts are text with a spoken noun, and unread rows begin with the word Unread. The status line is a polite live region present from the start. Several groups can be open at once, because the accordion is in its multiple mode on every target.