shadcn.io is not affiliated with official shadcn/ui
Metric Cards Skeleton Block for Radix UI
Three studio metric cards that load in place: icon tiles and labels stay while each value, its change chip and a 12-week sparkline become data, the lines growing from the start edge.
Installation
Overview
Show metric cards with sparklines while they load, then draw the lines in without moving anything, with these metric cards skeleton for React with Radix UI. A hairline frame with a plus mark on each corner holds three cards stacked on hairlines from Burnish, a wellness-studio dashboard: Class attendance, Membership renewals and Late cancellations. Each card's icon tile and label are real from the first paint; its value, its change chip (an arrow and a signed amount since week 1) and its 12-week sparkline are Skeleton bars that become the data in the same box, card by card, each line growing from the start edge when you press Load. A sparkline has a text equivalent that gives its first, lowest and highest values. On a phone the sparkline drops under the value. It's built from Skeleton, Button and Guides, with a CSS entrance only. For dashboards of a few key numbers that also show a trend.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The three weekly series are typed in METRICS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real figures when they arrive. The bars are derived from the same data as the figures, so keep one component for both. The value, the chip and the line are all derived from the one weeks array.
How does the sparkline appear?
The chart sits in the same box as its placeholder. When the data arrives it is revealed with a clip that opens from the start edge over 700 milliseconds, after the bar fades. The clip is a CSS transition on the ChartBox wrapper, so it needs no animation library, it opens left to right in every reading direction (the plot is always laid out left to right), and under reduced motion it is off.
How is the sparkline scaled?
spreadOf scales each series between its own lowest and highest value, with a little room above and below, so a flat metric and a swinging one both fill the box. It shows the shape, not the size, which is why the value and the change are beside it as text.
Does the block keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The sparkline has a fixed 48 pixel box in both phases. The labels, headings and frames are real in both phases and the polite line reserves two lines, so the block is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the metrics…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. Each sparkline is an image with a label that gives its range, and the change is a sign and a number, never a color. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner, no stagger and no growing: the swap is instant.