PlumUI

Timeline

A vertical sequence of events. The line draws itself as you scroll and each step slides in when it enters the viewport.

Data Display

  1. Repository connected

    acme/web linked to the production environment.

  2. Build completed

    38s · 412 kB of JavaScript · cache hit on 92% of modules.

  3. Checks passed

    Lighthouse 98, end-to-end suite green across 3 browsers.

  4. Promoting to production

    Routing traffic gradually: 25% of requests are on the new version.

  5. Old deployment retired

    Kept warm for 24 hours for instant rollback.

Playground

Tweak the props, the preview and the code follow.

  1. Ticket opened

    Updated by the on-call engineer.

  2. Triaged

    Updated by the on-call engineer.

  3. Fix in review

    Updated by the on-call engineer.

  4. Deployed

    Updated by the on-call engineer.

  5. Customer notified

    Updated by the on-call engineer.

Props
2
<Timeline>
  <TimelineItem status="done">
    <TimelineIndicator />
    <TimelineContent>
      <TimelineHeader>
        <TimelineTitle>Ticket opened</TimelineTitle>
        <TimelineTime>09:00</TimelineTime>
      </TimelineHeader>
      <TimelineDescription>Updated by the on-call engineer.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem status="current">…</TimelineItem>
  <TimelineItem status="upcoming">…</TimelineItem>
</Timeline>

Installation

npx @plumsydev/plum-ui add timeline

Usage

import {
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "@/components/ui/timeline"
<Timeline>
  <TimelineItem status="done">
    <TimelineIndicator />
    <TimelineContent>
      <TimelineHeader>
        <TimelineTitle>Build completed</TimelineTitle>
        <TimelineTime>09:14</TimelineTime>
      </TimelineHeader>
      <TimelineDescription>38s · 412 kB</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Live status

Change status on the fly: indicators morph between done, current and upcoming.

  1. Order placed

    Payment confirmed for order #20481.

  2. Packed

    Your items left the shelf and were boxed.

  3. At the hub

    Sorted at the Lyon distribution center.

  4. Out for delivery

    With the courier, expected before 13:00.

  5. Delivered

    Left at the front desk, signed by A. Roux.

Changelog

Compose freely with badges and metadata.

  1. Edge config

    Feature

    Read configuration from the edge with zero cold starts.

  2. Faster cold builds

    Fix

    Dependency installs are cached across branches.

  3. Instant rollbacks

    Feature

    Promote a previous deployment without rebuilding.

  4. Token scoping

    Security

    API tokens can now be limited to a single project.

API Reference

Timeline

PropTypeDefault
animated

Draw the line on scroll and reveal items in view.

booleantrue

TimelineItem

PropTypeDefault
status

Drives the indicator and title styles.

"done" | "current" | "upcoming""done"

TimelineIndicator

Defaults to a check, a pulsing dot or a hollow dot. Pass an icon as children to override.

PreviousTiltNextToast