Slope ChartProv1.0.0
Before and after for a handful of things, one line each on one shared scale, so the steepness is the change. Both ends carry their values and a rank move sits beside the after value when the order changes.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-slope-chartNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Rank moves
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { SlopeChart } from "@/components/ui/lumen/charts/slope-chart";
const channels = [
{ channel: "search", q2: 420, q3: 380 },
{ channel: "social", q2: 260, q3: 410 },
{ channel: "partners", q2: 190, q3: 240 },
{ channel: "email", q2: 310, q3: 290 },
];
const config = {
search: { label: "Search", color: "var(--chart-1)" },
social: { label: "Social", color: "var(--chart-2)" },
partners: { label: "Partners", color: "var(--chart-3)" },
email: { label: "Email", color: "var(--chart-4)" },
};
export function SignupsByChannel() {
return <SlopeChart data={channels} name="channel" from="q2" to="q3" fromLabel="Q2" toLabel="Q3" config={config} label="Sign-ups by channel, Q2 to Q3" />;
}Props
data / name / from / to–Row[] / field / field / fieldOne row per line: its name, the before value and the after value.
fromLabel / toLabel–string / stringThe two column headings. Default: the field names.
config–ChartConfigColour and label per line name. Unlisted lines take the series colours in order.
rankstruebooleanShow rank moves (▲2, ▼1) beside the after values.
valueFormat–StatFormat | (n) => stringNumbers at both ends, in the table and summary.
active / onActiveChange / onSelect–string | null / (name) => void / (name) => voidThe focused line, controlled; and a line was clicked or Enter pressed.
Show all 9 propsShow fewer
height320numberPlot height in px.
motion"full""full" | "subtle" | "off"Lines draw from before to after in turn; reduced motion always wins.
loading / error / emptyText / label–boolean / string / string / stringStates in words with the height held, and the chart's accessible name.
Source
components/ui/lumen/charts/slope-chart.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
