Components

Timeline

A flexible timeline for showcasing experience, milestones, and meaningful moments.

V0

  • Building polished, responsive web applications with a focus on performance, accessibility, and thoughtful user experiences.
Next.jsReactTypeScriptTailwind CSS

Installation

file_type_light_pnpm

$ pnpm dlx shadcn@latest add https://vatsalrana.dev/r/timeline.json

Usage

import { TimelineGroup, Timeline } from "@/components/timeline"
<TimelineGroup duration={5000}>
  <Timeline
    animated
    title="Frontend Developer"
    date={{
      startDate: new Date("2023-01-01"),
      endDate: new Date("2023-12-31"),
    }}
    company="Northstar Labs"
    description="Building polished, responsive web applications with a focus on performance, accessibility, and thoughtful user experiences."
    technologies={["Next.js", "React", "TypeScript", "Tailwind CSS"]}
  />

  <Timeline
    animated
    title="Full-Stack Developer"
    date={{
      startDate: new Date("2024-01-01"),
    }}
    company="Another Company"
    description="Worked across frontend and backend systems to build production applications."
    technologies={["Next.js", "Node.js", "PostgreSQL"]}
  />
</TimelineGroup>

API Reference

Timeline

Prop

TimelineGroup

Prop

Examples

Here are the examples of using this component without animated prop.

Note: When using the Timeline component without the animated prop, you don't need to wrap it in a TimelineGroup.