10 Blocks

shadcn/ui timeline blocks & components.

Timeline blocks built on shadcn/ui for company history, milestones, and growth stories: vertical rails with status badges, two-sided spines, year showcases with editorial photos, expandable milestone rows, and a milestones-to-metrics chart pairing. Each entry is plain data you can rewrite in place.

Milestone Rail With Status

Timeline 1Free

Vertical timeline of milestones on a left rail, each node carrying a date, a Shipped, In Progress, or Planned badge, a title, and supporting copy.

Badge

Alternating Spine Story

Timeline 2Free

Centered timeline alternating year entries left and right of a vertical spine, collapsing to a single rail on mobile, with tag badges per entry.

Badge

Activity Feed By Day

Timeline 3Free

Activity timeline grouped by day, with avatar rows for each actor, action, target, and relative timestamp connected by a vertical rail.

AvatarBadgeMarker

Horizontal Journey Rail

Timeline 4Pro

Horizontal timeline of milestones on a line that draws in on scroll, each plain node dot labeled with a year, title, and short story.

motion

Year Selector With Photo

Timeline 5Pro

Year-by-year timeline pairing a selector rail with a huge year number, chapter title, tags, and a grayscale photo that auto-advances with a cross-fade.

motion

Alternating Photo Chapters

Timeline 6Pro

Editorial timeline alternating large grayscale photos with big chapter titles and inline years, blur-rising on scroll and warming to color on hover.

motion

Sticky Stats Beside Milestones

Timeline 7Pro

Timeline split pairing a sticky column of count-up stats and a CTA with a scrolling stack of milestone cards led by big year numbers.

Button
motion

Expandable Milestone Rows

Timeline 8Pro

Timeline of expandable milestone rows anchored by big year numbers, each opening to reveal a detail paragraph and a pair of metric chips.

Collapsible
motion

Numbered Phase Stepper

Timeline 9Pro

Phased timeline with a numbered stepper that cross-fades between chapters, each pairing a story and CTA with a framed visual showing a year and metric.

Button
motion

Milestones With Growth Chart

Timeline 10Pro

Growth timeline pairing a milestone list with a Recharts area chart, where hovering a milestone highlights its point on the curve, plus count-up KPIs.

Chart
motionrecharts