Lifeline

A timeline component for the stories that unfold over time — a career, a company, a journey.

Lifeline lays milestones on a single rail: horizontal and scrubbed by scroll on desktop, vertical on mobile. Years carry events, links, and the people who mattered; media attaches as hover reveals or floating cards that expand into a lightbox. On first load, an intro draws the rail across the years.

It ships as a shadcn registry — the source lands in your codebase, so every easing, breakpoint, and class is yours to change.

Install

Starting from nothing? This gets you a page that runs, framing included:

npx shadcn@latest add evilrabbit/lifeline/page

Components, starter data, the shell, and a route at app/lifeline/page.tsx. If that route already exists, shadcn asks before touching it — answer no and nothing of yours is lost.

Already have a page? Take the shell without the route, so the rail still sits inset and aligned inside your own layout:

npx shadcn@latest add evilrabbit/lifeline/shell

Just want the data template? Pick the starter that matches your subject — each brings the component system plus a commented template file, and no framing:

npx shadcn@latest add evilrabbit/lifeline/personal   # a life, year by year
npx shadcn@latest add evilrabbit/lifeline/company    # founding to today
npx shadcn@latest add evilrabbit/lifeline/journey    # a bounded run, day by day

Or just the component system, no starter and no framing:

npx shadcn@latest add evilrabbit/lifeline/lifeline

The sun/moon toggle from the demo is its own item:

npx shadcn@latest add evilrabbit/lifeline/theme-switcher

Any item installs the components into components/lifeline/, the data helper into lib/lifeline-data.ts, adds the intro keyframes to your CSS, and installs lucide-react + next-themes. The registry is also served at https://evilrabbit.com/r/{name}.json if you prefer URLs.

Use

Define a timeline as milestones keyed by year, and render it:

import { Lifeline, LifelineLegend } from "@/components/lifeline"
import {
  LifelineFooter,
  LifelineNav,
  LifelineShell,
  LifelineStage,
} from "@/components/lifeline-shell"
import { defineLifeline } from "@/lib/lifeline-data"

const life = defineLifeline({
  slug: "web",
  name: "The World Wide We