Sections

TimelineSection

Vertical timeline for roadmaps, history, and step-by-step processes with variant colours.

Preview

Product Roadmap

Key milestones in our journey

Jan 2024

Project Kickoff

Initial planning and stakeholder alignment.

Feb 2024

Design Phase

Wireframes, prototypes, and design reviews.

Mar 2024

Development Sprint 1

Core features and authentication flow.

Apr 2024

Beta Release

Limited access testing with early adopters.

May 2024

Public Launch

Full release to all users.

Usage

import { TimelineSection } from '@/components/sections/TimelineSection'

export default function Page() {
  return (
    <TimelineSection
      title="Our Journey"
      items={[
        { title: 'Founded', description: 'Started in a small garage.', date: '2020', variant: 'success' },
        { title: 'Series A', description: '$5M funding round.', date: '2021' },
        { title: 'Global Expansion', description: 'Launched in 12 countries.', date: '2023' },
      ]}
    />
  )
}

Variants

Alternate Layout

Jan 2024

Project Kickoff

Initial planning and stakeholder alignment.

Feb 2024

Design Phase

Wireframes, prototypes, and design reviews.

Mar 2024

Development Sprint 1

Core features and authentication flow.

Apr 2024

Beta Release

Limited access testing with early adopters.

May 2024

Public Launch

Full release to all users.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named TimelineSection in React/Next.js.
Goal: recreate the same overall UI and behavior as the TimelineSection reference from a component gallery.
What it needs to communicate: Vertical timeline for roadmaps, history, and step-by-step processes..

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- items: TimelineItem[] — required — Timeline entries
- layout: 'left' | 'center' | 'alternate' — default 'left' — Layout style

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Left, center, and alternate layouts
- Variant colors (success/warning/error)
- Icon slot per item
- Date label support

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`items`*	`TimelineItem[]`	-	Array of timeline entries
`title`	`string`	-	Section heading
`description`	`string`	-	Section subtext
`layout`	`'left' \| 'center' \| 'alternate'`	`'left'`	Timeline layout style
`className`	`string`	-	Extra CSS classes

← Back to Sections