Index bar

A value on a gradient scale, like UV or air quality.

Index bar is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Live feedA live list. A new event unfolds at the top out of a blur and the rows beneath settle down on a spring; the oldest folds away at the bottom.
Number flowA number whose changed digits pop in one after another out of a slight blur, from the right. Unchanged digits stay put, the row glides when the digit count changes, and the whole number tints green or red for a beat after it moves.
Stat tileA title with an info dot, a flowing number, a delta chip and a sparkline that draws itself in. By default it is a live revenue tile; pass `live={false}` with your own `series` for a static one.
BarsBars grow out of the baseline one after another. Hover (or arrow keys) rings one bar and a tooltip glides beside it.
DonutDonut + Gauge. Donut: each arc draws itself clockwise, one after the other; hover a slice and it swells, the rest recede and the centre number flows to its value.
GaugeDonut + Gauge. Donut: each arc draws itself clockwise, one after the other; hover a slice and it swells, the rest recede and the centre number flows to its value.