shadcn.io is not affiliated with official shadcn/ui
Stats Metrics Carousel Block for Radix UI
Six big-figure metric slides beside a large numeral that counts 01 of 06, with the keys 1 to 6 jumping straight to a metric, arrow keys stepping, and each change shown as an arrow, a word and a number.
Installation
Overview
Put one number in front of people at a time and let them jump by key, with this stats metrics carousel for React with Radix UI. Dialwright, a metrics wall, shows six headline metrics on a ruled track, one per view with the next cut off at the edge. Each slide has the metric's name, a large figure, its change over four weeks as an arrow, a word and a number ("Up 6.1%", "Down 8.2%", "Up 0.6 pts") and one sentence saying what it measures. At the start of the panel, a large "03" and "of 06" follow the track and keep a held width so a digit change moves nothing. The keys 1 to 6 jump straight to a metric while focus is inside the carousel, the arrow keys step, Home and End go to the ends, and a Kbd hint says so; Previous and Next Buttons are in the foot. It's built from Carousel, Kbd, Button and Guides, with CSS transitions only. The product, the figures and the sentences are made up for the example.
FAQ
How do I use my own metrics?
Edit METRICS. Each has an id, a label, a caption, a kind (count, minutes, percent or seconds), a value and the prior value from four weeks earlier. Percentages and seconds are typed in tenths (942 is 94.2%, 14 is 1.4 s). The figure, the change, the numeral and the pages are all derived from the list, so adding a metric adds a page and the keys follow up to nine.
Which keys work, and when?
While focus is on the carousel's buttons or its track, the digits 1 to 6 go straight to that metric, the left and right arrows step (mirrored in a right-to-left layout), and Home and End go to the first and last. Nothing listens on the whole page: with focus elsewhere the keys do nothing. The hint in the foot is hidden on a phone, where there is no keyboard to press.
The handler replaces Embla's own arrow keys, so right-to-left pages step the right way, and it calls scrollTo.
Why is the big numeral hidden from screen readers?
It is decoration for sighted readers, and the same information is already in the polite status line ("Metric 3 of 6, Alerts fired."), which is read once after each move. Previous and Next are named for what they move and stay in the tab order at the ends.
How is a change shown without colour?
As an arrow, a word and a number. Up and down are not judged good or bad, because for churn or load time down is the good direction; the words simply say what happened. Rates change in points ("Up 0.6 pts"), everything else in percent.