Polishing
I believe I have something solid. Ready for public view. I need to do some more polishing, but that is secondary. This is the MVP and there will surely be bugs and issues. But the most important part is to go to market.
Tell Your Story with Timelines
Got milestones to share? The Timeline component makes it easy. Pick your layout, add your dates, and watch your story come to life.
Three Layouts, One Component
You've got options: a classic vertical timeline for storytelling, a horizontal scroller for space-constrained sections, or a simple compact list when less is more. Each layout pulls from the same content—just change one prop and you're set.
Let's see them in action.
Vertical Timeline (Classic)
Development Starts
I've always been enamored by programming. I've dabbled in it several times. But with the help of AI, I can create things faster and better. So, I asked Claude (my favorite AI tool right now) to get started. I entered all my thoughts in a single chat—what I want, what i don't want, who this is for, and all other details I can think of. Once I have a working doc, I kept asking for edits like 'what about this' or 'consider this and that' until I got something that's 99% ready.
Clear Path Forward
While cleaning up my kid's toys, I thought about the importance of simple and clear instructions. When I communicate to my son, I need to distill my words and remove fluff. Keep it simple or he'll just ignore me or misunderstand. That's the same thing for businesses. They need a clear roadmap ahead.
Brainstorming
Later that evening, I went to work. I jotted down what I know (marketing) and listed down the problems I often see from my work. The biggest culprit—presence. With people's behaviors changing and moving more to online/digital transactions, local businesses need to have a presence online. They need to get found.
The Idea Was Born
After countless hours of doomscrolling, I saw a reel about how the AI landscape is changing the way we approach work. It is enabling people and businesses who use it move faster and do things better. This made me think about what I know and can offer to other businesses.
What You Just Saw
The vertical layout is perfect for 4-8 milestones on dedicated pages like "About" or "Our Story." Cards alternate left and right on desktop, with a center connector line and dots marking each milestone. On mobile, everything stacks neatly in a single column.
Note: This example uses dateFormat="full" to show complete dates (e.g.,
"October 10, 2025"). You can also use monthYear or yearOnly formats.
When to Use Vertical Layout
- Best for: 4-8 milestones, storytelling, detailed company history
- Features: Alternating left/right cards, vertical connector line, connector dots
- Use case: About page, dedicated history page, landing pages
- Mobile: Stacks vertically with hidden connector line
Horizontal Timeline (Scrolling)
← Swipe to scroll →
Polishing
I believe I have something solid. Ready for public view. I need to do some more polishing, but that is secondary. This is the MVP and there will surely be bugs and issues. But the most important part is to go to market.
Development Starts
I've always been enamored by programming. I've dabbled in it several times. But with the help of AI, I can create things faster and better. So, I asked Claude (my favorite AI tool right now) to get started. I entered all my thoughts in a single chat—what I want, what i don't want, who this is for, and all other details I can think of. Once I have a working doc, I kept asking for edits like 'what about this' or 'consider this and that' until I got something that's 99% ready.
Clear Path Forward
While cleaning up my kid's toys, I thought about the importance of simple and clear instructions. When I communicate to my son, I need to distill my words and remove fluff. Keep it simple or he'll just ignore me or misunderstand. That's the same thing for businesses. They need a clear roadmap ahead.
Brainstorming
Later that evening, I went to work. I jotted down what I know (marketing) and listed down the problems I often see from my work. The biggest culprit—presence. With people's behaviors changing and moving more to online/digital transactions, local businesses need to have a presence online. They need to get found.
The Idea Was Born
After countless hours of doomscrolling, I saw a reel about how the AI landscape is changing the way we approach work. It is enabling people and businesses who use it move faster and do things better. This made me think about what I know and can offer to other businesses.
Space-Saving Scrolling
Got lots of milestones? The horizontal layout lets visitors scroll through them without taking over your whole page. Great for homepage sections or anywhere you need to show many entries in limited vertical space.
Note: This example uses the default monthYear date format (e.g., "October 2025").
When to Use Horizontal Layout
- Best for: Many milestones (8+), space-constrained sections, homepage teasers
- Features: Horizontal scrolling, connector line, fixed-width cards
- Use case: Homepage timeline section, landing pages, sidebars
- Mobile: Maintains horizontal scroll with swipe gesture
Compact Timeline (Minimal)
Polishing
I believe I have something solid. Ready for public view. I need to do some more polishing, but that is secondary. This is the MVP and there will surely be bugs and issues. But the most important part is to go to market.
Development Starts
I've always been enamored by programming. I've dabbled in it several times. But with the help of AI, I can create things faster and better. So, I asked Claude (my favorite AI tool right now) to get started. I entered all my thoughts in a single chat—what I want, what i don't want, who this is for, and all other details I can think of. Once I have a working doc, I kept asking for edits like 'what about this' or 'consider this and that' until I got something that's 99% ready.
Clear Path Forward
While cleaning up my kid's toys, I thought about the importance of simple and clear instructions. When I communicate to my son, I need to distill my words and remove fluff. Keep it simple or he'll just ignore me or misunderstand. That's the same thing for businesses. They need a clear roadmap ahead.
Brainstorming
Later that evening, I went to work. I jotted down what I know (marketing) and listed down the problems I often see from my work. The biggest culprit—presence. With people's behaviors changing and moving more to online/digital transactions, local businesses need to have a presence online. They need to get found.
The Idea Was Born
After countless hours of doomscrolling, I saw a reel about how the AI landscape is changing the way we approach work. It is enabling people and businesses who use it move faster and do things better. This made me think about what I know and can offer to other businesses.
Minimal Design
Need a simpler look? The compact layout strips away the visual flourishes and gives you a clean, straightforward list. Perfect for sidebars, footers, or anywhere you want to show milestones without the full timeline treatment.
Note: This example uses dateFormat="yearOnly" (e.g., "2025").
When to Use Compact Layout
- Best for: 3-5 milestones, minimal design preference, dense information display
- Features: Simple list view, no connector lines, clean design
- Use case: Sidebar widgets, footer sections, summary pages
- Mobile: Natural stacking with comfortable spacing
How to Use Timeline Component
Basic Vertical Timeline
<Timeline
heading="Our Story"
layout="vertical"
/>Horizontal with Background
<Timeline
heading="Company History"
layout="horizontal"
background="subtle"
/>Compact List View
<Timeline
heading="Major Milestones"
layout="compact"
/>Limited (Homepage Teaser)
<Timeline
heading="Recent Milestones"
layout="vertical"
limit=3
/>Adding Timeline Entries
Timeline entries are stored as markdown files in src/content/timeline/. Each
file represents a single milestone in your business history.
Example Timeline Entry
---
date: '2024-01-15'
title: 'Major Milestone Achieved'
description: 'Description of what happened and why it matters.'
image: '/images/timeline/milestone.jpg'
imageAlt: 'Photo from the milestone event'
order: 1
---Field Reference
- date (required): ISO date string (YYYY-MM-DD) for sorting
- title (required): Milestone title/headline (3-10 words)
- description (required): Milestone description (1-3 sentences)
- image (optional): Path to milestone image (stored in
public/images/timeline/) - imageAlt (optional): Alt text for image (WCAG compliance)
- order (optional): Manual sort override (lower numbers appear first)
Sorting Behavior
By default, milestones are sorted by date in reverse chronological order (newest
first). You can override this with the order field to manually control the sequence.
Timeline Features
Three Layouts
Choose from vertical, horizontal, or compact layouts to match your design.
Auto-Sorted
Milestones automatically sort by date (newest first) with manual override option.
Optional Images
Add images to milestones for visual storytelling, or keep it text-only.
Dark Mode
Full light and dark mode support with automatic theme adaptation.
Responsive
Adapts beautifully to all screen sizes from mobile to desktop.
Static & Fast
Static site generation (SSG) for blazing fast page loads. No JavaScript required.
Need More Power?
Working with hundreds of entries? Need pagination, grouping by year/month, or date range filtering? Explore the advanced Timeline features for blog-like usage and large-scale timelines.
Ready to Add Your Timeline?
Create your timeline entries in src/content/timeline/ and add the Timeline component to any page. It's that simple!