shadcn.io is not affiliated with official shadcn/ui
Stat Hero CTA Block for Ark UI
A reverse split call to action with a giant hollow figure that floods with colour as it scrolls into view in the start cell, then a solid divider, a headline, one sentence, a Shine Button and a quiet second action.
Installation
Overview
A big-number call to action for React with Ark UI. Between the page rails, the start cell holds one giant figure drawn as hollow letters, 50,000+ parcels labelled every day for Packwell, a made-up shipping-label tool; when it scrolls into view the letters flood with colour from the bottom. A solid divider with a + mark where it meets the top rule separates it from the headline, one sentence, a Shine Button and an outline button. On a phone the copy comes first and the figure follows under a rule. It's built from Outline Text, Guides, Shine Button and Button, with CSS transitions for the entrance. For milestones, customer counts and any closing section where one number should be the loudest thing on the page.
FAQ
How do I change the figure?
Edit FIGURE at the top of the file and the caption under it. The figure and its caption are one figure, so a screen reader hears them together. The outline is the real text, and the colour that floods it is a copy of it hidden from screen readers, so nothing is read twice.
When does the figure fill with colour?
When at least half of it has scrolled into view, once. Until then it's an outline in your text colour, which already reads at that size; the fill is only the finish. Without scripts the fill is shown from the start, and with reduced motion the figure fills at once instead of flooding.
Can I change the outline and the fill colours?
Yes. Outline Text takes strokeColor, fillColor, strokeWidth, duration and fillFrom (bottom, top, start, end or the centre). The block keeps both to your text colour so any preset keeps its contrast, and the primary colour stays on the button.
Where do the buttons go?
Both are links (href="#"): point Start shipping free at your sign-up and Read the case studies at your stories.
Each button takes asChild with the link inside, so it can be your router's link.
How does the split work?
The two cells share a two-column grid from lg; the copy is first in the document, so it is read first, and the figure is placed in the start column. The divider is the copy cell's own border, with marks drawn by Guides where it meets the top rule. Below lg the cells stack and a Guides rule separates them.