Svelte 5 component · machines-ui · Graphs

GraphCompare

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

All components Source

Install

GraphCompare is a Svelte 5 ASCII compare chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import

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

Usage

Example

<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

Name	Type	Default
`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` 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`	`''`

GraphCountdown Time left until a date.GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…GraphFunnel A proportional funnel showing labeled stages, values, and their relative widths.GraphGantt A character-based timeline that positions task bars across a shared track and can show progress.GraphHeatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels…

Install

Import

Usage

Props

Related components