Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Numbers Narrative About Block for Vue

A company's story told through four figures: a title stuck at the start while the reader scrolls, and rows that pair each large number with two sentences on how it happened.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A numbers narrative for Vue with Ark UI, written for Pennyfold, a fictional bookkeeping app for small shops. Instead of a wall of tiles, four figures are each given a row: a large number, what it counts, and two sentences on how the company got there, the first set in the foreground and the rest muted. On wide screens the title and a short note stay stuck to the top at the start while the rows scroll by at the end, on a solid divider; on a phone the title comes first and the rows follow under a rule. The numbers roll up once when they scroll into view and keep their final width, so the rows never shift; with reduced motion they are simply there. The story is told in relative time ("In Year 1", "In Year 2") so it never goes stale. For about pages, investor updates and any page where the numbers need their story. The figures are example data.

FAQ

How do I change the figures and the stories?

They are the FIGURES list at the top of the file. Each has a value, an optional suffix (a unit or a percent sign, written small after the number), a label saying what it counts, a lead sentence and the rest of the story. Add or remove rows freely; the layout does not depend on the count.

How does the title stay in place?

It is a plain CSS sticky element inside the start column, so there is no scroll script and no observer. It sticks only from lg, where the columns sit side by side; on a phone it is an ordinary header above the rows. If you put a fixed header on your page, raise its offset (lg:top-16).

How is it read by a screen reader?

The figures are one description list. Each row is a term (what it counts), then two descriptions: the number and the story. Reading order matches the visual order of the story, even though the number is drawn above its label.

Why do the numbers not move the layout while they count?

The number component starts from zeros with as many digits as the final value and rolls each one in place, and the figure column has a fixed width from sm. Below sm the figure sits on its own line, so it cannot push anything.

Does it work right to left?

Yes. Every figure is wrapped so it keeps its reading order, the divider and the sticky column follow the start side, and the layout uses logical properties throughout.

All 150 about blocks