Data display

Timeline

Compound component: `Timeline` and `Timeline.Item`.

Server safeSource

Import

import { Timeline } from '@the_viveksingh/vivek-ui'

Vertical timeline

An ordered list, because the order is the meaning. status drives the marker and adds a visually hidden label, so "current" is not conveyed by colour alone.

  1. 2 days ago

    Pull request opened

    Completed

    feat: forms milestone, 9 components and useControllableState.

  2. Yesterday

    Review requested

    Completed

    Two approvals needed before merge.

  3. Just now

    Checks running

    In progress

    typecheck, lint, test, build, size-limit.

  4. Pending

    Merge to main

    Not started
<Timeline>
  <Timeline.Item
    title="Pull request opened"
    description="feat: forms milestone."
    timestamp="2 days ago"
    status="complete"
  />
  <Timeline.Item title="Checks running" timestamp="Just now" status="current" />
  <Timeline.Item title="Merge to main" timestamp="Pending" status="pending" />
</Timeline>

Horizontal

For a short, fixed set of stages - an order tracker rather than a history.

  1. Mon

    Ordered

    Completed
  2. Tue

    Packed

    Completed
  3. Wed

    Shipped

    In progress
  4. Fri

    Delivered

    Not started
<Timeline orientation="horizontal">
  <Timeline.Item title="Ordered" status="complete" timestamp="Mon" />
  <Timeline.Item title="Shipped" status="current" timestamp="Wed" />
  <Timeline.Item title="Delivered" status="pending" timestamp="Fri" />
</Timeline>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Timeline
PropTypeDefaultDescription
orientationTimelineOrientation——
alignTimelineAlign—`start` (default) keeps every entry on one side of the rail. `alternate` zig-zags them, and falls back to `start` on a container too narrow to hold two columns — so it is safe to set unconditionally.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Timeline carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.