Components / Timeline

Timeline

A presentational surface for a sequence of events: an ordered list of items, each a dot and connector rail beside a time / title / description block. Orientation (vertical or horizontal) and Align (left, right, or alternate) cascade to the parts; Status drives the color states.

Examples

  1. Project kickoff

    Scope agreed and the repo scaffolded.

  2. Beta release

    Shipped to early adopters for feedback.

  3. General availability

    Public launch and the v1.0 tag.

razor
<ZitsTimeline Align="Left">
    <ZitsTimelineItem Status="complete">
        <ZitsTimelineSeparator>
            <ZitsTimelineDot />
            <ZitsTimelineConnector />
        </ZitsTimelineSeparator>
        <ZitsTimelineContent>
            <ZitsTimelineTime>March 2026</ZitsTimelineTime>
            <ZitsTimelineTitle>Project kickoff</ZitsTimelineTitle>
            <ZitsTimelineDescription>Scope agreed.</ZitsTimelineDescription>
        </ZitsTimelineContent>
    </ZitsTimelineItem>
</ZitsTimeline>

Installation

Terminal bash
navius add timeline

API reference

ZitsTimeline (root):

Prop Type Default
Orientation string "Vertical"
Align string "Left"

Parts

Prop Type Default
ZitsTimelineItem row Status: complete | current | pending
ZitsTimelineSeparator slot stacks the dot + connector along the rail
ZitsTimelineDot marker Variant: default | outline | secondary | destructive | muted
ZitsTimelineConnector line decorative rail toward the next item
ZitsTimelineContent slot wraps the time / title / description
ZitsTimelineTime text renders a semantic <time>
ZitsTimelineTitle text item title
ZitsTimelineDescription text supporting copy