fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Graphs

GraphSpec

A labeled specification list with optional accent styling on individual values.

All components Source

Install

GraphSpec is a Svelte 5 ASCII spec 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 { GraphSpec } from '@fractaldesign/machines-ui';

Usage

Example 
<GraphSpec
  title="TYPE"
  rows={[
    { label: 'Family', value: 'Geist Mono' },
    { label: 'Size', value: '14 / 21' },
    { label: 'Tracking', value: '+0.02em' },
    { label: 'Figures', value: 'tabular' },
    { label: 'Accent', value: '--graph-accent', accent: true },
    { label: 'Duo', value: '--graph-accent-2' },
    { label: 'Tri', value: '--graph-accent-3' }
  ]}
/>

Props

NameTypeDefault
title string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.—
rows SpecRow[] Labeled values in display order, with an optional accent flag for each value.—
corner string Character drawn at each corner of the frame.—
class string ''

Related components

GraphStack One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.GraphStat A row of two to four large figures with labels, each optionally hinted and accented.GraphTable A framed data table with a rule under the header and an optional footer row for totals.GraphTimeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.GraphTimer A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.GraphTree An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and…