shadcn.io is not affiliated with official shadcn/ui
Delta Arrow Hero Metric Stats Block for React
A hero figure for an ad-spend tool beside an oversized arrow whose angle is the slope of the change, with a pill for the percent and its comparison.
Installation
Overview
A hero metric with a delta arrow for React with Base UI. At the start, a header that states the pace ("Ad spend is pacing 12.0% faster"), the daily spend as a big number that rolls up once, a pill with the percent and what it is measured against, and one line saying how to read the arrow. At the end, a 160 pixel plate in a hairline frame with a + on each corner: a zero line across it, the arrow, and a small arc between them that marks the angle, with two ticks at the 60 degree cap and the angle in words under it. The arrow turns four degrees for every percent of change, clamped to 60, and a fall turns it down instead of up. The angle, the pill and the headline are computed from the same two readings, so they always agree. On a phone the plate sits above the figure. It is built from Guides, Badge, the Sliding Number, a Lucide arrow, a small inline SVG and CSS transitions. For pacing, growth and any figure where the direction and steepness of change is the message.
FAQ
How is the angle worked out?
SPEND holds this week's and last week's daily spend. The change is a share of last week's; DEGREES_PER_PERCENT (4) turns it into degrees and CAP (60) clamps it, so a 12.0% rise tilts the arrow 48 degrees. A negative change gives a negative angle and the arrow points down; no change leaves it level. Change the two constants to make the arrow more or less sensitive.
How is the arrow drawn?
It is a Lucide arrow that points to the end of the plate, rotated by a CSS variable set from the angle, so it turns in on load with a transition. The zero line is a hairline, the arc and the cap ticks are one small SVG computed from the same angle, and the plate is dir="ltr" because a rising line rises the same way in every language.
What does the pill show?
The change on last week: filled for a rise, outlined for a fall and muted for no change, always with an arrow and a sign, so the direction never depends on colour. The minus is a true minus sign, and the comparison text next to it says what the change is measured against.
Is it accessible?
Yes. The figure is a description list, the pill carries the signed percent and its comparison as text, and the plate is a figure whose caption says the angle in words ("48° up, slope of +12.0%"); the arrow and arc themselves are hidden from assistive technology because the text says the same.
Related
- Pro
Hero Metric Card Stats
Hero metricOne headline figure for a treasury tool, cash on hand in a big number inside a card in a card, with a change pill, a comparison and a two-line footnote that says when it was read and from where.
- Pro
Minimal Hero Metric Stats
Hero metricOne number and nothing else for a food-bank tool: the week's meals served in display type under the page's top rule, one hairline and one sentence that compares it with last week and last year.
- Pro
Sparkline Hero Metric Stats
Hero metricA hero figure for a cash-planning tool beside its own 90-day trend: the runway in months at the start, and a wide line with its high, its low and today marked.
- Pro
Tick Dial Hero Metric Stats
Hero metricA hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
- Pro
Delta Pill KPI Tiles Stats
KPI bands and tilesFour raised KPI tiles for a checkout analytics tool, each with its change as a pill: filled for a rise, outlined for a fall and muted for none, with an arrow or a dash and a sign.
- Pro
Renewal Delta Callout Stats
ComparisonsA subscription renewal comparison that leads with the percent change at display size, then the month before and this month as two tiles.