Timeline

Usage

Rollout audit

Checkout redesign

Feature flag created
Owner assigned
Created checkout-redesign for the billing workspace.
09:12
Canary rollout started
Canary
Enabled for 5% of workspaces with session replay sampling on.
09:34
Regional guardrail tripped
Paused
Latency climbed in eu-central-1; rollout is holding while routing warms.
09:51
Customer messaging prepared
Docs
Support macro and changelog draft are ready in Launch notes.
10:05
Launch window scheduled
Queued
Full rollout waits for the next error-budget sweep.
10:30
Release checklist verified
Ready
Rollback owner and dashboard checks are recorded in the release audit.
10:42

"use client";

import { Timeline, type TimelineStatus } from "@thenamespace/uikit";
import { Chip } from "@thenamespace/uikit/chip";
import {

Timeline is for read-only chronology: activity feeds, audit trails, incident history, release logs, and milestone roadmaps. Use Stepper when the user is moving through a known sequence where current, complete, and upcoming steps are the primary meaning.

Anatomy

Import the Timeline component and access all parts using dot notation.

import { Timeline } from "@thenamespace/uikit";

<Timeline>
  <Timeline.Item>
    <Timeline.Rail>
      <Timeline.Marker />
      <Timeline.Connector />
    </Timeline.Rail>
    <Timeline.Content>
      <article>
        <h3>Event title</h3>
        <time dateTime="2026-05-22">May 22, 2026</time>
        <p>Event details</p>
      </article>
    </Timeline.Content>
  </Timeline.Item>
</Timeline>;

Timeline intentionally owns only the chronology layout. It renders an ol with li items, keeps connectors decorative, hides empty markers from assistive technology, and marks status="current" items with aria-current="true". Use semantic HTML and OSS components such as Card, Chip, and Avatar inside Timeline.Content for the event content itself.

Centered Milestones

2026 expansion

Jan 2026Research
Private beta
Invited design partners to stress-test billing, permissions, and reporting workflows.
24 teams
Mar 2026Billing
Usage-based pricing
Metered plans went live for sandbox workspaces after invoice previews cleared review.
3 plans
May 2026Expansion
Regional launch
Opened the EU data boundary with local support coverage and a launch brief.
2 regions
Aug 2026Marketplace
Partner network
First integrations shipped with shared certification notes and co-marketing assets.
8 partners
Oct 2026Governance
Enterprise controls
Audit logs, SSO handoff, and incident exports were bundled into the admin rollout.
5 controls
Dec 2026Adoption
Scale motion
Customer education, lifecycle emails, and release notes moved into one launch calendar.
12 touchpoints

Jan 2026Research
Private beta
Invited design partners to stress-test billing, permissions, and reporting workflows.
24 teams
BillingMar 2026
Usage-based pricing
Metered plans went live for sandbox workspaces after invoice previews cleared review.
3 plans
May 2026Expansion
Regional launch
Opened the EU data boundary with local support coverage and a launch brief.
2 regions
MarketplaceAug 2026
Partner network
First integrations shipped with shared certification notes and co-marketing assets.
8 partners
Oct 2026Governance
Enterprise controls
Audit logs, SSO handoff, and incident exports were bundled into the admin rollout.
5 controls
AdoptionDec 2026
Scale motion
Customer education, lifecycle emails, and release notes moved into one launch calendar.
12 touchpoints

"use client";

import {
  BadgeCheckIcon,
  CheckmarkCircle02Icon,

Studio Review

Studio review

Runner launch assets

Product asset uploaded
Review
Mina Sol10:18 AM
Final hero crop is ready for retouch review with the side profile, lace detail, and marketplace thumbnail queued.
PDP hero4 cropsOpen board
MS
Lighting pass reviewed
Orin Vale10:27 AM
The side profile reads clearly on the landing page. Keep the outsole shadow soft so the sole texture stays visible.
OV
Copy note resolved
Paz Kim10:43 AM
Updated the launch tile copy and aligned the product badge with the approved campaign language.
PK
Review package ready
Mina Sol11:06 AM
Exported the square crop, PDP detail view, and marketplace thumbnail for final QA.
MS

"use client";

import {
  BadgeCheckIcon,
  CheckmarkCircle02Icon,

Compact Log

Chargeback case opened
Mar 6, 10:34 AM
The customer disputed a renewal charge, and the finance team has seven days to submit evidence.
Payment captured
Mar 6, 10:21 AM
Payment authorized
Mar 6, 10:21 AM
Invoice generated
Mar 6, 10:20 AM

"use client";

import { Timeline, type TimelineStatus } from "@thenamespace/uikit";
import {
  CheckmarkCircle02Icon,

Incident Response

Incident response

Export queue degradation

Update fromNV
Nora Vazquez
On-call
2:28 AM
Confirmed the delay is isolated to scheduled exports. API requests and dashboard reads are healthy while the backlog drains.
worker-trace.har - 42 KBOpen runbook
Escalation acknowledged by KRKaito Reed
2:24 AM
Incident channel joined by MSMira Stone
2:23 AM
Customer update sent to finance-ops
2:21 AM
Mitigation deployed to export-worker-3
2:18 AM
Postmortem reminder scheduled
2:14 AM

"use client";

import {
  Attachment01Icon,
  BadgeCheckIcon,

Version History

v8
Draft
Prepared billing copy, tax preview states, and the final approval checklist.
MMaya Chen-Current
v7
Live
Published the pricing table refresh after support macros cleared review.
NNora Vazquez-May 22, 2026, 11:18 AM
v6
Added regional tax notes and restored the upgrade confirmation banner.
EEli Wong-May 21, 2026, 04:42 PM
v5
Reworked mobile spacing for plan cards and invoice preview rows.
MMaya Chen-May 20, 2026, 09:06 AM
v4
Imported partner terms and archived the legacy enterprise copy block.
NNora Vazquez-May 18, 2026, 02:31 PM
v3
Captured the first internal draft from the launch planning workspace.
EEli Wong-May 16, 2026, 10:14 AM

"use client";

import { Timeline, type TimelineStatus } from "@thenamespace/uikit";
import { Avatar } from "@thenamespace/uikit/avatar";
import { Card } from "@thenamespace/uikit/card";

Repository Activity

May 2026

Committed across 4 product workspaces
Rina Sol
lumenforge/interface126 commits
mistral-bench/checkout32 commits
pixelwell/cli18 commits
signalnest/webhooks7 commits
Merged a pull request in lumenforge/interface
Theo Park
May 19
Tighten keyboard states in reporting grids
Reworked focus rings, empty states, and column resize handles for audit tables.
+18-4- 8 comments
Opened 31 issues across 3 workspaces
Iris Moon
lumenforge/interface16 triaged
pixelwell/cli9 resolved
signalnest/webhooks6 open
16 triaged9 assigned6 open
Reviewed 51 pull requests in 4 workspaces
Mara Voss
May 28
lumenforge/interface24 reviews
mistral-bench/checkout13 reviews
pixelwell/cli9 reviews
signalnest/webhooks5 reviews

"use client";

import {
  AddCircleIcon,
  EyeIcon,

Split Content

Launch review

Billing rollout

09:15Design
Nina Park
Checkout language approved
Invoice copy, empty states, and seat-change messages passed the annotation review.
Screens18
Open notes2
10:40Risk
Omar Lee
Upgrade holds confirmed
Fraud review added a manual hold rule for high-value upgrades during the first rollout window.
Threshold$750
Review SLA4 h
12:05Data
Maya Hart
Metrics dashboard connected
Billing telemetry is flowing into the release dashboard with workspace and plan dimensions.
Events12
Lag42 s
13:30Ops
Priya Shah
Customer messaging staged
Support macros, changelog copy, and escalation routing are scheduled for the release window.
Macros6
Regions3
15:00Launch
Eli Wong
Release checklist signed
The rollback owner, dashboard links, and launch channel are pinned for the final go-live check.
Checks9/9
Window15 min

"use client";

import {
  BadgeCheckIcon,
  CheckmarkCircle02Icon,

API Reference

Timeline

The root component. Renders an ordered list and provides axis, placement, size, density, and item alignment context.

Prop	Type	Default	Description
`axis`	`'start' \| 'center'`	`'start'`	Position of the timeline rail
`placement`	`'start' \| 'end' \| 'alternate'`	`'end'`	Default side for item content; `alternate` alternates by item index
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Marker and text size
`density`	`'compact' \| 'comfortable'`	`'comfortable'`	Vertical rhythm between events
`itemAlign`	`'start' \| 'center'`	`'start'`	Default vertical alignment for item content
`children`	`ReactNode`	-	Timeline items

Also supports all native ol HTML attributes.

Timeline.Item

A single event in the timeline.

Prop	Type	Default	Description
`status`	`'default' \| 'current' \| 'success' \| 'warning' \| 'danger' \| 'muted'`	`'default'`	Marker tone
`align`	`'start' \| 'center'`	inherited	Vertical alignment for item content
`side`	`'start' \| 'end'`	inherited	Content side for centered timelines
`children`	`ReactNode`	-	Item parts

Also supports all native li HTML attributes.

Timeline.Rail

Rail wrapper for the marker and connector. If omitted, Timeline.Item renders a default rail.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Marker and connector content

Also supports all native span HTML attributes.

Timeline.Marker

The event marker. If omitted, Timeline.Rail renders a default marker. Empty markers are decorative and hidden from assistive technology.

Prop	Type	Default	Description
`status`	`'default' \| 'current' \| 'success' \| 'warning' \| 'danger' \| 'muted'`	item status	Marker tone override
`children`	`ReactNode`	-	Custom marker content

Also supports all native span HTML attributes.

Timeline.Connector

Connector line after the current item. It is hidden automatically for the last item.

Prop	Type	Default	Description
`force`	`boolean`	`false`	Force rendering even on the last item

Also supports all native span HTML attributes.

Timeline.Content

Main event content. In centered timelines, side controls which side of the axis it occupies.

Prop	Type	Default	Description
`side`	`'start' \| 'end'`	item side	Content side
`children`	`ReactNode`	-	Content parts

Also supports all native div HTML attributes.

useTimelineItem

Hook to access per-item context from descendants of Timeline.Item.

Property	Type	Description
`align`	`'start' \| 'center'`	Resolved item content alignment
`index`	`number`	Zero-based item index
`isLast`	`boolean`	Whether this is the final timeline item
`side`	`'start' \| 'end'`	Resolved item side
`status`	`'default' \| 'current' \| 'success' \| 'warning' \| 'danger' \| 'muted'`	Item marker status

Timeline

Checkout redesign

Feature flag created

Canary rollout started

Regional guardrail tripped

Customer messaging prepared

Launch window scheduled

Release checklist verified

Private beta

Usage-based pricing

Regional launch

Partner network

Enterprise controls

Scale motion

Private beta

Usage-based pricing

Regional launch

Partner network

Enterprise controls

Scale motion

Runner launch assets

Product asset uploaded

Lighting pass reviewed

Copy note resolved

Review package ready

Chargeback case opened

Payment captured

Payment authorized

Invoice generated

Export queue degradation

Nora Vazquez

Version history

v8

v7

v6

v5

v4

v3

May 2026

Committed across 4 product workspaces

Merged a pull request in lumenforge/interface

Tighten keyboard states in reporting grids

Opened 31 issues across 3 workspaces

Reviewed 51 pull requests in 4 workspaces

Billing rollout

Checkout language approved

Upgrade holds confirmed

Metrics dashboard connected

Customer messaging staged

Release checklist signed