machines-ui
graphs

Slope

A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with rising rows accented.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphSlope } from '@fractaldesign/machines-ui';

Preview

[ TRAFFIC ]
2025 2026
  • docs 8,200 12,400
  • copy 5,100 4,100
  • ship 640 860
<GraphSlope
  title="TRAFFIC"
  palette="duo"
  fromLabel="2025"
  toLabel="2026"
  items={[
    { label: 'docs', from: 8200, to: 12400 },
    { label: 'copy', from: 5100, to: 4100 },
    { label: 'ship', from: 640, to: 860 }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
fromLabel* string —Heading over the from-number column.
toLabel* string —Heading over the to-number column.
items* SlopeItem[] —Rows to compare, each with a label and its from/to values.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
SlopeIteminterfaceOne before → after row.

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --graph-accent-3
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphSlope.svelte

machines-ui