shadcn.io is not affiliated with official shadcn/ui
Stacked Total Impact About Block for React
A 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.
Installation
Overview
An impact section for React with Base UI, written for Freehour, a fictional scheduling tool. A framed lead, drawn with lines that overshoot its corners and plus marks, holds one large figure (412,000 hours returned, rolled up once on view) over a stacked bar whose four segments are drawn in foreground weights and sized by each source's share, with a legend of the four sources, their hours and their percent, and a visible sum underneath. Below it a band of three smaller cells (people, hours back per person, meetings booked with no message) runs from rail to rail in shared hairlines and ends the block. Stacked on a phone. It's built from Guides and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, sustainability and impact reports and any claim that has to show its working. The figures are example data.
FAQ
How do I change the parts?
SOURCES lists the four parts with their hours. The total, the shares, the bar, the legend, the sum line and the hours back per person are all computed from them and from PEOPLE, so the numbers always add up. All the figures are example data: replace the arrays at the top of the file with your own.
Why do the percentages add up to 100?
Each share is rounded down and the points left over go to the largest remainders, so four rounded numbers can't total 99 or 101. The bar's segments use the same shares.
How is the bar read by a screen reader?
The bar is one image whose name gives the total and each source with its share. The legend under it is a description list with the same numbers, and the sum line is text. The segments are different weights of the foreground colour, so they follow your theme.
Does the figure count up?
Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.
Related
- 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
An asymmetric bento for a subscription-analytics tool: a hero cell with the customer count over a ladder of milestones (1,000, 5,000 and 10,000 reached, with the month, and 25,000 next), and three smaller cells that say why each metric matters.
- Pro
Community Growth Chart About
NumbersA community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
- Pro
A sustainability story for a carbon-accounting company: a hand-built step chart of emissions per customer falling over six years, numbered pins on the steps, and a list of what was done at each one.
- Pro
Hero Metric Card Stats
Hero metricOne headline figure for a treasury tool, cash on hand in a big number inside a card in a card, with a change pill, a comparison and a two-line footnote that says when it was read and from where.
- Pro
Connected KPI Bar Stats
KPI bands and tilesFour headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.