build69
build69  /  Components  /  Timelines  /  TimelineCentered

TimelineCentered

v1.0.1Updated 20 Jul 2026

MUI Lab-style alternating left/right timeline with a center rail. Use for biography / case-history-style narratives.

Preview

Live · 8 stories
DefaultOpen ↗
Why this is recommendedtimelinemuicenteredalternating+2

The default, out-of-the-box TimelineCentered.

Recommended for+14
  • Biographies / case histories
  • Marketing milestone timelines
  • Project narrative pages
Tags+6
timelinemuicenteredalternatingnarrativedefault
Features+4
  • Centered rail with dot per event
  • Alternating left/right sides
  • Mixed-side override per event
  • Per-event icon + meta + body
Not recommended for−2
  • Dense audit logs (use TimelineAudit)
  • Order tracking (use TimelineTracking)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TimelineCentered" })

Usage

import { TimelineCentered } from '@/components/data-display/timeline-centered';

<TimelineCentered items={milestones} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
items

Events with side override

CenteredTimelineItem[]yes

Related