fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Frame

GraphTrack

Horizontal track that spans the frame. Use for graphs that represent a range (meter, stack, bullet, rank) — pair with GraphTick so ticks flex edge to edge. Packed graphs (spark, bars, cells, uptime) should not use tracks.

All components Source

Install

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

Usage

Example 
<GraphTrack>
  <GraphTick>█</GraphTick>
  <GraphTick>█</GraphTick>
  <GraphTick>░</GraphTick>
  <GraphTick>░</GraphTick>
</GraphTrack>

Props

NameTypeDefault
class string ''
children Snippet Content rendered inside the component.—

Snippets

NameTypeDefault
default unknown —

Related components

ButtonMachine A button drawn as a dashed frame with the label set in a block of the current accent.ButtonMachineOutline The quiet cousin of `ButtonMachine`: the same dashed frame with no block behind the label.Frame The dashed character frame every graph sits inside: a caption on the top edge, corner glyphs, and optional…FrameBody The content region inside a graph frame, with optional compact spacing for dense layouts.FrameRule A horizontal dashed rule that spans the frame, for separating sections inside a FrameBody.GraphArrow Dashed arrow between flow nodes. `stretch` spans the available row.