machines-ui
graphs

Stat

A row of two to four large figures with labels, each optionally hinted and accented.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphStat } from '@fractaldesign/machines-ui';

Preview

[ THIS WEEK ]

  • 12,400

    docs

  • 4,100

    copies

  • 860

    shipped

<GraphStat
  title="THIS WEEK"
  items={[
    { value: '12,400', label: 'docs' },
    { value: '4,100', label: 'copies' },
    { value: '860', label: 'shipped', accent: true }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
items* StatItem[] —Figures to show left to right; only the first four are laid out.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
StatIteminterfaceLarge figures with labels. Two to four numbers, no trend.

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphStat.svelte

machines-ui