Skip to content
fuji-ui
Component

Timeline

Connects dated entries with a line and a status-colored dot. items takes title, an optional description and timestamp, and an optional variant (StatusTone) that colors the dot. layout controls left (default), right, or alternating placement.

Left-aligned (default)

layout='left': the line sits on the left, content to its right.

  1. Order confirmed

    Mon 9:02 AM

    Payment captured and confirmation email sent.

  2. Packed

    Mon 3:40 PM

    Items picked and boxed at the Osaka warehouse.

  3. Out for delivery

    Tue 8:00 AM

    Handed to the regional courier for last-mile delivery.

  4. Delivered

    Pending

    Awaiting courier confirmation.

  • Items without a variant (like "Delivered" above) render as the neutral, in-progress style - that's how a pending/in-progress step is expressed

Right-aligned

layout='right': the line moves to the right, content sits to its left - useful when the timeline anchors a right-hand rail.

  1. Order confirmed

    Mon 9:02 AM

    Payment captured and confirmation email sent.

  2. Packed

    Mon 3:40 PM

    Items picked and boxed at the Osaka warehouse.

  3. Out for delivery

    Tue 8:00 AM

    Handed to the regional courier for last-mile delivery.

  4. Delivered

    Pending

    Awaiting courier confirmation.

Alternating

layout='alternating': a centered line with content flipping sides per entry - reads well for a wide, narrative history. Collapses to left below the sm breakpoint, since alternating needs width a phone screen doesn't have.

  1. Company founded

    2019

    Company founded

    2019

  2. Seed round closed

    2020

    Seed round closed

    2020

  3. Series A

    2022

    Series A

    2022

  4. Opened Tokyo office

    2024

    Opened Tokyo office

    2024

  5. Series B in progress

    2026

    Series B in progress

    2026
  • Resize the browser below the sm breakpoint to see this example collapse to the left layout automatically - no separate mobile prop needed

Activity feed with status dots

variant (StatusTone: default | success | warning | danger | info) colors each entry's dot - the same semantic vocabulary as Alert and Toast, not the decorative ComponentTone used by Button or Badge.

  1. Kenji commented on PR #482

    2m ago

  2. Priya approved PR #482

    10m ago

  3. Build failed on main

    1h ago

    3 tests failed in checkout.spec.ts

  4. Deploy queued, waiting on approval

    1h ago

Timeline props

itemsNone
TimelineItem[]

title, optional description, optional timestamp, and optional variant (StatusTone).

layout"left"
"left" | "right" | "alternating"

Line/content placement; alternating collapses to left below the sm breakpoint.

classNameNone
string

Additional classes applied to the root <ol>.

CriterionStatusNote
Keyboard supportNot applicableA static, non-interactive ordered list - nothing to operate by keyboard.
Focus managementNot applicableNot an overlay - no focus trap or portal involved.
Screen reader labelsSupportedRenders a real <ol>, so entry order and count are announced natively; status is carried by text (title/description), never color alone.
Reduced motionSupportedNo motion beyond the shared Fuji transition tokens, which zero under prefers-reduced-motion.
Reduced transparencyNot applicableUses opaque surfaces in every theme.
Mobile touch behaviorSupportedAlternating layout collapses to left below the sm breakpoint so entries never compress into an unreadable center column.

API reference

itemsNone
TimelineItem[]

Items with title, optional description, timestamp, and semantic variant.

layout"left"
"left" | "right" | "alternating"

Line/content placement; alternating collapses to left below the sm breakpoint.

classNameNone
string

Additional classes applied to the component root.