shadcn.io is not affiliated with official shadcn/ui
Badge Count Table Block for Vue
Moderation queues as counts: compact badges like 1.2K, a quiet dash for zero, a strip of three totals and a number field that flags any queue past a limit with a flag glyph and the words Over limit, never a colour.
Installation
Overview
Count what is waiting and flag what is too much, with this badge count table for Vue with Ark UI. A framed panel opens with a strip of three totals (open, escalated and snoozed) over a table of four moderation queues from a forum's tooling. Every count is a Badge in compact notation ("1.2K", with the whole number in the text a screen reader gets) and a zero is a quiet dash. A Number Input reads "Flag a queue above 1,000 open items": a queue whose open count is past it gets a flag glyph and the words "Over limit by 240" under its name, a bar at its start and a solid count, never a colour, and the line beside the field says "2 queues are over 1,000 open items." Type another number and the flags follow. The Snoozed column folds away on a phone. It's built from Badge, Number Input and Guides, with a CSS entrance only. For moderation, support and review queues, backlogs and any table where a count can be too high.
FAQ
How are the counts shown, and read?
Intl.NumberFormat with compact notation and one decimal, in en-US so the digits are always 0 to 9: 1,240 shows as "1.2K". The visible text is hidden from assistive technology and each badge carries the whole number and the column as text ("1,240 open"), so nothing depends on guessing what "1.2K" means. A zero is a dash for sighted users and "0 snoozed" for screen readers.
How is a queue flagged without colour?
A queue is over when its open count is greater than the limit. It then gets a flag icon and "Over limit by 240" under its name, a start bar and a tint of the foreground behind the row, and its open count turns solid. All of it is weight and words, so it reads the same in every theme and for anyone who can't tell colours apart.
How does the number field behave?
Type digits and the queues, the sentence and the totals follow. An empty field means zero, and anything that isn't a whole number is ignored; there are no stepper buttons, since a limit is typed. The field reads Arabic-Indic digits in a right-to-left page and turns them into plain numbers before comparing.
What does a screen reader hear when I change the limit?
One polite sentence ("2 queues are over 1,000 open items.") about 600 ms after you stop typing, and only when its words changed, so typing "1", "10", "100" doesn't read three times. The visible copy of the sentence is hidden from assistive technology so it isn't read twice.