shadcn.io is not affiliated with official shadcn/ui
Token Launch Web3 Block for React
A token's launch plan with editable allocation shares that must total 100 percent, a stacked bar, cliff and vesting per allocation, a months-after-launch slider for circulating supply and market cap, and three dated milestones.
Installation
Overview
Plan a token's distribution and read what is unlocked on any month, with this tokenomics panel for React with Base UI. It's the launch plan of Larkspur Labs, a protocol team, for a token called LKSP, and every figure is a typed sample. Three headline numbers give the total supply, the initial price and the fully diluted value. A one-row stacked bar and a table list five allocations, Team, Investors, Community, Treasury and Liquidity, each with an editable share, its tokens, cliff and vesting, and how much is unlocked now. The shares must total 100 percent, and the panel says how far off they are. A Slider named Months after launch, from 0 to 48, derives the circulating supply, its share of the total and the market cap at the initial price against the fully diluted value. Three milestones are dated from a fixed day. Lock distribution is the only Shine Button. For protocol teams, token docs and investor pages.
FAQ
What happens if the shares don't total 100 percent?
The panel counts what you typed. Under the table it says how far short or over you are, the count above the bar shows the total, the bar scales so it never overflows, and Lock distribution refuses with the total in the status message. Everything else, including the slider's reading, keeps working with the shares as typed.
How is the circulating supply derived?
Each allocation types a share unlocked at launch, a cliff in months and a linear vesting period after it. Before the cliff only the launch part is unlocked; after it the rest vests evenly. The circulating supply is the sum of every allocation's tokens times its unlocked fraction at the chosen month, and the market cap multiplies it by the typed initial price.
Are these figures advice or a forecast?
No. They are samples for the layout, labelled as such in the header. A real plan should state its risks, who holds what, and what could change the schedule, and should not present a market cap as a prediction.
What stays local, and how do I wire it?
All of it. No token, contract or audit exists, the document buttons say they aren't linked, and Lock distribution deploys nothing. In your app load the allocations from your plan or contract, keep the schedule in one place that both the page and the vesting contract read, and link the real documents.
Is it accessible from the keyboard?
Yes. Each share is a labelled input, the table has a caption and row headers, the slider moves with the arrow keys and names the month, and the bar is decorative because the table says the same. One polite status message reports the total, the month and the result of locking.