fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Graphs

GraphInvoice

A compact invoice with billing parties, metadata, line items, totals, and an optional note.

All components Source

Install

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

Usage

Example 
<script lang="ts">
	import { GraphInvoice, type InvoiceItem } from '@fractaldesign/machines-ui';

	const items: InvoiceItem[] = [
	  { description: 'Design system', qty: '1', rate: '4,200', amount: '4,200' },
	  { description: 'Motion pass', qty: '1', rate: '1,800', amount: '1,800' },
	  { description: 'Docs rewrite', qty: '8h', rate: '180', amount: '1,440' }
	];
</script>

<GraphInvoice
  title="INVOICE 0041"
  from={{ name: 'machines-ui', lines: ['hello@example.com'] }}
  to={{ name: 'Acme Studio', lines: ['14 Market Street', 'San Francisco, CA'] }}
  meta={[
    { label: 'No.', value: '0041' },
    { label: 'Issued', value: 'Mar 12, 2026' },
    { label: 'Due', value: 'Apr 11, 2026' }
  ]}
  {items}
  totals={[
    { label: 'Subtotal', value: '7,440' },
    { label: 'Tax', value: '0' },
    { label: 'Amount due', value: '7,440', accent: true }
  ]}
  note="Net 30. Wire to the account on file."
/>

Props

NameTypeDefault
title string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.—
from InvoiceParty Optional sender party, with a name and lines of contact or address text.—
to InvoiceParty Optional billed party, with a name and lines of address text.—
meta InvoiceMeta[] Optional labeled invoice details such as number and dates.—
items InvoiceItem[] Line items in display order, with description, optional quantity and rate, and amount.—
totals InvoiceTotal[] Optional labeled totals shown beneath the line items.—
note string Optional note displayed at the end of the invoice.—
corner string Character drawn at each corner of the frame.—
class string ''

Related components

GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart.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…GraphQuota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection.GraphRank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the…