shadcn.io is not affiliated with official shadcn/ui
By The Numbers Bento About Block for Solid
An 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.
Installation
Overview
A company numbers section for Solid with Ark UI, written for Sumwell, a fictional expense tool. One lead cell, two columns wide and two rows tall from lg, holds the customers served as a large figure that rolls up once on view, with a line saying where it was a year ago and a twelve-bar trend of the last twelve month-ends, the latest bar in full weight. Five smaller cells sit around it, each tagged People, Customers or Product with a quiet badge and footnoted with how the figure was counted, such as "counted at quarter end". The cells share hairlines and run from rail to rail, and the band ends the block, so the next block's top rule is its foot. On a phone the lead comes first and the cells follow two across. It's built from Guides, Badge and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, investor updates and any page that needs one big number and its context. The figures are example data.
FAQ
How do I change the figures and the groups?
The month-end readings are MONTHLY, oldest first: the lead figure, the year-ago line and every bar's height are computed from it. The five small cells are FACTS: each has a group (People, Customers or Product), a label, a value, an optional suffix and the note that says how it was counted. All the figures are example data: replace the arrays at the top of the file with your own.
How is it read by a screen reader?
The whole bento is one description list. Each small cell gives its group and its label as two terms, then the figure and the footnote as descriptions, so it reads "People, Teammates, 64, counted at quarter end". The trend is one image with a text name that gives the first and the last month-end; the same two numbers are in the lead's sentence.
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.
Why do the bars not start at zero?
The bars show direction, not size: the lowest month-end keeps a short stub and the highest reaches the top, so a steady climb reads as one. The exact start and end are written beside them in text, so nobody has to read a value off a bar.