machines-ui
graphs

Timeline

A vertical timeline of dated events, each marked as done, now or next and linked by a rail.

Install

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

Preview

[ SHIPPED ]
  1. Mar 12 npm publish
  2. Mar 18 docs, live previews
  3. Apr 02 1.0
<GraphTimeline
  title="SHIPPED"
  events={[
    { date: 'Mar 12', label: 'npm publish' },
    { date: 'Mar 18', label: 'docs, live previews', state: 'now' },
    { date: 'Apr 02', label: '1.0', state: 'next' }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
events* TimelineEvent[] —Events in display order, oldest first.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
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
TimelineStatetypeProgress state of a timeline event.
'done' | 'now' | 'next'
TimelineEventinterface

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphTimeline.svelte

machines-ui