shadcn.io is not affiliated with official shadcn/ui
Counters Row About Block for Solid
Four counters for an uptime monitor in one hairline band, each rolling up once on view with an arrow and a sign for how it moved on last month, under a header that says when the figures were last updated.
Installation
Overview
A row of counters for Solid with Ark UI, written for Pingdale, a fictional uptime monitor. A start-aligned header carries a headline and one sentence, with "Updated 2 hours ago" at its end. Under it, one band from rail to rail holds four counters (checks run a day, sites watched, time to spot an outage and uptime), separated by single hairlines. Each figure rolls up once as it scrolls into view and each says which way it moved on last month with an arrow and a sign, never a colour. Four across from lg, two by two below it, and the band ends the block. It's built from Guides and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For status pages, product pages and any about page that wants a few live-feeling numbers in one line. The figures are example data.
FAQ
How do I change the counters?
The four counters are COUNTERS at the top of the file: each has a label, a value, optional decimals, grouping and suffix, the change written with its sign, and down for an arrow that points down. The "Updated" line in the header is plain text; it says "2 hours ago" rather than a time, so it never shows a stale date. All the figures are example data: replace the arrays at the top of the file with your own.
Does it count up under reduced motion?
Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.
What do the arrows mean?
They show the direction of the change, nothing else: a down arrow beside "time to spot an outage" is an improvement, and the block doesn't colour it green or red. The sign is written out too (a true minus sign, so a screen reader says "minus"), and the comparison "vs last month" is text.
How is it read by a screen reader?
The band is a description list: the label is the term and the figure and the change are its two descriptions. The figures are written in full for assistive technology, so "12,480" is read as a number even while it rolls.