Timeline
Events in order, each with a status, an author, a time and optional details.
Deploy failed
Build #483 by Ana Ruiz stopped at the test step.
Show log
FAIL checkout.test.ts › applies the discount Expected 90, received 100
Deploy succeeded
Luis Gómez promoted build #482 to production.
Review requested
Sara Kim asked Omar Haddad to review the pricing change.
Project created
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add timelineDependencies
What add timeline installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
2 examples · 1 componentDeploy failed
Build #483 by Ana Ruiz stopped at the test step.
Show log
FAIL checkout.test.ts › applies the discount Expected 90, received 100
Deploy succeeded
Luis Gómez promoted build #482 to production.
Review requested
Sara Kim asked Omar Haddad to review the pricing change.
Project created
Deployment activity
Statuses, authors, times and collapsible details.
Luis Gómez pushed 3 commits
to feature/checkout-discounts
Sara Kim commented
“Can we keep the old coupon field for one more release?”
Released v2.4.0
With icons
icon replaces the dot when the kind of event matters more than its status.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
TimelineThe ordered list of events. Newest first or oldest first, but keep one order. | ol | — |
TimelineItemOne event. status colors the marker; icon replaces the dot with a small icon. | li & { status?: "neutral" | "success" | "warning" | "info" | "error"; icon?: ReactNode } | status: "neutral" |
TimelineHeaderTitle and time on one line, wrapping when narrow. | div | — |
TimelineTitleWhat happened, including who did it and the outcome ("Deploy failed"). | p | — |
TimelineTimeWhen. Pass dateTime with a machine-readable value; the text can be relative. | time | — |
TimelineDescriptionSupporting detail. | p | — |
TimelineDetailsCollapsed extra content, such as a log excerpt or a diff. | details & { summary: ReactNode } | — |
Accessibility
A real ordered list: screen readers announce how many events there are and the position of each one.
The marker and the connector are decorative (aria-hidden). Status is shown by color only on the marker, so the title must say it in words ("Deploy failed", "Approved").
TimelineTime renders <time dateTime>, so relative text like "2 hours ago" still carries the exact moment.
TimelineDetails is a native details element: it is collapsed by default, opens with Enter or Space and works without JavaScript.
For a long feed, paginate or load more with a button rather than infinite scroll, so keyboard users can reach what comes after the list.