caliper uidocs
DemoSign inGet Pro

Realtime stream

Pro

A live feed of events arriving, with rate and recent history.

Installs components/ui/realtime-stream.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/realtime-stream
API latency p95Live130 ms
limit 230 ms

API latency p95
TimeValue
5s157.9541643231187
5.5s151.44982976156996
6s144.233600241796
6.5s136.75414596409675
7s129.4765031693114
7.5s122.85316043772968
8s117.29592514076215
8.5s113.1503192531425
9s110.67409647004709
9.5s110.02121633073867
10s111.23227176010585
10.5s114.23196519720224
11s118.83379023288825
11.5s124.75162767502225
12s131.61753505403223
12.5s139.0046235035733
13s146.45359964263446
13.5s153.50132221341852
14s159.70959796156367
14.5s164.69242637034517
15s168.13999930324218
15.5s169.8379633733353
16s169.68074739870144
16.5s167.6781263071802
17s163.95461337870472
17.5s158.7417186126258
18s152.3635545572527
18.5s145.21668456141302
19s137.74546638614572
19.5s130.4144241913318

When to use #

Use it for

  • Watching incoming events, requests or trades as they happen.
  • The user needs to see bursts and quiet periods.

Skip it when

  • Data refreshes only now and then; a static chart is calmer.
  • The numbers must be read exactly.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/realtime-stream

Adds its 4 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.

example.tsx
import { RealtimeStream } from "@/components/ui/realtime-stream"

The worked example comes with Pro

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

Checking your licence…

API reference #

RealtimeStream

component
PropTypeDefaultDescription
label *string—
points *readonly StreamPoint[]—Oldest first, `t` in seconds.
windowSecondsnumber60
unitstring""
thresholdnumber—
domainreadonly [number, number]—Fixed vertical range. Default fits the data.
formatValue((value: number) => string)numberText
loadingboolean—
errorstring—
classNamestring—

Accessibility #

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

No custom key handling; Tab and the native activation keys do the work.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.