shadcn.io is not affiliated with official shadcn/ui
Milestone Reached Success Block for Solid
A page for the week weekly active users passed 10,000: a greyscale medal, a line of twenty weeks with the crossing marked and described in text, a ring of the way to the next milestone, and a quiet fall of confetti.
Installation
Overview
Celebrate a number worth celebrating with this confirmation page for Solid with Ark UI. It is the page Summitfern, an app-growth analytics tool, shows when weekly active users pass 10,000: the page's side rails and one band frame it, split in two with the drawing first on a wide screen and the message first in the reading order. The message gives the heading, one sentence and three facts (the week it passed, last week's users and the growth over twenty weeks) over the Shine Button, View analytics. The drawing is a greyscale medal that reads 10k, a hand-built line of twenty weekly counts with the crossing ringed and a dashed line at 10,000, and a small Circular Progress ring of the way to 25,000. A thin fall of Confetti drifts behind the band. For analytics, growth and subscription tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was measured. The twenty weekly counts are typed in WEEKLY and the date of the latest week in AS_OF. To wire it, fill WEEKLY from your analytics (oldest week first), set the two milestone constants, and point View analytics at your report. The crossing week, the growth and the ring's share are all worked out from the counts.
Is the line readable without seeing it?
Yes. The drawing is hidden from assistive technology and a caption below it says the same thing in words: the first and last counts with their weeks, the week it first passed 10,000, and that the dashed line marks that level. The medal and the ring are hidden too, with the ring's figures written beside it.
What happens to the confetti with reduced motion?
It is hidden: the layer carries motion-reduce:hidden, so a visitor who asked for less motion sees no pieces. Otherwise it is a low count of pieces falling slowly behind the content, decoration only, taking no clicks.
How does it look on a phone?
The message comes first, with the button under the three facts, then the medal with its caption, the line and the ring stacked in one card. From the large breakpoint the drawing moves to the start and the message to the end.