lifeline
A timeline component for the stories that unfold over time. Ships as a shadcn registry.
What is it?
What it is
A timeline component for visualizing stories, careers, or journeys through milestones, media, and interactive elements.
Why it exists
To provide a highly customizable, shadcn-compatible timeline that supports horizontal scroll-scrubbing on desktop and vertical scrolling on mobile, with easy integration into existing layouts.
Who should use it
Next.js developersFrontend engineers using Tailwind CSSUI/UX designers looking for timeline componentsDevelopers building personal portfolios, company histories, or journey logs
Who should avoid it
Developers not using Next.js (App Router)Developers not using Tailwind CSSUsers looking for a non-shadcn/non-headless component library
How it works
A quick walkthrough in plain English
How lifeline works
Step 1 of 3
You interact with it
Open lifeline, send a request, or connect it to your stack.
Features
Advantages
- Highly customizable and source‑first approach
- Seamless integration with shadcn registry and Tailwind CSS
- Responsive design adapts to desktop and mobile layouts
- Interactive media enhances user engagement
- Built‑in theme support and accessibility features
- Clear separation of shell and component logic for flexible layouts
- Easy data templating for common timeline types
- Automatic alignment with existing site navigation
- Embeddable module with scroll scrubbing and height control
- Open source MIT license encourages reuse and modification
Disadvantages
- Requires Next.js App Router and Tailwind CSS; not suitable for non‑Next.js projects
- TypeScript required, adding type overhead
- Setup involves multiple shadcn add commands and manual data configuration
- Limited to year‑based milestones; may not support arbitrary dates or finer granularity
- Intro animation may be distracting or unwanted in some contexts
- Custom CSS keyframes could conflict with existing styles
- Embedding requires explicit mode and height configuration
- Requires manual alignment markers if not using the provided shell
- May be overkill for simple timelines or small projects
Installation
native
npx shadcn@latest add evilrabbit/lifeline/page npx shadcn@latest add evilrabbit/lifeline/shell npx shadcn@latest add evilrabbit/lifeline/personal npx shadcn@latest add evilrabbit/lifeline/company npx shadcn@latest add evilrabbit/lifeline/journey npx shadcn@latest add evilrabbit/lifeline/lifeline npx shadcn@latest add evilrabbit/lifeline/theme-switcher
FAQ
How do I install Lifeline components into my Next.js project?
Use `npx shadcn@latest add evilrabbit/lifeline/{page/shell/lifeline}` to install specific components, which adds files to `components/lifeline/` and `lib/lifeline-data.ts`.
What props are required to render a Lifeline timeline?
The `markers` (from `defineLifeline`) and `birthYear` are required. Optional props include `title`, `mode`, and `className` for customization.
How can I embed Lifeline in a page without it taking full viewport width?
Set `mode='embed'` and wrap it in a container with a defined height (e.g., `h-[600px]`). The timeline will scroll horizontally within the container.
How does Lifeline align with my site's navigation?
Add `data-site-nav-logo` and `data-site-nav-inner` attributes to your navigation element. The timeline will align its start/end with these markers.
What dependencies are required for Lifeline?
Next.js (App Router) and Tailwind CSS (v3 or v4). It uses `next/image`, `next-themes`, and `lucide-react`.
How do I customize the timeline's appearance?
Use the `className` prop on `Lifeline` or shell components. You can override styles, adjust width via `containerClassName`, or modify milestones with `photos`, `badges`, or `mentors`.
Featured in Videos
YouTube tutorials and walkthroughs for lifeline
Alternatives
Similar projects ranked by category, topics, and text overlap.
