machines-ui
graphs

Compare

A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through, with an optional accented column.

Install

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

Preview

[ PLANS ]
SoloStudio
  • Registry ✓✓
  • Accent picker ✓✓
  • Private source –✓
  • Price $0$24
4 features compared across 2 columns
<GraphCompare
  title="PLANS"
  columns={['Solo', 'Studio']}
  accent="Studio"
  rows={[
    { label: 'Registry', values: [true, true] },
    { label: 'Accent picker', values: [true, true] },
    { label: 'Private source', values: [false, true] },
    { label: 'Price', values: ['$0', '$24'] }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
columns* string[] —Column headers, left to right, one per value in each row.
rows* CompareRow[] —Feature rows, each a label and one value per column.
accent string —Column header to emphasise; other columns dim around it.
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
CompareCelltype
string | boolean
CompareRowinterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphCompare.svelte

machines-ui