Volume profile

Free

Traded volume by price level, with the value area and last price marked.

Installs components/ui/volume-profile.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/volume-profile.json

Volume by priceBuySell

Volume by price
Price	Buy	Sell	Total
104.00	46	29	75
103.00	69	51	120
102.00	52	28	80
101.00	35	50	85
100.00	58	27	85
99.00	41	49	90
98.00	64	26	90
97.00	47	48	95
96.00	30	25	55

When to use #

Use it for

Showing where trading concentrated.
Next to a price chart.

Skip it when

There is no price dimension.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/volume-profile.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from VolumeProfile and valueArea.

example.tsx

import { VolumeProfile } from "@/components/ui/volume-profile"

const bins = [96, 97, 98, 99, 100, 101, 102, 103, 104].map((price, index) => ({ price, buy: 30 + ((index * 17) % 40), sell: 25 + ((index * 23) % 45) }));

export function PriceVolume() {
  return (
    <div className="w-full max-w-sm">
      <VolumeProfile label="Volume by price" data={bins} current={100.5} />
    </div>
  );
}

API reference #

VolumeProfile

component

PropTypeDefaultDescription

label *string—

data *readonly VolumeBin[]—

currentnumber—Last traded price, marked on the nearest level.

areaSharenumber0.7

formatPrice((price: number) => string)(price) => price.toFixed(2)

formatVolume((volume: number) => string)numberText

loadingboolean—

errorstring—

classNamestring—

valueArea

component

No props of its own; it accepts the native props of its root element.

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.