shadcn.io is not affiliated with official shadcn/ui
Large Figures About Block for React
Four huge figures for a beekeeping marketplace in a two by two grid with one word under each and nothing else, split by a cross of two hairlines with plus marks.
Installation
Overview
A section of four large figures for React with Base UI, written for Hivecount, a fictional marketplace for small beekeepers. A centred header, then the figures two by two at display size (text-7xl on wide screens, text-5xl on a phone), each with one word under it and nothing else. Two hairlines cross between the cells: a rule from rail to rail and a line down the middle, with a + mark where they meet and on the rails, so the grid reads as a drafting cross. Each figure rolls up once on view and holds its final width, and the block ends on the figures. 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, launch posts and any page where four numbers are the whole message. The figures are example data.
FAQ
How do I change the figures?
They are FIGURES at the top of the file: a value, optional decimals and suffix (the "k" beside "9.8k") and one word. Keep four so the cross has a cell in each quarter. All the figures are example data: replace the arrays at the top of the file with your own.
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.
How is the cross drawn?
The vertical line and the rule are absolute layers over the grid, and the plus marks come from Guides placed on zero-size boxes at the right spots, so they use the same marks as every other block. They are hidden from assistive technology.
How is it read by a screen reader?
A description list: the word is the term and the figure is its description, so it reads "Beekeepers, 3,120". The word is first in the DOM and drawn under the figure.
Related
- Pro
Counters Row About
NumbersFour counters for an uptime monitor in one hairline band, each rolling up once on view with an arrow and a sign for how it moved on last month, under a header that says when the figures were last updated.
- 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
Since Day One Figures About
NumbersSix figures for a plant-care app that each set the Year 1 value, struck through, beside today's with an arrow, and write the change as a sign and a percent, all in foreground weights with no colour.
- Pro
Counter Stats Hero
Stats and live dataA compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.
- Pro
Minimal Hero Metric Stats
Hero metricOne number and nothing else for a food-bank tool: the week's meals served in display type under the page's top rule, one hairline and one sentence that compares it with last week and last year.
- 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.