UI

Order book components for React

An exchange screen starts at the book. This page has the order book itself, with bids, asks and depth bars that show the size stacked up to each level, and the parts that sit around it: the depth chart, the tape of prints, order flow and the tickets that place an order. Each one is free, MIT licensed and lands in your repo as source through the shadcn CLI.

10 components. Install any of them with npx shadcn@latest add @ssych/<name>

  • BTC-USD
    PriceSizeTotal
    67,412.5
    Spread 1.0, 0.15 bps

    Order Book

    A crypto exchange order book with bids, asks and depth bars, reading the cumulative size and value up to any price level.

  • BTC-USD

    67,412.5

    Spread 1.0

    20406066,738.467,075.467,412.5 Mid67,749.668,086.6

    Depth Chart

    A market depth chart for crypto exchanges showing bid and ask liquidity around the mid price, with a readout of size on each side.

  • AAPL
    TimePriceSize
    14:30:24227.97290
    14:30:23227.9915
    14:30:20228.0295
    14:30:18228.0426
    14:30:17228.0950
    14:30:14228.092,275block
    14:30:12228.073,610block
    14:30:11228.02240
    14:30:08228.01163
    14:30:06228.0749
    14:30:05228.0813
    14:30:02228.03101

    Trade Tape

    A live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.

  • Order flowBTC-USD

    $64,309.04

    +4.3309:30:18

    Order Flow

    An order flow chart of the last 48 trades as bars sized by volume and coloured by side, for crypto and futures trading terminals.

  • $2,940$2,980$3,060$3,100$3,130 VAH$3,010 VAL$3,080 POC

    Volume Profile

    A volume profile chart of traded volume by price with the point of control and value area, for futures and crypto traders.

  • BTC-USD
    Free 25,000.00 USD
    You pay16,866.85 USD

    Order Ticket

    A buy and sell order form for limit and market orders where price, amount and total stay in sync, for crypto exchanges and broker apps.

  • NVDALast $121.44

    Quick Ticket

    A watchlist row that expands into a quick order ticket for market and limit orders, for broker and stock trading apps.

  • BTC-PERPEntry 67,412.50
    Margin
    USDC
    Leverage10×
    Position size5,000.00 USDC
    Liquidation price−9.50%61,008.31

    Leverage Ticket

    A perpetual futures order ticket with margin, long or short and a leverage slider that updates position size, fees and the liquidation price.

  • Order value$4,463.00

    Execution Controls

    A hold to confirm order button for trading apps that shows the order as working, filled or rejected, with a timed undo.

  • Fills Blotter

    A live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.

Questions

Does the order book connect to an exchange?
No. It runs a demo feed out of the box and takes bids and asks as props, so you feed it from your own WebSocket or REST endpoint and switch the demo feed off. There is no exchange SDK inside.
Can I group price levels?
Yes. You pass the market tick and the groupings you want, and the ladder regroups by the step a trader picks.

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