machines-ui
Components
79 components. Each page lists its props, snippets and an example you can copy.
Generated from the component sources by the library’s sveld pipeline. It tracks the repository, so it can include components newer than the published version.
Frame
ButtonMachine A button drawn as a dashed frame with the label set in a block of the current accent. The label turns black or white to stay readable on whatever the accent is. Pass `href` and it renders a link.ButtonMachineOutline The quiet cousin of `ButtonMachine`: the same dashed frame with no block behind the label. On hover the frame and the label take the current accent. Pass `href` and it renders a link.Frame The dashed character frame every graph sits inside: a caption on the top edge, corner glyphs, and optional marching-ant, pulse, scan, or hover-draw motion.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.GraphTick One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered.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.
Graphs
GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.GraphBars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.GraphBullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the value shown at the right.GraphCalendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through, with an optional accented column.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 for what trails it.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 and an optional less/more legend.GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart. Each column is stacked: the p50 fill (█) at the bottom, then p50→p95 (▓), then p95→p99 (▒). Spike markers appear above columns whose point sets `spike: true`.GraphMeter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.GraphPlot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale on the left and optional end labels on the x axis.GraphQuota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection. Billing-style: surfaces the headline figure, the "X of Y" copy, and pace so a customer can see whether they will run out.GraphRank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the formatted value on the right.GraphSlo Error-budget burn bar. One fill for spent, a dim trail for the remaining budget, plus window, burn rate, time-to-empty, target, and actual. Pairs with GraphLatency, GraphUptime, and GraphPulse.GraphSlope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with rising rows accented.GraphSpark Packed 1ch sparkline, centered with a small gap. Never stretched.GraphSpec A labeled specification list with optional accent styling on individual values.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 an optional accent, and a single root is drawn without branches.GraphUptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.GraphWaffle Share grid of ~100 cells; filled cells carry the accent.GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.
Animated
GraphAgni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed, and cooling.GraphAum An Aum (ॐ) figure drawn in terminal glyphs, inked in stroke by stroke and then rippled by a resonance wave that travels the stroke order before settling.GraphBoot An animated boot/deploy run in ASCII: each step fills a progress bar, shows its ETA, and lands on a ✓ or ✗, with a summary row that totals the whole run.GraphCron A live, character-based preview of a cron schedule, showing matching minute and calendar positions.GraphDamru A damru (hourglass drum) drawn in ASCII, pulsing in place through the eight beats of Adi tala.GraphDeps A dependency tree drawn with ASCII branch lines, cascading package by package and showing each name with its version tag.GraphDiya A row of diyas that light one by one and then breathe, drawn as character-art candle flames over a dark gutter; purely decorative.GraphFire A looping character-art fire animation with adjustable dimensions, cooling, and speed.GraphFlame A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.GraphFlowPlayer Plays through an ordered list of process steps, typing on the active step's label and revealing its detail while the finished steps stay marked.GraphGanga Three stepped river lines cascading down the frame while a lit diya rides the bottom flow; purely decorative.GraphHash A character-art hashing animation that transforms an input string into a changing digest.GraphJapa A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.GraphLife Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.GraphMandala A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.GraphMandel ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.GraphPulse A live health strip: a window of blips — ok, degraded, or down — appended at a fixed interval, newest on the right, like a heartbeat of a service.GraphRain A looping character-art rain animation with adjustable trails and dimensions.GraphScatter An ASCII scatter plot: x/y points mapped onto a grid, with optional accent points and a linear-trend strip.GraphScope An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area filled down to the baseline.GraphSequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request messages flowing between them in order and activations marking who is busy.GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing transition highlighted.GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting time since the last one.GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely decorative.GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them, and a step-through that walks a path and lights each node as active or done.ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and scroll, hover or loop triggers.TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active again.
Diagram
AmplifierDiagram An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a metaphor for what AI does to your effort, with a live dB readout.AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of titles, arrows, and corners.DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.MetricsTableDiagram An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the bottom.NestedRadiiDiagram An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values be dragged.PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and connector as the cycle advances.
Flow
FlowNode A flow node in two looks: `frame`, our dashed character frame, and `card`, the rounded tinted card of the flow editor. Both take the shared props and show every value; the frame also takes its own dash, movement and corner props, which a card cannot be given. A header, a body, connection ports on any side, and a status with its own colour. It needs no canvas, so it works on any page; a canvas can place it and link it to others.FlowCanvas The node canvas on its own: pan and zoom, drag to connect nodes, an actions panel to add steps, an inspector for the selected node, undo and redo. Takes no props; state lives in the exported `flow` store. Needs a container with an explicit height.