Theme · Data Dashboard · Advanced
Crypto Trading Terminal
Crypto terminal = a live pair header, a red/green order book, a candlestick chart, a trades tape, and a coin strip in constant view.
Tips
Price in monospace, everything else in sans. Green/red encode direction, not decoration.
See also
Build a crypto trading terminal called "LedgerX".
STYLE
- Deep terminal canvas (#0b0e11), hairline panel borders rgba(255,255,255,0.06), no cards
- Gains green (#0ecb81), losses red (#f6465d), brand amber (#f0b90b)
- Monospace for prices and quantities, tabular numerals
LAYOUT
- Top pair bar: "BTC/USDT - Bitcoin"; last price 64,281.50 in tabular numerals; a green +2.34% chip; tall adds 24h High 65,120.00 / Low 62,870.10 / Vol 1.24B
- Left: order book - red asks (65,041.2 / 0.4218 ...), mid price 64,281.50, green bids (64,279.8 / 0.8814 ...)
- Centre: candlestick chart with timeframe chips 1m / 15m / 1H (on) / 4H / 1D, a "Live" tag, and a 00:00-16:00 time axis
- Right: recent trades tape - price (green/red), qty, time (21:58:04 ...)
- Tall only: pair strip BTC +2.34% (on), ETH -1.12%, SOL +5.61%, BNB +0.48%, XRP -2.03%
COMPONENTS
- Pair header: ticker, live price, change chip, 24h stats
- Order book: asks above the mid price, bids below, size columns
- Candlestick chart with timeframe chips and a Live tag
- Trades tape: price, qty, time; coin strip with percent changes
INTERACTION
- Timeframe chips swap the active state; book rows tint red/green by side; tape rows arrive pre-coloured.
TECHNICAL
- React, Tailwind CSS, lightweight-charts, no component library