shadcn.io is not affiliated with official shadcn/ui
ICO Countdown Web3 Block for Radix UI
A token sale page you scrub through time: a Move the clock slider over a seven day window shows the time remaining, the money raised, which of three tiers is open and what a contribution would buy at that price.
Installation
Overview
Show a token sale at any moment of its run, without a clock that ticks, with this sale countdown for React with Radix UI. It's the page of Kindlefund, a token sale, and every figure is a typed sample, not an offer. A Slider named Move the clock scrubs a seven day window from a fixed date, and under it the time remaining, the money raised against a two million dollar goal in a Progress bar and the open tier all follow the thumb, so the page shows what a visitor would have seen then. Three tiers, Early, Standard and Last, each list a price, a cap and a bar filled from a typed raise curve, with a state in words: Closed, Open or Not open yet. A Field takes a contribution in dollars and shows how many KNDL it buys at the open tier's price. Contribute is the only Shine Button, and it answers that nothing was raised. For token sales, fundraising pages and any launch with phases.
FAQ
Why doesn't the countdown tick?
Because the page is a replay. The block's "now" is the constant AS_OF, 76 hours into a 168 hour sale, and the time remaining is arithmetic from the sale's typed end. Nothing counts down on its own, so there is nothing to pause. Back to now returns the slider to that moment.
How are the tiers and the raise figures worked out?
Each tier has typed hours, a price and a cap. The money raised at a given hour is read off a typed curve of points joined by straight lines, and a tier's bar shows the part of the raise that falls inside its hours, up to its cap. After the sale ends no tier is open, and Contribute explains that the sale has ended.
What does the contribution field check?
It accepts 50 to 10,000 dollars per wallet, ignores commas, and shows the problem next to the field when the amount is outside that range. The tokens you would receive are the amount divided by the open tier's price. Pressing Contribute with a problem puts focus back in the field and says what to fix.
What stays local, and how do I wire it?
All of it. There is no wallet, no contract and no payment, so "Nothing was raised" is literally true. In your app read the sale's timing, tiers and raised amount from your contract or backend, and run the same limits on the server; a client-side check is only a convenience. State the risks and your terms next to the button.
Is it accessible from the keyboard?
Yes. The slider moves with the arrow keys and names its value as a date and time, and the result is announced once you let go rather than on every step. Tier state is written as a word beside its dot, and one polite status message says which tier is open or what Contribute did.