shadcn.io is not affiliated with official shadcn/ui
Perpetual Trading Web3 Block for React
A leveraged position ticket for an invented perpetual: Long or Short, margin and a 1x to 20x leverage slider, with the liquidation price, its distance and funding derived, a drawn price ladder and a Price moves slider that shows profit, loss and liquidation.
Installation
Overview
Show the risk of a leveraged position as plainly as its size, with this perpetual trading panel for React with Base UI. It's the ticket of Leverfold, a derivatives exchange, for the invented ROWN perpetual, and every price is a typed sample, not market data. A Long or Short pair, a margin Input in USDC and a leverage slider from 1x to 20x set the position. A list works out the size in USDC and ROWN, the entry price, the liquidation price (a 0.5% maintenance margin), how far away it is and the funding per eight hours, which longs pay and shorts receive. Above 10x a plain line says how big a move against you ends the position. A drawn price ladder marks the entry, the liquidation and the mark price, and a Price moves slider from minus 20% to plus 20% moves the mark and reads the profit or loss, the margin ratio and what remains of the margin; past the liquidation price the panel says Liquidated: the margin is lost. Open position, the one Shine Button, ends in Simulation: no order was placed. For derivatives exchanges, risk calculators and trading education.
FAQ
How is the liquidation price worked out?
For a long it is entry x (1 - 1 / leverage + 0.005) and for a short entry x (1 + 1 / leverage - 0.005): the price at which the margin plus the profit or loss falls to the 0.5% maintenance margin of the position. At 1x a long is almost never liquidated, so its liquidation price sits off the bottom of the ladder and the label is pinned to the edge. The distance is that price's gap from the entry in percent.
What does the Price moves slider do?
It moves the mark price from the entry by the percent you pick. Profit or loss is the position size times that move, with the sign flipped for a short; the margin ratio is the margin plus that profit or loss over the position size, and the margin remaining is what remains of the margin. At or past the liquidation price the margin remaining is zero and the loss is capped at the margin.
What stays local, and what does the panel not do?
All of it. The entry price, the maintenance margin, the funding rate and the 5,000 USDC demo balance are typed constants, nothing is a market feed, and Open position only changes the status line. Leverage can lose the whole margin, and the panel says so under the ticket. In your app read the market's real mark, maintenance margin and funding, and show the exchange's own liquidation price: this one is a teaching figure.
How is funding shown?
The sample rate is 0.01% of the position every eight hours. A long pays it and a short receives it, and the row's label says which. Real rates move with the market and can change sign.
Is the ladder readable without seeing it?
Yes. It is drawn only to show the order of the three prices, and the same numbers are in the list, in the caption read by screen readers and in the polite status line, which gives the profit or loss for the move you picked or says the position was liquidated.