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 token swap widget for DEX and crypto wallet apps, with an editable amount, a flip button, a token picker and slippage settings.
View componentCrypto/Fiat
A crypto amount input that switches between fiat and token units at the current rate, for wallets, exchanges and payment flows.
View componentCandlestick Chart
A candlestick chart with a volume histogram, a magnet crosshair and a live OHLC legend, for stock and crypto trading terminals.
View componentTicker Tape
A scrolling stock and crypto ticker tape with BTC, ETH, TAO and NVDA, green up and red down, paused on hover, for headers and trading dashboards.
View componentMarket Heatmap
A stock market heatmap with tiles sized by market cap and tinted by the daily move, for market overview and trading dashboards.
View componentAssets Balance Card
A portfolio balance card with rolling odometer digits and an intraday chart you can drag taller, for crypto wallets and banking apps.
View componentBalance Header
A wallet and bank balance header with the total, the 24h move and a privacy toggle that masks every figure, for crypto and fintech apps.
View componentCurrency Amount
Currency and crypto amount formatters that keep symbols, decimals, abbreviations and signed colours consistent across a fintech screen.
View componentHoldings Table
A fund holdings table with market value, price, YTD return and portfolio weight bars, sortable by any column, for ETF and wealth apps.
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