Timeline

HorizontalTimeline (with arrow slides)

Timeline

Start

Kickoff

Project brief and team alignment

09:00

Discovery

Research

User interviews and data analysis

10:30

Creative

Ideation

Brainstorming session with stakeholders

12:00

Build

Prototype

Wireframes and interactive mockup

14:00

Wrap-up

Review

Final presentation and feedback

16:00

ClassicTimeline

10:00

First

First event

11:00

Second

Second event

CardTimeline

Kickoff

09:00

Project brief and team alignment

Research

10:30

User interviews and data analysis

Ideation

12:00

Brainstorming session with stakeholders

In progress

Prototype

14:00

Wireframes and interactive mockup

Review

16:00

Final presentation and feedback

How to use

Use HorizontalTimeline (horizontal + arrow slides), ClassicTimeline (vertical list), or CardTimeline (cards with states). HorizontalTimeline items support tag, title, description, time.

1. Import

tsx
import { ClassicTimeline, CardTimeline, HorizontalTimeline } from "@/app/components/ui";
import type { ClassicTimelineItem, CardTimelineItem, HorizontalTimelineItem } from "@/app/components/ui";

2. HorizontalTimeline

tsx
const items: HorizontalTimelineItem[] = [
  { id: "1", tag: "Start", title: "Kickoff", description: "Project brief.", time: "09:00" },
  { id: "2", tag: "Build", title: "Prototype", description: "Wireframes.", time: "14:00" },
];

<HorizontalTimeline title="Timeline" items={items} />

3. ClassicTimeline

tsx
<ClassicTimeline
  items={[
    { title: "First", desc: "First event", time: "10:00" },
    { title: "Second", desc: "Second event", time: "11:00" },
  ]}
/>

4. CardTimeline

tsx
const items: CardTimelineItem[] = [
  { id: "1", title: "Kickoff", time: "09:00", description: "Project brief.", state: "completed" },
  { id: "2", title: "Ideation", time: "12:00", description: "Brainstorming.", state: "active", statusLabel: "In progress" },
  { id: "3", title: "Review", time: "16:00", description: "Final feedback.", state: "pending" },
];

<CardTimeline items={items} />