shadcn.io is not affiliated with official shadcn/ui
Badge Counter Wall Features Block for Svelte
A wall of eight channel counters for a unified inbox, with a two-button toggle that switches between every channel and only those with unread messages.
Installation
Overview
A counter-wall feature section for Svelte with Ark UI. A compact header carries a two-button toggle at its end: All channels and Has unread. Below it, eight channel cells share their hairlines inside one rounded frame: each has the channel's icon and name, its unread count in large rolling digits, a badge with the age of the oldest unread message and the change over the last hour. Choosing Has unread quiets the channels with nothing waiting, and a line under the toggle says how many are left. Four cells across from lg, two across below it. It's built from Toggle Group, Sliding Number and Badge, with CSS transitions for the entrance and the dimming and your theme's tokens for every colour. For inboxes, support desks and notification routers where the count is the product.
FAQ
How do I change the channels and their counts?
Edit CHANNELS at the top of the file: each entry has a name, an icon from Lucide, the unread count, the change over the last hour and the age of the oldest message. Everything else is derived: the "No change this hour" line, the arrow, and the "6 of 8 channels have unread" status.
How do I make the counts live?
Pass the counts from your own state or a subscription and keep the rest as it is. The digits are Sliding Number columns that roll to each new value, and with reduced motion they change in place. Group large counts with the grouping prop so "1,284" keeps its comma.
How does the toggle work?
It is a toggle group in multiple-selection mode, so each button is a real toggle button that reports whether it is pressed. A small handler keeps exactly one pressed: pressing the pressed button does nothing, and pressing the other one moves the selection. Arrow keys move between the buttons.
Is the dimmed state still readable?
Yes. A quiet cell never fades its text: its title, count and icon switch to the muted text colour, which keeps its contrast, its icon tile loses its fill and the cell takes a soft tint. The status line under the toggle is a polite live region, so a screen reader hears how many channels remain.