Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Vesting Schedule Web3 Block for Ark UI

A token vesting portal: a staircase chart of a 48 month grant with a 12 month cliff, a Date slider that reads vested, claimed, claimable and locked, the next unlocks with dates, and a Claim button that refuses when nothing is claimable.

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

Show when a grant unlocks and what can be claimed today, with this vesting schedule for React with Ark UI. It's the portal of Cliffhouse, a fictional token vesting portal, with a sample grant of 60,000 KNOT starting on 1 Jul 2025: nothing vests for the first 12 months (the cliff), then 1,250 KNOT on the first of each month until month 48. A drawn staircase shows the cumulative vested amount with a marker for today, the fixed date 18 Oct 2026, which is month 15. A Date slider from month 0 to 48 previews any month and a side list reads vested, claimed so far, claimable and locked at that date. Under it a list names the cliff and the next three unlocks with their dates. The foot's one primary, for example Claim 1,250 KNOT, adds today's claimable amount to claimed and, when there is nothing to take, stays reachable and says why. For token portals, payroll in tokens and grant pages.

FAQ

How are the amounts worked out?

Vested is zero before month 12 and the month number times 1,250 from then on, capped at 60,000. At month 12 the cliff releases 15,000 at once. Claimable is vested minus claimed, never below zero, and locked is the total minus vested. The chart, the side list and the unlock rows all call the same function.

Does the slider change what I can claim?

No. The slider previews any month, and the status line says so; a claim always uses today, month 15. The side list shows claimable at the previewed date, and the button shows claimable today.

What happens when I press Claim?

Claimed becomes everything vested today, the button turns into Nothing to claim, and pressing it again says when the next unlock is. Nothing is sent: it is local state, as the status line says.

What stays local, and how do I wire it?

All of it. The grant, the dates and the claimed amount are constants and a state variable. In your app read the schedule from your vesting contract, send the claim as a wallet transaction, and take today's date from the chain's clock so the marker moves.

What risks does the page state?

Unvested tokens cannot be moved, and a grant can be cancelled by its issuer before it vests. The page says so under the side list, because a vesting schedule is a promise made by a contract and an issuer, not a balance you hold.

How does it look on a phone?

The chart and slider come first, the side list drops under them, then the unlocks and the pinned Claim button. The chart is a drawing, so everything it shows is also written in the list and the caption.

All 100 web3 blocks