Skip to content

Slope

GraphSlope

Two figures per row with an arrow between. Up uses the accent, down recedes.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-slope.json

Traffic

Up uses the accent. Down uses the second hue.

[ TRAFFIC ]
20252026
  • docs8,20012,400
  • copy5,1004,100
  • ship640860

Latency

Decimals stay tabular. Flat rows use a dash.

[ P95 ]
beforeafter
  • read160142
  • write388410
  • cache1212

Props

PropTypeDefaultDescription
titlestringCaption drawn on the top edge of the frame.
fromLabelstringHeader over the first column.
toLabelstringHeader over the second column.
itemsSlopeItem[]label, from, and to.
palette"mono" | "duo" | "multi""mono"mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents.
cornerstring"+"Character at each corner of the frame.
classNamestringPassed to the outer frame.