shadcn.io is not affiliated with official shadcn/ui
Realtime Order Counter Stats Block for React
A shop's orders-today figure that ticks forward at a fixed pace, with a count of orders since the page opened and a pause control.
Installation
Overview
A realtime order counter for React with Base UI. Tillwise, a shop order feed, centres one display figure, orders placed today, and lets it step forward at a fixed pace. Under it, a SlidingNumber counts only the orders that arrived since the page opened, and a line states about how many orders a minute that pace is. A Badge names the pace (Live, Paused, Held or Still) and a Button pauses it. The dot beside the badge pings once per step. The page plays eight steps once the block is on screen, then holds. With reduced motion it stays on the opening total, so the since-you-opened count stays at zero. The block is SlidingNumber, Badge, Button and Guides. For a commerce, marketplace or operations page.
FAQ
How is the rate worked out?
STEPS is how many orders arrive at each step, one step every two seconds, eight steps in all. The line "about N orders a minute" divides that total by the time the eight steps take, so the sentence and the script can't disagree. The opening total is OPENING, and each step adds the next item. Edit those two constants to use your own day. There is no socket in the demo.
What is the smaller number?
It is the sum of the steps already played, starting at zero when the page opens. The large figure is the opening total plus that sum. After the eighth step the large figure has moved by the sum of STEPS and then holds. The smaller number is not a second source of orders.
How do I pause it?
The ghost Button beside the badge pauses and resumes. While the script can still run, the button is pressed when the feed is paused. After the last step, or when motion is reduced, the button stays and does nothing, and its name says the reading is held or still. The choice stays in the page.
What does the badge announce?
The badge is a polite live region, held at the width of its longest word so it never moves the button, and its text is only the pace: Live, Paused, Held or Still. It changes when you pause, when the script holds, or when reduced motion keeps the opening total. It does not announce each new order. The large figure and the since-you-opened figure update in silence. The rate line does not change, because it describes the script rather than the current step.
What happens with reduced motion?
The large figure stays on the opening total, the since-you-opened count stays at zero, the dot does not ping, and the badge reads Still. The rate line still states the script's pace. The pause control does not start the steps. With motion allowed, the digits roll every two seconds until the eight steps are done. Nothing loops.
Does the figure roll up from zero?
No. It opens on today's total and then steps by the orders that arrive. A count-up from zero would hide the number the page is actually reporting. The digits roll only when the value changes, and with reduced motion they change in place, on the opening total, which means they do not change at all.
</FaqList>
Related
- Pro
Minimal Hero Metric Stats
Hero metricOne number and nothing else for a food-bank tool: the week's meals served in display type under the page's top rule, one hairline and one sentence that compares it with last week and last year.
- Pro
Pictograph Unit Stats
Parts of a wholeFifty person icons in ten columns for a community platform, 35 solid and 15 faint, where one icon stands for 1,000 members, inside a card in card with the active count above and a plain sentence below.
- Pro
Hero Metric Card Stats
Hero metricOne headline figure for a treasury tool, cash on hand in a big number inside a card in a card, with a change pill, a comparison and a two-line footnote that says when it was read and from where.
- Pro
One divided row of six live readings for a game-server fleet, with a pause control at the end of the row.
- Pro
Compact KPI Tile Grid Stats
KPI bands and tilesSix dense KPI tiles for a café group in one hairline frame, with a Day, Week and Month switch that re-reads all six figures and rolls their digits.
- Pro
Live Indicator Banner
Live statusA heartbeat callout for a monitoring tool: a framed status dot that sends out one ring on each poll, an all-systems-operational heading, a line with how long ago it checked and the p95 latency, and a status-page link.