Crypto and web3 UI components for React
Components for onchain products, taken from real ones. A swap ticket where the button text carries the validation, balances that read as money rather than as raw decimals, and market surfaces that survive live prices moving under them. Dark, dense, and installed as source you own.
9 components, installable with the shadcn CLI.
Swap Ticket
A trade card with an editable amount, a flip button that swaps the two cards, and a token overlay.
View componentCrypto/Fiat
A dual-denomination field. Type in fiat or units, the toggle carries the value through the rate.
View componentCandlestick
Candles over a volume histogram with a magnet crosshair and a live OHLC legend.
View componentTicker Tape
A finance tape gliding through a rail. Hover to hold it still, green up, red down.
View componentMarket Heatmap
The market as one block of ground: tiles sized by cap, tinted by the day's move.
View componentAssets Balance Card
A balance hero with rolling odometer digits and a chart you drag taller.
View componentBalance Header
A wallet's headline number with a privacy toggle that masks every figure to dots.
View componentAmount
A money-formatting family so every number in a screen reads the same.
View componentHoldings Table
A fund-holdings register with money columns, YTD pills, and weight bars.
View component
Questions
- Do these connect to a wallet?
- No. They are interface components with no wallet or chain dependency, so you connect them to wagmi, viem or whatever your stack uses and keep the UI layer separate.
- Are token amounts formatted safely?
- Amount inputs and balance displays are built around fixed decimal handling and tabular figures, so long token values stay aligned and readable.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide