shadcn.io is not affiliated with official shadcn/ui
Growth Heat Table About Block for React
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 Base 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.
Related
- Pro
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- Pro
Rounds Funding Timeline About
TimelinesA funding history as three round cells, each with the amount, the lead investor, an undisclosed valuation and a segmented bar of where the money went whose four parts add to 100 percent.
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.