shadcn.io is not affiliated with official shadcn/ui
Tabbed Metric Card Stats Block for Vue
One window for a store's four numbers: a bar of underline tabs on its top edge, and under it the latest month's value with its change and a strip of twelve month columns against last year.
Installation
Overview
A tabbed metric card for Vue with Ark UI. A start-aligned header for Fourleaf, store administration, says "Revenue is up 12.4% on last year". Under it a single window (a hairline frame with + marks on its corners) has a bar of four underline tabs as its top edge: Revenue, Users, Orders and Sessions. The underline is one element that slides from tab to tab with a CSS transition, driven by which tab is selected. Under the bar, at the start, sit the latest month's value as a rolling number and its change on the same month last year; at the end, a strip of twelve month columns. Each column has this year's bar in front, narrower, with the latest month at full weight and the others lighter, and last year's bar behind it, the full width of the column and fainter, so both years read even where they cross. Below the strip is a line naming the best and the quietest month. Every value, change, bar height, caption and the headline is computed from two typed lists per metric, so the text and the drawing can't disagree. The four panels share one height, because an unseen copy of each sits in the same grid cell, so switching never moves the page. It's built from Tabs, Guides, SlidingNumber and CSS bars, with no chart library and no colour for good or bad. For a store, SaaS or analytics overview where four numbers share one card.
FAQ
How do I change the metrics and the readings?
Edit METRICS at the top of the file: each has an id, a tab label, a prefix for a currency symbol, and two lists of twelve readings, now (this year) and before (the same months a year earlier). The latest month is the last entry of MONTHS. The value, the change, the bars, the best and quietest months and the headline (which reads the first metric) are computed. Add a metric and a fifth tab and panel appear; the underline needs one more has-[...] rule in SLIDER for each extra tab.
Why is the value outside the tab panels, and how do the panels keep one height?
Digits only roll when the same number element gets a new value, so the value sits outside the panels and reads the selected metric from state; a polite live region announces it when you switch. The panels hold the strip and the caption. An unseen copy of every panel is stacked in the same grid cell as the live one (hidden from assistive technology and the keyboard), so the cell is as tall as the tallest and nothing moves when a caption wraps differently.
How are the bars drawn?
Each column is an element with two absolutely positioned bars whose heights come from one CSS variable, set from the reading as a share of the tallest reading in either year (with a little room kept at the top). They grow from the baseline with a scale-y transition when a panel appears. There is no SVG and no chart library, so the bars follow your theme's foreground colour.
Is it accessible?
Yes. The tabs are a real tab list with arrow-key navigation and visible focus, and the underline is decorative. The strip is an image whose name gives the metric, the span, this year's latest month against last year's, and the best month, and the same facts are written in the caption under it. The month names are hidden from assistive technology because the strip's name and the caption carry the facts, and values and signs are kept left to right so a right-to-left page doesn't move them.
What moves, and how does it fit on a phone?
The header and the window fade up once on load, the underline slides in 300 milliseconds, the bars grow from the baseline and the value's digits roll when you switch. With reduced motion all of it is off. On a phone the tab bar scrolls sideways inside the window (each tab keeps its width), the value stacks over the strip, and the month names shrink to their initials. Nothing else scrolls at 320 pixels.