Skip to content

Trading Terminal UI Inspiration & Reference

Definitive reference for building a world-class trading terminal UI. Compiled April 2026.

Table of Contents

  1. Open-Source Repos Worth Stealing From
  2. NPM Packages by Category
  3. Component Patterns to Implement
  4. Color Palettes
  5. Typography
  6. Layout Architecture

1. Open-Source Repos Worth Stealing From

Tier 1: High-Value References

OpenBB Platform

  • URL: https://github.com/OpenBB-finance/OpenBB
  • Stars: ~65k
  • License: AGPL-3.0 (caution: copyleft -- study patterns, don't copy code directly)
  • What to steal:
  • Design system architecture (separate design-system repo based on shadcn/ui + Radix UI)
  • Widget-based dashboard pattern -- each data view is an independent widget
  • Command-line input UX inside a visual terminal
  • Dark theme token system built on Tailwind
  • Frontend components: OpenBB-finance/OpenBB/tree/develop/frontend-components
  • Design system: OpenBB-finance/design-system
  • Tech: React 18+, Tailwind, shadcn/ui, Radix UI, Vite

TradingView Lightweight Charts

  • URL: https://github.com/tradingview/lightweight-charts
  • Stars: ~14.2k
  • License: Apache-2.0 (fully permissive)
  • What to steal:
  • Canvas-based chart rendering (fastest financial charts available)
  • Candlestick, line, area, baseline, histogram series types
  • Crosshair + tooltip patterns
  • Time scale with financial-grade precision
  • Price scale with auto-scaling
  • React integration patterns from official tutorials
  • Tech: TypeScript, HTML5 Canvas, zero dependencies

Reactive Trader Cloud (Adaptive Financial)

  • URL: https://github.com/AdaptiveConsulting/ReactiveTraderCloud
  • Stars: ~1.8k
  • License: Apache-2.0
  • Status: No longer maintained, but architecture is gold
  • What to steal:
  • Real-time FX tile layout (best-in-class price tile design)
  • RxJS-based real-time data streaming architecture
  • Blotter (trade history grid) component patterns
  • Spot tile with bid/ask spread visualization
  • Analytics panel with PnL charts
  • Notification system for trade execution
  • Workspace layout with tear-off panels (OpenFin integration)
  • Tech: React, RxJS, react-rxjs, styled-components, WebSockets

Bloomberg Terminal Clone (feremabraz)

  • URL: https://github.com/feremabraz/bloomberg-terminal
  • Stars: ~870
  • License: MIT
  • What to steal:
  • Full Bloomberg-style terminal layout in Next.js 15
  • Keyboard shortcut system mimicking Bloomberg
  • Multi-view architecture: market data / news / movers / volatility
  • Watchlist management pattern
  • Terminal-style command input
  • Real-time data simulation with configurable refresh rates
  • Color scheme directly inspired by Bloomberg orange/blue/black
  • Tech: Next.js 15, React 19, TypeScript, Redis, AlphaVantage API

Tier 2: Strong Component References

DariusLukasukas/stocks

  • URL: https://github.com/DariusLukasukas/stocks
  • Stars: ~500+
  • License: MIT
  • What to steal:
  • Clean Next.js 14 + shadcn + Tailwind stock app architecture
  • Visx + d3.js charting integration
  • Yahoo Finance API integration patterns
  • Stock search/screening UI
  • Company financials display layout
  • Tech: Next.js 14, Shadcn, Tailwind, Visx, d3.js, Yahoo Finance API

Signalist Stock Tracker (adrianhajdin)

  • URL: https://github.com/adrianhajdin/signalist_stock-tracker-app
  • Stars: ~100
  • License: MIT
  • What to steal:
  • AI-powered stock dashboard with Next.js + Shadcn
  • Real-time price tracking with line + candlestick charts
  • Alert system with event-driven workflows (Inngest)
  • Admin dashboard pattern for managing instruments
  • Watchlist CRUD pattern
  • Better Auth integration for trading platform auth
  • Tech: Next.js, Shadcn, Better Auth, Inngest, TailwindCSS

Open Trading Platform (ettec)

  • URL: https://github.com/ettec/open-trading-platform
  • Stars: ~300+
  • License: GPL-3.0
  • What to steal:
  • Cross-asset execution UI patterns
  • Order book visualization
  • Market depth display
  • FIX protocol integration patterns (backend)
  • React client for execution-oriented trading
  • Tech: Golang backend, React client, Java FIX simulator

EFITrading/nextjs-trading-terminal

  • URL: https://github.com/EFITrading/nextjs-trading-terminal
  • License: Check repo
  • What to steal:
  • Smart order entry form with auto price fetching
  • Market status tracking (open/close indicator)
  • Options trading interface
  • Polygon.io API integration
  • Tech: Next.js, TypeScript, Express.js, Polygon.io

Tier 3: Ecosystem & Learning References

Repo Stars What to Take
OpenBB-finance/design-system ~200 shadcn/ui-based financial design system tokens
blocknomic-technologies/open-trading-platform-UI ~100 Multi-exchange crypto trading UI
freqtrade/freqtrade ~48k Bot dashboard patterns, backtesting result visualization
marketcalls/openalgo ~2k TradingView Lightweight Charts integration, React Flow strategy editor
creativetimofficial/black-dashboard-react ~1.6k Dark dashboard template, chart card patterns
Wimboro/financial-dashboard ~100 Dark mode toggle, Google Sheets data sync pattern
cmdk (pacocoursey) ~9k Command palette foundation
bvaughn/react-resizable-panels ~5.2k Panel layout system
mathuo/dockview ~3.1k Full docking layout manager

2. NPM Packages by Category

Charts

Package Weekly DL Use Case License
lightweight-charts 200k+ Candlestick, OHLC, financial time series. THE standard. Apache-2.0
recharts 3.6M+ General dashboards, area/bar/line charts. Simple API. MIT
visx 500k+ Custom visualizations, low-level D3 primitives, brand-specific. ~15KB. MIT
@nivo/core + packages 400k+ Pre-styled charts with theming, animations, SSR support. MIT
d3 3M+ Full control. Use visx for React wrapper. ISC
echarts-for-react 200k+ Dense data, heatmaps, complex interactions. Apache-2.0
uplot 50k+ Fastest time-series charting. Tiny bundle. Canvas-based. MIT

Recommendation: lightweight-charts for all financial charts (candlestick, OHLC, depth). recharts for dashboard summary charts. visx for custom one-off visualizations.

Data Grids

Package Use Case License Cost
ag-grid-react (Community) Enterprise-grade grid. Sorting, filtering, grouping, 100k+ rows. MIT Free
ag-grid-enterprise Pivoting, Excel export, row grouping, server-side row model. Commercial $999/dev
@tanstack/react-table Headless -- full control over rendering. Custom UI. 10k rows sweet spot. MIT Free
react-data-grid (adazzle) Built-in dark/light themes via rdg-dark class. Virtual scrolling. MIT Free
react-virtuoso Virtualized lists/tables. Great for trade blotters. MIT Free

Recommendation: @tanstack/react-table + react-virtuoso for custom grids with our design system. AG Grid Community if we need out-of-box features fast. Add rdg-dark class pattern for dark theme.

Animated Numbers

Package What It Does Notes
@number-flow/react Digit-by-digit rolling animation. Intl.NumberFormat support. Best for price tickers. MIT.
react-countup Count-up animation from 0 to target. Scroll spy support. Classic counter. MIT.
react-slot-counter Slot machine style counter. Good for gamified displays. MIT.
motion (AnimateNumber) Spring/tween number animation with locale formatting. Motion+ members only (paid).

Recommendation: @number-flow/react for all price displays. Use its continuous plugin for passing through intermediate values. Use NumberFlowGroup to sync multiple price animations.

Ticker / Marquee

Package What It Does
react-ticker Infinite horizontal scroll. Moves text/images like a newsticker.
@dxkit-org/react-marquee Modern marquee with TypeScript. Smooth scrolling.
shadcn Ticker component Stock/crypto ticker with green/red price formatting and arrows.

Recommendation: Build custom ticker on react-ticker base, or use shadcn Ticker component pattern with @number-flow/react for animated prices.

Command Palette

Package Stars Approach
cmdk ~9k Headless. You style everything. Fuzzy search via command-score.
react-cmdk ~1k Pre-styled with Headless UI + Heroicons. Faster to ship.
shadcn <Command> N/A Built on cmdk. Best if already using shadcn/ui.

Recommendation: shadcn <Command> component (wraps cmdk). Already has dialog, input, groups, items, keyboard nav. Add custom groups: Markets, Instruments, Commands, Settings.

Layout

Package Stars What It Does
react-resizable-panels ~5.2k Resizable panel groups. SSR-compatible. Used by VS Code web.
dockview ~3.1k Full docking layout: tabs, groups, grids, floating panels, popout windows.
flexlayout-react ~900 Tabbed docking layout manager. React-only dependency.

Recommendation: react-resizable-panels for main layout structure (sidebar, main, detail). dockview if we want full Bloomberg-style tear-off panels and floating windows.

Toast / Notifications

Package Weekly DL Why
sonner 31M+ Default shadcn toast. Trade execution alerts, price alerts, system notifications.
react-hot-toast 3.5M Ultra-lightweight alternative. 5KB gzipped.

Recommendation: sonner -- it's the shadcn default, has promise-based toasts (perfect for order submission flows), and supports custom JSX for rich trade notifications.

Animation

Package Use Case
motion (formerly framer-motion) Layout animations, shared transitions, gesture handling.
@react-spring/web Physics-based animations. 30% smaller bundles in v10.
tailwindcss-animate Simple CSS animations via Tailwind classes.

Recommendation: motion for complex animations (panel transitions, chart reveals). tailwindcss-animate for micro-interactions (hover, focus, enter/exit). Both together.

3. Component Patterns to Implement

3.1 Price Tile (from Reactive Trader Cloud)

The FX price tile is the single most important trading UI component. Key elements: - Currency pair header (e.g., EUR/USD) - Bid and Ask prices with large font on the pip digits - Spread indicator between bid/ask - Direction arrows showing price movement - Notional input field - One-click trade execution buttons - Stale price indicator (grey out when data is old)

// Price display pattern: emphasize the pip digits
// For price 1.08542:
// "1.08" in small text + "54" in large text + "2" in superscript
<span className="text-xs text-muted-foreground">1.08</span>
<span className="text-3xl font-bold tabular-nums">54</span>
<span className="text-xs align-super">2</span>

3.2 Data Grid with Real-Time Updates

Pattern for flashing cells on value change:

// Flash animation on price change
// Use CSS class toggle with setTimeout
const [flash, setFlash] = useState<'up' | 'down' | null>(null);

useEffect(() => {
  if (prev && current !== prev) {
    setFlash(current > prev ? 'up' : 'down');
    const timer = setTimeout(() => setFlash(null), 300);
    return () => clearTimeout(timer);
  }
}, [current]);

// Tailwind classes
const flashClass = flash === 'up'
  ? 'bg-emerald-500/20 transition-colors'
  : flash === 'down'
  ? 'bg-red-500/20 transition-colors'
  : 'transition-colors duration-1000';

3.3 Bloomberg-Style Terminal Command Input

// Command input at top of terminal
// Supports: instrument lookup, function codes, keyboard shortcuts
<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandGroup heading="Markets">
      <CommandItem>Equities</CommandItem>
      <CommandItem>Fixed Income</CommandItem>
      <CommandItem>Commodities</CommandItem>
      <CommandItem>FX</CommandItem>
    </CommandGroup>
    <CommandGroup heading="Functions">
      <CommandItem>Chart (GP)</CommandItem>
      <CommandItem>News (N)</CommandItem>
      <CommandItem>Portfolio (PORT)</CommandItem>
      <CommandItem>Trade Blotter (VWAP)</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

3.4 Watchlist with Animated Prices

import NumberFlow from '@number-flow/react';

function WatchlistRow({ symbol, price, change, pctChange }) {
  const isPositive = change >= 0;

  return (
    <div className="flex items-center gap-4 px-3 py-2 hover:bg-white/5">
      <span className="font-mono text-sm w-16">{symbol}</span>
      <NumberFlow
        value={price}
        format={{ style: 'currency', currency: 'USD' }}
        className="font-mono tabular-nums"
      />
      <NumberFlow
        value={change}
        format={{ signDisplay: 'always', minimumFractionDigits: 2 }}
        className={isPositive ? 'text-emerald-400' : 'text-red-400'}
      />
      <NumberFlow
        value={pctChange}
        format={{ style: 'percent', signDisplay: 'always', minimumFractionDigits: 2 }}
        className={isPositive ? 'text-emerald-400' : 'text-red-400'}
      />
    </div>
  );
}

3.5 Market Status Indicator

function MarketStatus({ isOpen }: { isOpen: boolean }) {
  return (
    <div className="flex items-center gap-2">
      <div className={cn(
        "h-2 w-2 rounded-full",
        isOpen
          ? "bg-emerald-400 animate-pulse shadow-[0_0_8px_rgba(52,211,153,0.5)]"
          : "bg-zinc-500"
      )} />
      <span className="text-xs text-muted-foreground">
        {isOpen ? 'Market Open' : 'Market Closed'}
      </span>
    </div>
  );
}

3.6 Resizable Panel Layout

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

function TradingLayout() {
  return (
    <PanelGroup direction="horizontal">
      {/* Watchlist / Instruments */}
      <Panel defaultSize={20} minSize={15}>
        <Watchlist />
      </Panel>

      <PanelResizeHandle className="w-px bg-border hover:bg-primary transition-colors" />

      {/* Main Content */}
      <Panel defaultSize={55}>
        <PanelGroup direction="vertical">
          <Panel defaultSize={65}>
            <ChartPanel />
          </Panel>
          <PanelResizeHandle className="h-px bg-border hover:bg-primary transition-colors" />
          <Panel defaultSize={35}>
            <TradeBlotter />
          </Panel>
        </PanelGroup>
      </Panel>

      <PanelResizeHandle className="w-px bg-border hover:bg-primary transition-colors" />

      {/* Order Entry / Details */}
      <Panel defaultSize={25} minSize={20}>
        <OrderEntry />
      </Panel>
    </PanelGroup>
  );
}

3.7 Candlestick Chart with Lightweight Charts

import { createChart, ColorType } from 'lightweight-charts';

function CandlestickChart({ data }) {
  const chartContainerRef = useRef(null);

  useEffect(() => {
    const chart = createChart(chartContainerRef.current, {
      layout: {
        background: { type: ColorType.Solid, color: '#0a0a0a' },
        textColor: '#a1a1aa',
      },
      grid: {
        vertLines: { color: '#1a1a2e' },
        horzLines: { color: '#1a1a2e' },
      },
      crosshair: {
        mode: 0, // Normal
        vertLine: { color: '#fbbf24', width: 1, style: 2 },
        horzLine: { color: '#fbbf24', width: 1, style: 2 },
      },
      timeScale: {
        borderColor: '#27272a',
        timeVisible: true,
      },
      rightPriceScale: {
        borderColor: '#27272a',
      },
    });

    const candleSeries = chart.addCandlestickSeries({
      upColor: '#10b981',
      downColor: '#ef4444',
      borderUpColor: '#10b981',
      borderDownColor: '#ef4444',
      wickUpColor: '#10b981',
      wickDownColor: '#ef4444',
    });

    candleSeries.setData(data);
    chart.timeScale().fitContent();

    return () => chart.remove();
  }, [data]);

  return <div ref={chartContainerRef} className="w-full h-full" />;
}

4. Color Palettes

Bloomberg-Inspired Dark Terminal

Extracted from Bloomberg Terminal, the feremabraz clone, and financial UI best practices.

Background:
  --bg-primary:       #000000    // Pure black (Bloomberg base)
  --bg-secondary:     #0a0a0a    // Near-black for panels
  --bg-tertiary:      #111111    // Card backgrounds
  --bg-elevated:      #1a1a1a    // Elevated surfaces, modals
  --bg-hover:         #1f1f23    // Hover states

Borders:
  --border-default:   #27272a    // zinc-800
  --border-subtle:    #1a1a2e    // Grid lines
  --border-focus:     #3b82f6    // Focus rings

Text:
  --text-primary:     #fafafa    // zinc-50
  --text-secondary:   #a1a1aa    // zinc-400
  --text-tertiary:    #71717a    // zinc-500
  --text-muted:       #52525b    // zinc-600

Bloomberg Signature Colors:
  --bloomberg-orange:  #FFA028   // Primary accent (Bloomberg brand)
  --bloomberg-blue:    #2800D7   // Secondary accent
  --bloomberg-cyan:    #4AF6C3   // Highlights

Trading Semantics:
  --price-up:         #10b981    // emerald-500
  --price-up-bg:      rgba(16, 185, 129, 0.1)
  --price-down:       #ef4444    // red-500
  --price-down-bg:    rgba(239, 68, 68, 0.1)
  --price-unchanged:  #a1a1aa    // zinc-400

Status:
  --status-live:      #10b981    // Green pulse
  --status-stale:     #f59e0b    // Amber warning
  --status-error:     #ef4444    // Red error
  --status-offline:   #6b7280    // Gray offline

Chart Colors (series):
  --chart-1:          #3b82f6    // blue-500
  --chart-2:          #8b5cf6    // violet-500
  --chart-3:          #06b6d4    // cyan-500
  --chart-4:          #f59e0b    // amber-500
  --chart-5:          #ec4899    // pink-500
  --chart-6:          #14b8a6    // teal-500

Tailwind Config Extension

// tailwind.config.ts
{
  theme: {
    extend: {
      colors: {
        terminal: {
          bg: '#000000',
          surface: '#0a0a0a',
          card: '#111111',
          elevated: '#1a1a1a',
          border: '#27272a',
          grid: '#1a1a2e',
        },
        bloomberg: {
          orange: '#FFA028',
          blue: '#2800D7',
          cyan: '#4AF6C3',
        },
        price: {
          up: '#10b981',
          down: '#ef4444',
          'up-bg': 'rgba(16, 185, 129, 0.1)',
          'down-bg': 'rgba(239, 68, 68, 0.1)',
        },
      },
    },
  },
}

5. Typography

Font Stack

/* Primary UI font */
--font-sans: 'Inter', 'Inter Variable', system-ui, -apple-system, sans-serif;

/* Monospace for prices, data, terminal */
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

/* Display/headings (optional) */
--font-display: 'Inter Display', 'Inter', system-ui, sans-serif;

Why These Fonts

Inter (sans-serif): - Best screen legibility at all sizes - Variable font with weight axis 100-900 - Tabular numbers feature (font-variant-numeric: tabular-nums) -- critical for financial data alignment - Free, open source (SIL Open Font License) - Used by Vercel, Linear, and most modern fintech apps

JetBrains Mono (monospace): - Best free monospace with ligatures - All weights + italics - Excellent hinting for sharp rendering - Pairs perfectly with Inter - Free (SIL Open Font License)

IBM Plex Mono (alternative monospace): - Industrial, professional aesthetic - Part of IBM's corporate type family - Good for Bloomberg-style terminal vibes

Type Scale for Trading Terminal

Instrument Header:    Inter Display 600   20px / 28px
Section Header:       Inter 600           16px / 24px
Price (large):        JetBrains Mono 700  32px / 40px  tabular-nums
Price (medium):       JetBrains Mono 600  20px / 28px  tabular-nums
Price (table):        JetBrains Mono 400  14px / 20px  tabular-nums
Body:                 Inter 400           14px / 20px
Label:                Inter 500           12px / 16px  tracking-wide uppercase
Caption:              Inter 400           12px / 16px
Terminal Input:       JetBrains Mono 400  14px / 20px

Critical CSS Properties for Financial Data

/* ALWAYS use tabular numbers for price columns */
.price, .amount, .quantity, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  text-align: right;
}

