shadcn.io is not affiliated with official shadcn/ui
Pill-Driven Flagship Card Features Block for Solid
A features section where four pills pick the one metric a flagship card shows: a giant rolling number with a delta badge and three ticks beside a 24-hour area chart.
Installation
Overview
A features section for Solid with Ark UI, built around one card and a control that chooses what it says. A centred header sits over four pills (latency, traffic, errors and cost for Meterline, an observability tool) and, under them, a card of two cells that share hairlines inside one rounded edge. The start cell holds the metric's title, a giant number that rolls to its new value, a badge with the change against last week and three ticks; the end cell draws the last 24 hours as an area chart with last week's level dashed across it. It's a segment group, a sliding number and a badge, with your theme's tokens for every colour and no button. For monitoring, analytics and billing products that have one number worth leading with.
FAQ
How do I change the metrics?
Edit RAW_METRICS at the top of the file. Each metric is a title, a pill label, a unit and 24 readings written as whole numbers times ten to the power of its decimals (so 14.1 dollars is 141 with one decimal), plus last week's average on the same scale. The number, the delta, the peak, the low, the average and the chart's shape are all worked out from those readings, so the card cannot disagree with its own chart.
Are the pills tabs?
They are a segment group named "Metric": one choice is always selected, and the arrow keys move between the pills and choose as they go. The card changes in place rather than opening a separate panel, so a segment group describes it better than tabs would. A polite, visually hidden line reads out the new metric and its change each time you pick one.
Is the chart accessible?
The chart is drawn from hand-made SVG and token colours, and each one is exposed as an image whose label is a sentence built from the same readings: the metric, its value now, the change against last week and the peak, the low and the average. The three ticks beside it say the same things as text, so nothing is only in the picture. Only the chart of the selected metric is visible to assistive technology.
Does the card change size when I switch?
No. The four charts sit in one grid cell and cross-fade, so the cell is as tall as the tallest, and the start cell's text is written to stay on one line per tick, so switching never moves the page. With reduced motion the charts swap instantly.
Related
- Analytics Widget Dashboard FeaturesMetrics and charts
- Tabbed Hero Feature Split FeaturesTabs and accordions
- Segmented Tab Split Frame FeaturesTabs and accordions
- Ring Progress Metric Split FeaturesMetrics and charts
- Metric Hero Strip FeaturesMetrics and charts
- Tab Swap Split Showcase FeaturesTabs and accordions