Trading UI components for React and Tailwind
The parts a trading screen is made of, built for real density rather than a demo. Order entry, positions, fills, live tape and the price surfaces around them, all dark by default and sized for tabular numbers. Every one installs through the shadcn CLI into your own project, so you own the source and can take it apart.
13 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 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 componentFills Blotter
A live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.
View componentTrade Tape
A live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.
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 componentCandlestick Chart
A candlestick chart with a volume histogram, a magnet crosshair and a live OHLC legend, for stock and crypto trading terminals.
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 componentTrade Journal Table
A trade journal table for crypto and stock traders, with the open position lit and every closed trade settled to a win or loss.
View componentPrice Scrubber
A stock price chart you scrub with a magnet crosshair and price and time badges on the axes, the headline price turning green or red against the open.
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 componentCurrency Amount
Currency and crypto amount formatters that keep symbols, decimals, abbreviations and signed colours consistent across a fintech screen.
View componentEquity & Drawdown
An equity curve with a synced drawdown chart for backtests and trading performance, one crosshair reading return, drawdown and days below peak.
View componentMarket Snapshot
A stock price card with periods from 1D to All and a line chart you scrub for the price at any moment, for broker and market apps.
View component
Questions
- Are these components ready for a live trading product?
- They are production-grade React source that you install and own, built with real data density and every state designed, including loading, empty, error and stale. They carry no market data or broker connection, so you wire them to your own feed and order API.
- Do the numbers stay aligned?
- Yes. Every figure is set in tabular numerals with a fixed decimal treatment, so columns line up and values do not jump as prices tick.
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