A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — an electrified dot grid with twinkling four-point sparks.

Gradient Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — soft gradient fills that fade into the floor.

React · Tailwind CSS · Motion

Browse

Home All components 213

Collections

Marketing UI 107 App UI 94 AI 16 Charts 45 Backgrounds 2 Text 43

Charts

Resources

Docs & install Scalar Design

Charts

Heatmap

Intensity across two dimensions.

2 results

All Marketing UI App UI AI Charts Backgrounds Text

Bar chart Stacked bar Horizontal bar Line chart Area chart Spark chart Pie chart Donut & semi-donut Radial chart Hexagon chart Heatmap Funnel chart Category bar Segmented progress Scatter & bubble Combo chart Waterfall Diverging bar Candlestick Treemap Waffle chart Sankey

2 results

Sparkle Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — an electrified dot grid with twinkling four-point sparks.

Gradient Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — soft gradient fills that fade into the floor.

All Marketing UI App UI AI Charts Backgrounds Text