/* Monospace for all financial data */
.data-cell {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* Prevent layout shift on number changes */
.price-cell {
  font-variant-numeric: tabular-nums;
  min-width: max-content;
}

6. Layout Architecture

Bloomberg-Style Multi-Panel Layout

+------------------------------------------------------------------+
|  [Logo]  [Command Palette: Cmd+K]  [Market Status]  [User Menu]  |
+----------+-----------------------------------+-------------------+
|          |                                   |                   |
| Watchlist|         Main Chart                | Order Entry       |
| & Market |     (Candlestick / Depth)         |                   |
| Scanner  |                                   | - Buy/Sell toggle  |
|          |                                   | - Price input      |
|          |                                   | - Quantity input    |
|          +-----------------------------------+ - Order type       |
|          |                                   | - Preview          |
|          |    Trade Blotter / Positions       | - Execute button   |
|          |    (Data Grid with real-time)      |                   |
|          |                                   +-------------------+
|          |                                   | News / Alerts     |
+----------+-----------------------------------+-------------------+
|  [Ticker Marquee: scrolling prices across bottom]                |
+------------------------------------------------------------------+

Panel Behavior Rules

  1. All panels resizable via drag handles
  2. Minimum sizes enforced per panel (prevent crushing)
  3. Panel state persisted to localStorage
  4. Double-click resize handle to reset to default
  5. Cmd+1/2/3 keyboard shortcuts to focus panels
  6. Panel collapse/expand with smooth animation

Key UI Principles from the Best Trading Platforms

  1. Information density over whitespace -- Every pixel earns its place. No decorative padding.
  2. Tabular nums everywhere -- Numbers must align in columns. No proportional fonts for data.
  3. Flash on change -- Green flash for up, red for down, fade back to neutral. 300ms duration.
  4. Stale data indication -- Grey out or dim any data older than the refresh interval.
  5. Keyboard-first -- Every action reachable via keyboard. Command palette for everything.
  6. Color is semantic -- Green = up/buy/positive. Red = down/sell/negative. Orange = warning. No decorative color.
  7. Monospace for money -- All financial figures in monospace. All of them. No exceptions.
  8. Progressive disclosure -- Show summary by default, expand for detail on click/hover.
  9. Zero latency feel -- Optimistic updates. Skeleton loading. Never show a spinner for < 200ms.
  10. Sound cues -- Optional subtle audio on trade execution, price alerts, errors.

Summary: The Stack

Framework:        Next.js 15 + React 19 + TypeScript
Styling:          Tailwind CSS + tailwindcss-animate
Components:       shadcn/ui (built on Radix UI)
Charts:           lightweight-charts (financial), recharts (dashboard)
Data Grid:        @tanstack/react-table + react-virtuoso
Animations:       motion (framer-motion successor) + @number-flow/react
Layout:           react-resizable-panels
Command Palette:  shadcn Command (wraps cmdk)
Toasts:           sonner
Fonts:            Inter + JetBrains Mono
Icons:            lucide-react
State:            zustand (or jotai for atomic)
Real-time:        WebSocket + RxJS (or native EventSource for SSE)

All MIT-licensed except: OpenBB (AGPL, study only), AG Grid Enterprise (commercial, optional).