Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Sparkline Range Card Stats Block for Ark UI

A price inside its 52-week range for a trading journal: a line between two labelled hairlines for the high and the low, today's close as a dot, and the position in the range as a percent and a meter.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A sparkline card with a range for React with Ark UI. A start-aligned header says how far up its 52-week range an index sits, "Tern 50 sits 76% of the way up its range", and a split follows. At the start, the 52-week low, the 52-week high and today's close as a list, each with when it happened. At the end, a framed figure (a hairline frame with a + on each corner): 52 weekly closes as a line under a soft fade, between two hairlines that carry the high and the low on their own labels, a hollow dot where the line touches each and a filled one on today's close with its value beside it. Under the chart, the position in the range as a big percent and a meter. Everything is computed from one series of weekly closes, so the text and the drawing agree. On a phone the figure comes before the list. The figures are an example from a fictional index, not advice. It is built from Guides, hand-drawn SVG and CSS transitions.

FAQ

How do I change the data?

Edit LOW and HIGH for the range and ANCHORS for the shape of the year (each entry is a week and a position from 0 to 1). The weekly closes are that shape plus a little seeded noise, fitted so the lowest close is exactly LOW and the highest HIGH; replace CLOSES with your own 52 values and everything else is found from them: the dots, the labels, the percent and the list.

How is the position worked out?

It is today's close less the low, over the high less the low, rounded to a whole percent. The headline, the readout and the meter all use that one number. The meter is a drawing, hidden from assistive technology, because the readout beside it says the same in words.

Is it accessible?

Yes. The line is an image whose name gives the low and the high with how long ago each was, and this week's close. The same numbers are in the list at the start, a description list, and the labels on the hairlines are text. The chart is dir="ltr" and values sit in bdi elements.

Why is it all one colour?

The chart uses your theme's text colour at a few weights, with the range lines as plain hairlines, so it is correct in every preset, light and dark, and readable without colour.

What moves, and what about reduced motion?

The header and the figure fade up once, the line draws from start to end and the dots fade in after it. With reduced motion everything appears at once.

How does it fit on a phone?

The figure comes right after the header with the same chart and meter, and the list follows. The labels sit on the hairlines at any width and nothing scrolls sideways at 320 pixels.

All 122 stats blocks