shadcn.io is not affiliated with official shadcn/ui
Milestone Notification Block for React
A subscriber milestone notice for a newsletter platform: 10,000 in a rolling number with a Replay from 9,999, a CSS ruler with ticks at 1k, 5k, 10k and 25k that names the next mark and what is still to go, and a thank-you post you can copy.
Installation
Overview
Mark a number worth sharing without confetti, with this milestone notice for React with Base UI. It is Pebblemark, a newsletter platform, in one hairline frame with a plus mark on each corner and three bands. The first holds "10,000 subscribers" in a Sliding Number and a Replay button that rolls it again from 9,999. The second draws a ruler in CSS with ticks at 1k, 5k, 10k and 25k, the passed ones solid, and a sentence for the next mark and what is still to go ("Next is 25,000: 15,000 to go, 40% of the way."). The third shows a thank-you post in a quote and a Copy Button that really copies it. Guides draw the lines. For newsletters, communities and any product that counts people.
FAQ
Does anything get posted?
No. Copy puts the text on your clipboard and the status line says so; posting is up to you. In your app send the count from your analytics and build the post from your own copy, then link the button to your composer if you like.
What does Replay do?
It sets the number to 9,999 and, 700 milliseconds later, back to 10,000, so the last digits roll. It is a single timeout cleared if you leave the page, the button stays readable while it runs, and with reduced motion the digits change in place.
How is the ruler drawn?
A track, a fill and four ticks positioned by percentage of the last mark, in a left-to-right box so it reads the same in any language. The figures come from the typed MARKS: change them and the ruler, the passed count and the next-mark sentence follow.
Where does the date come from?
The day the count passed 10,000 is a typed ISO date, shown in the header as a time element. Nothing reads the clock.
Related
- 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 Markers Changelog
Lists and timelinesA centred rail for a build service: milestones are filled diamonds with their version, day and kind on one side and their title on the other, patches are small dots in a compact line, and a toggle shows milestones only or every release.
- Pro
Milestone Rail Blog
Stats and draftsA publication's milestones as a rail of five nodes under a centred header: reached ones solid with a tick and their day, the next one outlined with a progress bar and 38 posts to go; a vertical list on phones.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A habit-app streak notice: the run in a rolling number, this week as seven day cells where today fills in when you press Mark today done, an Undo, and a Streak freeze switch that says in words what a missed day would do.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.