shadcn.io is not affiliated with official shadcn/ui
Milestone Reached Success Block for React
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 React with Base 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.
Related
- Pro
A page for a revenue goal passed at 108%: a bullet chart with a tick at 100%, three sub-goals each with a signed difference, a group of buttons that raises the next target by 10, 20 or 30 percent, and a Celebrate button that throws confetti.
- Pro
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.
- Pro
Milestone Lanes Awards
TimelinesTwo lanes on one quarter axis for a roadmap tool: company milestones above, awards below, a stepped hairline from each award to the milestone before it and the gap counted in months.
- Pro
Milestone Targets Onboarding
Milestones and recapsA launch planner's milestone step as a whole screen: three flags on a 120-day ruler that move as you type their days, three hairline cells for what to check, the measure, its target and the day, and a line that says what you review on the chosen flag.
- Pro
Analytics Connected Success
Integrations and syncsA confirmation window for connected analytics: a counting events-a-minute figure, a table of the first eight events that fade in and a bounded feed with Pause, and a docked panel of the chosen event's properties in a JSON tree.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.