Components
Timeline and Stepper
A dated sequence and a progress stepper. Both are ordered lists, because a sequence has an order and a screen reader should be told so. Timeline owns the rail and the rhythm; you own the content.
Examples
import { Timeline } from "@luc/ui";A pipeline run
Changelogs, activity feeds, job runs and agent traces share one shape: a marker, a title, a supporting line and a right-aligned time or duration. The rail stops at the last item instead of running past it.
- Ingest04:00
1,284 bars written for BTCUSDT 1h
- Analytics04:12
Seven domains validated
- Materialize12m 04s
Serving generation 1284 built and published
- Research passqueued
Waiting for the analytics window
- Notifyattempt 2 / 5
Lark delivery failed — retrying
- Schema applied10:02
- Backfill queued10:04
- Rows written10:31
- Parity check clean10:36
- Serving switched10:41
<Timeline items={runs} />Progress through a known sequence
Completed and current steps are buttons; a future step is static text, so nobody jumps into a step whose prerequisites are not met.
- ScheduleWhen it runs
- ReviewConfirm and publish
- Connect provider
- Map instruments
- Validate parity
Only steps at or before the current one are reachable.
step 2 / 4<Stepper steps={steps} current={step} onStepSelect={setStep} />API
| Prop | Type | Default | Notes |
|---|---|---|---|
Timeline items | TimelineItem[] | — | title, description, meta, detail, tone, icon, muted. |
Timeline variant | "rail" | "plain" | "rail" | Draw the connector, or a bare sequence. |
Timeline density | "default" | "compact" | "default" | Compact for a log surface. |
Stepper steps | StepperStep[] | — | id, label, description, and an optional explicit complete. |
Stepper current | number | — | Zero-based. Only steps at or before it are interactive. |
Stepper orientation | "horizontal" | "vertical" | "horizontal" | A form header, or a sidebar checklist. |
Usage
import { Timeline } from "@luc/ui/components/timeline";<Timeline items={runs} />Guidelines
Do
- Reach for `Timeline` when the order carries meaning — runs, releases, incidents — and use `List` when it does not.
- Keep `title` short and put the evidence in `description`; `meta` is the right place for a date or a duration.
Don't
- Use it as a changelog of prose: a long description in every row turns the rail into a wall and hides the sequence.
Accessibility
The rail is an ordered list: each entry is announced with its position, and `meta` is read with the entry rather than as a separate column.
Related