shadcn.io is not affiliated with official shadcn/ui
Analytics Cards Carousel Block for React Aria
Eight weekly KPI cards for a product-analytics tool on a hairline track, four wide on desktop, with a switch that moves the track by one card or by a whole page and a counter, dots and buttons that recount.
Installation
Overview
Show a handful of headline numbers without a wall of tiles, with this analytics cards carousel for React with React Aria. Plotmere, a product-analytics tool, shows eight weekly numbers (sessions, sign-ups, activation, week-1 retention, revenue, revenue per user, churn and support load) in one ruled panel. Each card is a hairline cell with the metric's name, its latest figure, the change over four weeks as an arrow, a word and a number ("Up 8.0%", "Down 0.3 pts"), and a twelve-bar sparkline drawn in your theme's foreground weights. A toolbar band holds a Segment Group "Move by: One card, A page" that sets what Previous and Next do, and under the track a foot band holds the counter ("Cards 1–4 of 8"), a dot for each step, and Previous and Next Buttons that stay in the tab order at the ends. Four cards show from the large breakpoint, two from medium, and one with the next peeking on a phone, which always moves by one. The ruled bands come from Guides. It's built from Carousel, Segment Group, Button and Guides, with CSS transitions only. The product, the figures and the dates are made up for the example.
FAQ
How do I use my own metrics?
Edit METRICS. Each has an id, a label, a kind (count, money or percent) and twelve weekly values in series: whole units for a count, cents for money, tenths of a percent for a rate (451 is 45.1%). The figure is the last value, the change compares it with the value four weeks earlier (LOOKBACK), and the sparkline and the screen-reader summary are drawn from the same series, so nothing is typed twice. Change AS_OF to the last week your series ends on.
What does the Move by switch do?
"One card" makes Previous and Next slide the track by a single card, so the dots count every position (five at desktop width). "A page" moves a whole page of cards at a time (two pages of four at desktop width, four of two at medium width) and the dots recount to match. The card you were looking at stays in view when you switch, and the counter always says which cards are whole ("Cards 1–4 of 8"). On a phone the switch is hidden, because one card is a page.
The step is Embla's slidesToScroll; the track re-measures when it changes and the block lands on the card you were on.
How does it work with a keyboard?
Tab reaches the switch, Previous, the dots and Next. With focus inside the track's panel, the arrow keys move the track by the current step (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Cards that are out of view are hidden from the tab order and from screen readers.
What is announced when it moves?
The counter is the block's one polite live region: after each move a screen reader hears, for example, "Cards 5–8 of 8, moving by a page". The track itself is silent, so the same cards are not read twice.
What stays local in the demo?
Everything. The numbers are typed example data labelled as such, the switch only changes how the track moves, and nothing is fetched or saved. To wire it for real, load the weekly series for each metric from your own API into METRICS (the card, the change and the sparkline recompute from it), and keep the rest as it is.