shadcn.io is not affiliated with official shadcn/ui
Lending Borrow Web3 Block for Radix UI
A lending market with supply and borrow tables and a health factor you can push: two sliders borrow more or drop the collateral price, and the scale says Safe, At risk or Liquidated and names the fall that liquidates.
Installation
Overview
Show what borrowing does to a position before anyone borrows, with this lending markets panel for React with Radix UI. It's the markets screen of Lendhearth, a sample lending market, and every rate, price and factor is a typed sample, not market data. Two tables list the supply markets (rate, wallet balance, what you have supplied) and the borrow markets (rate, what you owe). Beside them a health factor is drawn on a scale with a tick at 1.0 and read as Safe, At risk or Liquidated in words, worked out from the collateral, each asset's collateral factor and the debt. Two Sliders, Borrow more and Collateral price falls by, re-derive it as you drag, and the side cell names the fall that would liquidate the position and how much room is left. The Shine Button borrows only above a health of 1.2 and says why when it can't, and nothing is borrowed from anything. For lending dashboards, risk calculators and DeFi front ends.
FAQ
How is the health factor worked out?
Each supplied asset's value (tokens times a sample price) is multiplied by its collateral factor and the results are added into the borrowing power. The health factor is that power, after the price fall you chose, divided by the debt. Below 1.0 the position could be liquidated, so the scale marks 1.0 and the word turns to Liquidated; from 1.5 up it reads Safe. Every supplied asset falls by the same share, which is an assumption the panel states.
Why is Borrow sometimes refused?
Borrowing stops when the new debt would take the health factor under 1.2, and with no amount picked there is nothing to borrow. The button stays focusable and answers in the status line with the health it would leave, instead of going dead. Move the Borrow more slider back, or drop the price fall, and it works again.
What stays local, and how do I wire it?
All of it. Pressing Borrow adds the amount to the USD Coin debt in the page's state and nothing is sent to a wallet or a chain. In your app read supplied and borrowed balances, collateral factors and prices from your protocol's contracts or indexer, derive the health factor from the same numbers the contract uses, and send the borrow as a signed transaction only after the user confirms it.
Are the rates real?
No. Rates, prices and factors are typed samples, shown as a fixed sample rate a year; real rates change with utilization. Tokens named in text are examples and the panel does not recommend borrowing or supplying anything.