Timeline
An ordered history of events with who and when, such as the changes to a record or the steps of a deploy. Each tone has its own icon and a word, never colour alone.
- Timeline
- TimelineItem
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
Dark theme, Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
High contrast theme, Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
UsageLink to the section Usage
import { Timeline, TimelineItem } from '@skribly/ui/data'<Timeline aria-label="Deploy history">
<TimelineItem title="Deployed" tone="ok" toneLabel="Succeeded"
time="5 min ago" dateTime="2026-11-08T14:05:00Z" actor="Ada Lovelace" />
</Timeline>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- An ordered list named with aria-label, so screen readers say how many events there are.
- Times are time elements with a machine-readable dateTime.
- Icons are hidden; the tone is said by its word.
- The connecting line is a border, so it stays visible in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.