Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Milestone Notification Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Mark a number worth sharing without confetti, with this milestone notice for React with Ark 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.

Is it accessible?

The ruler is one image with a text label that lists the marks and how many were passed, and the next-mark sentence says the same in words. The rolling digits are read as one number, and one polite status line reports a copy or a replay.

How does it look on a phone?

The number and Replay stack, the ruler shrinks (its labels stay on one line), and the quote and the Copy button stack with the button at the start. The status line reserves its lines.

All 100 notification blocks