Timelines, designed for real interfaces.

import { Timeline } from 'm2timeline-motion';
import 'm2timeline-motion/styles.css';

import { Timeline, type TimelineEvent } from 'm2timeline-motion';
import 'm2timeline-motion/styles.css';

const events: TimelineEvent[] = [
  { id: 1, title: 'Company founded', date: '2018-03', description: 'Two founders and a big idea.' },
  { id: 2, title: 'First 100 customers', date: '2019-11', status: 'completed' },
  { id: 3, title: 'Series A', date: '2023-04', highlight: true, details: 'Led by Atlas Partners.' },
  { id: 4, title: 'Global launch', date: '2026-06', status: 'current', progress: 60 },
];

export function QuickStart() {
  return <Timeline events={events} variant="alternating" animation="reveal" />;
}

import { VerticalTimeline, type TimelineEvent } from 'm2timeline-motion';
import 'm2timeline-motion/styles.css';

const deploys: TimelineEvent[] = [
  { id: 'build', title: 'Production build', date: '2026-10-18T09:12:00Z', status: 'completed' },
  { id: 'staging', title: 'Deploy to staging', date: '2026-10-18T09:20:00Z', status: 'current', progress: 64 },
  { id: 'prod', title: 'Promote to production', status: 'upcoming', details: 'Requires one approval.' },
];

export function DeployTimeline() {
  return (
    <VerticalTimeline
      events={deploys}
      onEventClick={(event) => console.log('Selected', event.id)}
    />
  );
}

<RoadmapTimeline
  events={roadmap}
  theme="dark"
  appearance="minimal"
  accent={['#6d5bd0', '#3b82f6']}
  density="compact"
  marker="ring"
  connector="dashed"
/>

/* All timelines */
.m2t {
  --m2t-accent: #6d5bd0;
  --m2t-radius: 10px;
  --m2t-font: 'Figtree', system-ui, sans-serif;
  --m2t-sticky-top: 64px; /* below your fixed header */
}

/* One timeline: <VerticalTimeline className="release-notes" … /> */
.release-notes .m2t-card {
  border-width: 2px;
}

import { CustomTimeline, type TimelineEvent } from 'm2timeline-motion';
import 'm2timeline-motion/styles.css';

const sprints: TimelineEvent[] = [
  { id: 's1', title: 'Sprint 1 — Foundations', date: '2026-09-01', status: 'completed', progress: 100 },
  { id: 's2', title: 'Sprint 2 — Editor', date: '2026-09-15', status: 'completed', progress: 100 },
  { id: 's3', title: 'Sprint 3 — Collaboration', date: '2026-09-29', status: 'current', progress: 45 },
  { id: 's4', title: 'Sprint 4 — Polish', date: '2026-10-13', status: 'upcoming' },
];

/** Bring your own markup: the engine still handles ordering, search, expansion, motion and theming. */
export function SprintBoard() {
  return (
    <CustomTimeline
      events={sprints}
      search
      listClassName="sprint-grid"
      renderItem={(item, { parts, isActive }) => (
        <div className={isActive ? 'sprint sprint--active' : 'sprint'}>
          <div className="sprint__head">
            {parts.marker}
            {parts.date}
          </div>
          {parts.title}
          <progress max={100} value={item.progress ?? 0} aria-label={`${item.progress ?? 0}% complete`} />
        </div>
      )}
    />
  );
}

import { TimelineCard, TimelineFrame, itemAttrs, useTimeline, type TimelineEvent } from 'm2timeline-motion';

export function Headless({ events }: { events: TimelineEvent[] }) {
  const timeline = useTimeline({ events, order: 'desc' });
  return (
    <TimelineFrame events={events} controller={timeline} layout="kanban" search>
      <ul className="my-columns">
        {timeline.visible.map((item, i) => (
          <li key={item.key} {...itemAttrs(item, i)}>
            <TimelineCard item={item} index={i} expanded={timeline.isExpanded(item.key)} />
          </li>
        ))}
      </ul>
    </TimelineFrame>
  );
}

<VerticalTimeline
  events={events}
  animation="blur"        // none | fade | rise | slide | scale | blur | reveal
  duration={500}
  stagger={90}
  scrollProgress          // line fills as you scroll
  connectorAnimated       // travelling light along the line
/>

import type { TimelineEvent, TimelineProps, LayoutVariant } from 'm2timeline-motion';

type Release = { downloads: number };

const releases: TimelineEvent<Release>[] = [
  { id: '1.2.0', title: 'Search', version: '1.2.0', data: { downloads: 1840 } },
];

// Every layout except "custom" (which requires renderItem) — handy for switchers.
const layout: LayoutVariant = 'changelog';

// app/page.tsx — a React Server Component. No 'use client' needed here:
// every timeline component is already a client component, and the data is plain serialisable JSON.
import { ChangelogTimeline, type TimelineEvent } from 'm2timeline-motion';
import { ReleaseTimeline } from './release-timeline';

async function getReleases(): Promise<TimelineEvent[]> {
  // e.g. `await fetch('https://api.example.com/releases', { next: { revalidate: 3600 } })`
  return [
    { id: '2.1.0', version: '2.1.0', title: 'Dark mode', date: '2026-10-01', changes: [{ type: 'added', text: 'System theme' }] },
    { id: '2.0.0', version: '2.0.0', title: 'New API', date: '2026-08-12', changes: [{ type: 'breaking', text: 'v1 removed' }] },
  ];
}

export default async function Page() {
  const releases = await getReleases();
  return (
    <main>
      {/* Serialisable props only → render directly from the server component */}
      <ChangelogTimeline events={releases} />
      {/* Function props (callbacks, render functions) → wrap in your own client component */}
      <ReleaseTimeline events={releases} />
    </main>
  );
}

'use client';

import { VerticalTimeline, type TimelineEvent } from 'm2timeline-motion';

export function ReleaseTimeline({ events }: { events: TimelineEvent[] }) {
  return (
    <VerticalTimeline
      events={events}
      onEventClick={(event) => console.log('Opened release', event.id)}
      formatDate={(date) => date.toLocaleDateString('en-GB', { timeZone: 'UTC' })}
    />
  );
}