shadcn.io is not affiliated with official shadcn/ui
Statement Metric Hero Logos Block for Solid
A count written as one display-size sentence for a referral-program tool, its two figures marked by a highlighter, with one Shine Button and a tray of six customer wordmarks.
Installation
Overview
A statement metric for Solid with Ark UI. The count is a sentence, "12,000 teams in 60 countries run on Clovercote", set centred at display size and as the block's one heading. A highlighter draws across each of the two figures once when the page loads, in the text colour at 12% so the primary colour stays on the button. One Shine Button follows the statement. Under it a tray holds six customer wordmarks: a tinted shell with + marks on its corners around a raised panel, the panel light on a light page and dark on a dark one, with the wordmarks in cells that share their hairlines, three across by two from sm and two across by three on a phone. Built from Highlight Text, Frame, Guides, Shine Button and Lucide icons, with CSS for the entrance and your theme's tokens for every colour. Made for a landing page that wants its scale proof to read as a headline rather than a stat card.
FAQ
How do I change the figures in the sentence?
Edit the heading: each figure is a Highlight Text with its text, and the words between are plain text. The figures sit in bdi elements so a right-to-left layout keeps "12,000" and "60" in reading order inside the sentence. Change delay on each to stagger the marks, or remove the Highlight Text from one to mark only the other.
Why is the marker grey and not the primary colour?
The primary colour marks one action per block, here the Shine Button. The marker is the text colour at 12% (MARKER at the top of the file), so it reads as a highlighter on any theme without competing with the button, and the text on it stays at full contrast. Pass any other CSS colour as highlightColor to change it.
Where does the button go?
It is a link (href="#"): point it at your customer stories or your pricing. It is a Shine Button, so a band of light sweeps across it once on hover and keyboard focus.
The button's asChild receives its props: spread them onto your router's link.
What happens with reduced motion?
The highlighter is simply there, already drawn across both figures, and the section's entrance transition is off. A visitor without script sees the marks too. The text never depends on the animation: the sentence reads the same with or without the marker.
How do I change the customers in the tray?
Edit CUSTOMERS: each entry is a name, an icon (any Lucide icon), a lettering and a mark. Keep it to six so every row of the tray is full at every width (two across, then three across). The names are fictional placeholders for your own customers, and each turns to the text colour on hover.