shadcn.io is not affiliated with official shadcn/ui
Growth Heat Table About Block for Radix UI
Five years of growth in one framed table: revenue, customers, team and NPS by year, each cell shaded by its size against its row, with a closing row of year-on-year revenue growth.
Installation
Overview
A growth table for React with Radix UI, written for Compoundly, a fictional savings app. Year 1 to Year 5 run across and revenue, customers, team and NPS run down. Every cell is shaded by how large it is against the rest of its row, in four steps of the foreground colour, so the shape of each row shows at a glance while every number stays in text; a small scale under the table says what the shading means. A closing row gives revenue growth on the year before, and the title states the total revenue multiple, both worked out from the same data. The table sits in a frame with corner marks and, on a phone, scrolls sideways in a labelled, focusable region with the row names pinned at the start. Years are written "Year 1" to "Year 5" so the block never goes stale. For investor updates, about pages and annual letters. The figures are example data.
FAQ
How do I change the rows and the years?
YEARS holds the column names and ROWS the four measures: an id, a label, a kind (money, count or score, which decides how a number is written) and one reading per year. Every shade, the closing row and the title come from those readings.
How is a cell's shade chosen?
Its place between the lowest and highest value of its own row, so a small measure like NPS is shaded as clearly as revenue. There are four steps, 5, 10, 15 and 20 percent of the foreground colour, written as literal classes so Tailwind keeps them.
Is the shading the only way to read size?
No. Every cell is its number in text, and the shading only adds shape. The table has a caption, column headings and a header cell for every row, and the colours are tints of your theme's text colour, so contrast holds in light and dark.