Svelte 5 component · machines-ui · Frame
GraphArrow
Dashed arrow between flow nodes. `stretch` spans the available row.
Install
GraphArrow is a Svelte 5 ASCII arrow component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphArrow } from '@fractaldesign/machines-ui';Usage
<GraphArrow />Props
| Name | Type | Default |
|---|---|---|
accent | boolean Draw the arrow in the theme accent colour instead of the border colour. | false |
stretch | boolean Span the available row with a flexing dashed line instead of a fixed `- - -`. | false |
class | string | '' |
Related components
GraphTick One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered.GraphTrack Horizontal track that spans the frame.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.