caliper uidocs
DemoSign inGet Pro

Market terminal

Pro

A trading view with price chart, order book and trade ticket.

Installs components/ui/market-terminal.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/market-terminal

ETHEther

$2,491.84

+0.48% over the period

2,524.992,414.71

ETH price
TimeOpenHighLowCloseVolume
Day 124802481.332457.882471.62401
Day 22471.622476.542465.552468.671462
Day 32468.672470.052442.142454.471481
Day 42454.472460.792451.532452.41252
Day 52452.42458.682437.192438.191151
Day 62438.192457.512432.142449.011471
Day 72449.012452.392428.862434.151019
Day 82434.152454.512425.312444.86902
Day 92444.862456.542420.972428.921516
Day 102428.922436.912422.672423.551460
Day 112423.552438.432414.712437.151390
Day 122437.152441.532427.792439.34531
Day 132439.342468.772427.172458.911477
Day 142458.912465.682452.472454.9778
Day 152454.92462.782430.372441.42751
Day 162441.422473.682439.412461.391424
Day 172461.392464.182447.232458.781438
Day 182458.782461.162436.42448.341014
Day 192448.342453.522436.372449.49420
Day 202449.492463.322423.722437.24845
Day 212437.242450.562429.612447.61501
Day 222447.612451.942447.192450.64676
Day 232450.642466.672443.652457.12752
Day 242457.122468.262429.272440.291111
Day 252440.292455.592437.242449.4739
Day 262449.42470.252445.382464.37660
Day 272464.372469.562452.092469.49611
Day 282469.492481.312441.72453.22670
Day 292453.222463.592440.42456.94676
Day 302456.942462.912447.532461.71334
Day 312461.72467.642444.782450.88446
Day 322450.882464.532434.322443.52774
Day 332443.522455.142437.472443.27758
Day 342443.272457.692436.112445.7803
Day 352445.72446.782425.622435.84568
Day 362435.8424542434.982448.551354
Day 372448.552458.992448.552458.64427
Day 382458.642464.012442.062445.171592
Day 392445.172461.742441.922459.89623
Day 402459.892490.072448.652480.1495
Day 412480.12489.142466.882470.881202
Day 422470.882484.812469.132480.9515
Day 432480.92511.632478.842499.671468
Day 442499.672515.182493.272514.431111
Day 452514.432524.992514.152519.371348
Day 462519.372521.722499.932503.511356
Day 472503.512512.82495.542498.671044
Day 482498.672499.662488.72491.84822
ETH order book
Spread 1.00Mid 2491.84

ETH order book
SidePriceSizeCumulative
Ask2496.842.625.500000000000004
Ask2495.943.722.900000000000002
Ask2495.044.80000000000000119.200000000000003
Ask2494.145.914.4
Ask2493.2478.5
Ask2492.341.51.5
Bid2491.3422
Bid2490.444.66.6
Bid2489.547.213.8
Bid2488.643.317.1
Bid2487.745.923
Bid2486.84225

Recent trades

  • 2,491.240.2sell
  • 2,491.840.55buy
  • 2,492.440.9buy
  • 2,491.241.25sell
  • 2,491.840.2buy
  • 2,492.440.55buy
  • 2,491.240.9sell
  • 2,491.841.25buy

Trade ETH

Market price
$2,491.84
Cost
$0.00

No orders yet. Nothing here touches real money.

When to use #

Use it for

  • Showing a market with live price and an order entry.

Skip it when

  • Orders can have real money impact without confirmation.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/market-terminal

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from MarketTerminal, CandleChart and TradeTicket.

example.tsx
import { MarketTerminal, CandleChart, TradeTicket } from "@/components/ui/market-terminal"

The worked example comes with Pro

The 25-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

MarketTerminal

component
PropTypeDefault
symbol *string—
name *string—
candles *readonly Candle[]—
bids *readonly BookLevel[]—
asks *readonly BookLevel[]—
trades *readonly Trade[]—
balance *number—
onOrder *(o: OrderRequest) => Promise<string | void>—
classNamestring—

CandleChart

component
PropTypeDefault
label *string—
candles *readonly Candle[]—
classNamestring—

TradeTicket

component
PropTypeDefault
symbol *string—
last *number—
balance *number—
onOrder *(o: OrderRequest) => Promise<string | void>—
classNamestring—

Accessibility #

It exposes group, status and alert semantics, with aria-label and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.