Build · New

Timeline

Events in order: transfer tracking, order status, account activity, audit logs. Each item has an indicator, a connector and short content.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/timeline

Dependencies it brings: @phosphor-icons/react

Usage

import { Timeline, TimelineItem } from "@/components/ui/timeline";

<Timeline>
  <TimelineItem time="24 Sep, 10:42" title="Transfer submitted" description="Reference FT26270X482" />
  <TimelineItem status="current" time="In progress" title="Sent to beneficiary bank" />
  <TimelineItem status="upcoming" time="Expected by 11:45" title="Credited to account" />
</Timeline>

Examples

Horizontal on wide screens

layout="auto": vertical on phones, horizontal from md. Horizontal only for four steps or fewer; it runs right to left in Arabic.

Account activity

Every event is done, so every item is Complete. One line per event, and a link to the full record instead of long text.

API reference

Timeline

Prop	Type	Default	Description
`layout`	`"vertical" \| "horizontal" \| "auto"`	`"vertical"`	Figma's Layout. `auto` is vertical on phones and horizontal from `md`.
`children`	`TimelineItem[]`		The items, oldest first.

TimelineItem

Prop	Type	Default	Description
`status`	`"complete" \| "current" \| "upcoming"`	`"complete"`	Figma's Status.
`title`	`ReactNode`		Figma's Title: what happened, in one line.
`time`	`ReactNode`		Figma's Show time: the time or status above the title.
`dateTime`	`string`		An ISO date that makes the time a `<time>` element.
`description`	`ReactNode`		Figma's Show description: a line of detail, or a link.
`connector`	`boolean`	`true`	Figma's Show connector. The last item never has one.
`statusLabel`	`string`		The status for screen readers. Default: Complete, In progress, Upcoming, in the page's language.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To links inside items only; the timeline itself isn't a control.

ARIA

An ordered list (ol), so screen readers say how many steps there are and where each sits.
Indicators are hidden from it; the status is said as a word before the title. The current step is aria-current="step".
With dateTime, the time is a machine-readable <time>.

Arabic and RTL notes

Mirrors

The rail and indicators sit on the right in vertical timelines.
Horizontal timelines run right to left; the content's end space is on the left.

Does not mirror

The check mark doesn't mirror.
References, numbers and phones stay left to right (<bdi dir="ltr">).

Numerals: Times and numbers follow the numerals setting: toNumerals for fixed strings, formatNumber for amounts.
Arabic typography: Time label-12, title label-14 Semibold, detail label-14.
Mixed-direction text: Each line is dir="auto", so an Arabic line starts with an Arabic word as Figma asks, and a Latin reference doesn't flip the sentence.

All components ›