Stats 22 block design & features
Stats22 builds on Shadcn UI primitives and splits the headline and calls to action from the metrics band. NumberFlow drives four KPIs alongside a vertical strip of fiscal year pills aligned above the ruler. The active pill uses horizontal translation on desktop so it reads cleanly against the tick marks.
Below the KPI row, a ruler treatment pairs a row of tick marks with a central baseline and a lighter mirrored tick row for a drafting-scale read. No outer stroke frames the band, so layout reads as flush with surrounding sections except for rhythm from spacing.
Compared with stats15, this block omits the curved SVG connector for a horizontal baseline cue. Compared with earlier iterations of Stats22 itself, pills keep fixed order chronologically rather than swapping stack position on selection.
On narrow viewports the layout stacks with centered pills; on medium and up pills align trailing and emphasize the chosen year with a modest slide. CTAs keep the primary and secondary shadcn button recipes with a single Lucide arrow on the primary action.