Timeline

Code

import { Timeline, TimelineItem } from "@fadymondy/nasaq/web";import { GitPullRequest } from "lucide-react";export function Activity() {  return (    <Timeline>      <TimelineItem actor={{ name: "Sara Alharbi" }} title="Assigned MH-142 to Khaled" time={new Date(Date.now() - 300_000)} />      <TimelineItem icon={<GitPullRequest />} title="Pull request #48 opened" description="Post-login redirect" time="2026-09-27T10:00:00Z" />    </Timeline>  );}

Data Display · beta

Live examples and controls: Timeline in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/timeline.json

A vertical history of things that happened: an activity feed, an order's tracking, an audit trail. Each item has a marker (an icon or the actor's avatar) on a rail, a title, an optional description and a relative time.

When to useCopy Anchor Link

• A chronological list where the order and the "when" matter.
• Activity on a record (issue, invoice, order).

When not to useCopy Anchor Link

• Rows the user acts on (open, mark read): use NotificationItem.
• A sequence the user moves through: use Stepper.
• Tabular history with many columns: use Table.

ImportCopy Anchor Link

import { Timeline, TimelineItem } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Timeline, TimelineItem } from "@fadymondy/nasaq/web";
import { GitPullRequest } from "lucide-react";

export function Activity() {
  return (
    <Timeline>
      <TimelineItem actor={{ name: "Sara Alharbi" }} title="Assigned MH-142 to Khaled" time={new Date(Date.now() - 300_000)} />
      <TimelineItem icon={<GitPullRequest />} title="Pull request #48 opened" description="Post-login redirect" time="2026-09-27T10:00:00Z" />
    </Timeline>
  );
}

AnatomyCopy Anchor Link

Timeline                      data-slot="timeline"            <ol>
└─ TimelineItem               data-slot="timeline-item"       <li>
   ├─ marker                  data-slot="timeline-marker"     `icon` tile, else <Avatar> from `actor`, else a dot
   ├─ rail                    data-slot="timeline-rail"       hidden on the last item
   └─ content                 data-slot="timeline-content"
      ├─ title + time         time is <DateTime relative>
      ├─ description
      └─ children

APICopy Anchor Link

TimelineCopy Anchor Link

TimelineProps extends ComponentProps<"ol">. No own props.

TimelineItemCopy Anchor Link

TimelineItemProps extends Omit<ComponentProps<"li">, "title">.

ExamplesCopy Anchor Link

Arabic feedCopy Anchor Link

import { Timeline, TimelineItem } from "@fadymondy/nasaq/web";

export function Feed() {
  return (
    <Timeline>
      <TimelineItem actor={{ name: "سارة الحربي" }} title="أسندت MH-142 إلى خالد" time={new Date(Date.now() - 300_000)} />
      <TimelineItem title="أُنشئ المشروع" time="2026-08-01T09:00:00Z" />
    </Timeline>
  );
}

AccessibilityCopy Anchor Link

• It is an ordered list; items are read in DOM order, so put the newest first (or oldest first) consistently.
• The rail and the plain dot are decorative (aria-hidden). An icon marker is decorative too, so the title must carry the meaning.
• Times are <time dateTime> elements.
• The list is not interactive; there is no keyboard behaviour.

RTL & i18nCopy Anchor Link

• The rail and markers sit on the inline start: the left in English, the right in Arabic. No physical classes are used.
• Relative times use the provider locale and Latin digits by default (DateTime).
• Identifiers in Arabic titles (issue keys) should be wrapped in <bdi> or Ltr.

Styling & tokensCopy Anchor Link

• Rail bg-border; icon tile bg-secondary with border-border; text text-foreground and text-muted-foreground.
• Target [data-slot=timeline-item]. Extend with className; never use raw hex.

Do / Don'tCopy Anchor Link

• Do keep titles to one sentence and let the description carry detail.
• Do pass real dates, not pre-formatted strings.
• Don't put buttons in a marker or title; use children for actions.

RelatedCopy Anchor Link

• NotificationItem · Avatar · Stepper

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-timeline--docs