Shadcn Timeline

A component for displaying a chronological sequence of events, activities, or milestones in a vertical or horizontal layout.

Project Kickoff

January 15, 2024

Successfully launched the initial project phase with all team members aligned on goals and objectives. The foundation has been set for future milestones.

First Milestone Achieved

March 22, 2024

Completed the first major milestone ahead of schedule. The team demonstrated exceptional collaboration and delivered high-quality results that exceeded expectations.

Project Completion

June 10, 2024

Successfully completed the project with all deliverables met. The final review showed outstanding results and positive feedback from all stakeholders.

import {
  Timeline,
  TimelineBody,
  TimelineHeader,
  TimelineIcon,
  TimelineItem,
  TimelineSeparator,
} from "@/components/ui/timeline"

export function TimelineDemo() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon className="h-3 w-3" />
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Project Kickoff
            </h3>
            <p className="text-muted-foreground text-xs">January 15, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Successfully launched the initial project phase with all team
            members aligned on goals and objectives. The foundation has been set
            for future milestones.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon className="h-3 w-3" />
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              First Milestone Achieved
            </h3>
            <p className="text-muted-foreground text-xs">March 22, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Completed the first major milestone ahead of schedule. The team
            demonstrated exceptional collaboration and delivered high-quality
            results that exceeded expectations.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineIcon className="h-3 w-3" />
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Project Completion
            </h3>
            <p className="text-muted-foreground text-xs">June 10, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Successfully completed the project with all deliverables met. The
            final review showed outstanding results and positive feedback from
            all stakeholders.
          </p>
        </TimelineBody>
      </TimelineItem>
    </Timeline>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add timeline

Usage

import {
  Timeline,
  TimelineBody,
  TimelineHeader,
  TimelineIcon,
  TimelineItem,
  TimelineSeparator,
} from "@/components/ui/timeline"

<Timeline>
  <TimelineItem>
    <TimelineHeader>
      <TimelineSeparator />
      <TimelineIcon />
    </TimelineHeader>
    <TimelineBody>
      <h3>Event Title</h3>
      <p>Event description</p>
    </TimelineBody>
  </TimelineItem>
</Timeline>

Examples

Timeline With Icon

A timeline component with custom icons for each event, enhancing visual recognition and making it easier for users to quickly identify different types of events or activities.

Office Setup Complete

February 8, 2024

Successfully established the new office location with all necessary equipment and infrastructure in place. The team is ready to begin operations.

Team Announcement

April 12, 2024

Announced the expansion of our team with five new members joining across different departments. This strengthens our capabilities and accelerates growth.

Funding Secured

May 30, 2024

Successfully secured Series A funding of $5M from leading investors. This milestone enables us to scale operations and accelerate product development.

import { Bell, DollarSign, Home } from "lucide-react"

import {
  Timeline,
  TimelineBody,
  TimelineHeader,
  TimelineIcon,
  TimelineItem,
  TimelineSeparator,
} from "@/components/ui/timeline"

export function TimelineWithIcon() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon>
            <Home className="h-4 w-4" />
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Office Setup Complete
            </h3>
            <p className="text-muted-foreground text-xs">February 8, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Successfully established the new office location with all necessary
            equipment and infrastructure in place. The team is ready to begin
            operations.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon>
            <Bell className="h-4 w-4" />
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Team Announcement
            </h3>
            <p className="text-muted-foreground text-xs">April 12, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Announced the expansion of our team with five new members joining
            across different departments. This strengthens our capabilities and
            accelerates growth.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineIcon>
            <DollarSign className="h-4 w-4" />
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Funding Secured
            </h3>
            <p className="text-muted-foreground text-xs">May 30, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Successfully secured Series A funding of $5M from leading investors.
            This milestone enables us to scale operations and accelerate product
            development.
          </p>
        </TimelineBody>
      </TimelineItem>
    </Timeline>
  )
}

Timeline With Avatar

A timeline component that uses avatars instead of icons, perfect for displaying user-related events, activity feeds, or any context where visual identification is important.

Sarah Johnson joined the team

January 20, 2024

Sarah joined as our new Product Manager, bringing over 8 years of experience in product development and team leadership. She will be leading our product roadmap initiatives.

Michael Chen promoted to Lead Developer

March 5, 2024

Michael has been promoted to Lead Developer after demonstrating exceptional technical skills and leadership. He will be managing our development team and architecture decisions.

Emily Rodriguez completed onboarding

May 15, 2024

Emily successfully completed her onboarding process and is now fully integrated into the design team. She brings fresh perspectives and creative solutions to our projects.

import { Avatar, AvatarImage } from "@/components/ui/avatar"
import {
  Timeline,
  TimelineBody,
  TimelineHeader,
  TimelineIcon,
  TimelineItem,
  TimelineSeparator,
} from "@/components/ui/timeline"

export function TimelineWithAvatar() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon className="p-0.5">
            <Avatar className="h-full w-full">
              <AvatarImage
                src="https://images.unsplash.com/photo-1750223642533-1b74b17edae8?auto=format&fit=crop&q=80&w=400&h=400"
                alt="Sarah Johnson"
              />
            </Avatar>
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Sarah Johnson joined the team
            </h3>
            <p className="text-muted-foreground text-xs">January 20, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Sarah joined as our new Product Manager, bringing over 8 years of
            experience in product development and team leadership. She will be
            leading our product roadmap initiatives.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineSeparator />
          <TimelineIcon className="p-0.5">
            <Avatar className="h-full w-full">
              <AvatarImage
                src="https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400"
                alt="Michael Chen"
              />
            </Avatar>
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Michael Chen promoted to Lead Developer
            </h3>
            <p className="text-muted-foreground text-xs">March 5, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Michael has been promoted to Lead Developer after demonstrating
            exceptional technical skills and leadership. He will be managing our
            development team and architecture decisions.
          </p>
        </TimelineBody>
      </TimelineItem>
      <TimelineItem>
        <TimelineHeader>
          <TimelineIcon className="p-0.5">
            <Avatar className="h-full w-full">
              <AvatarImage
                src="https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400"
                alt="Emily Rodriguez"
              />
            </Avatar>
          </TimelineIcon>
        </TimelineHeader>
        <TimelineBody className="-translate-y-1.5">
          <div className="space-y-1">
            <h3 className="text-base leading-none font-semibold">
              Emily Rodriguez completed onboarding
            </h3>
            <p className="text-muted-foreground text-xs">May 15, 2024</p>
          </div>
          <p className="text-muted-foreground mt-3 text-sm">
            Emily successfully completed her onboarding process and is now fully
            integrated into the design team. She brings fresh perspectives and
            creative solutions to our projects.
          </p>
        </TimelineBody>
      </TimelineItem>
    </Timeline>
  )
}

Activities Timeline

A timeline component styled as activity cards, ideal for displaying transaction history, activity logs, or any list of events that benefit from a card-based presentation.

$2,400 Design changes

22 DEC 7:20 PM

New order #1832412

21 DEC 11 PM

Payment completed for order #4395133

20 DEC 2:20 AM

import { Bell, CreditCard, DollarSign } from "lucide-react"

import { Card, CardContent } from "@/components/ui/card"
import {
  Timeline,
  TimelineBody,
  TimelineHeader,
  TimelineIcon,
  TimelineItem,
} from "@/components/ui/timeline"

export function ActivitiesTimeline() {
  return (
    <Timeline orientation="vertical" className="max-w-md">
      <div className="flex flex-col gap-3">
        <TimelineItem>
          <Card className="flex w-full items-start gap-3 px-4 py-3 transition-shadow hover:shadow-md">
            <TimelineHeader>
              <TimelineIcon>
                <Bell className="h-4 w-4" />
              </TimelineIcon>
            </TimelineHeader>
            <TimelineBody className="flex-1 !pb-0">
              <div className="space-y-0.5">
                <h3 className="text-sm leading-none font-semibold">
                  $2,400 Design changes
                </h3>
                <p className="text-muted-foreground text-xs">22 DEC 7:20 PM</p>
              </div>
            </TimelineBody>
          </Card>
        </TimelineItem>
        <TimelineItem>
          <Card className="flex w-full items-start gap-3 px-4 py-3 transition-shadow hover:shadow-md">
            <TimelineHeader>
              <TimelineIcon>
                <CreditCard className="h-4 w-4" />
              </TimelineIcon>
            </TimelineHeader>
            <TimelineBody className="flex-1 !pb-0">
              <div className="space-y-0.5">
                <h3 className="text-sm leading-none font-semibold">
                  New order #1832412
                </h3>
                <p className="text-muted-foreground text-xs">21 DEC 11 PM</p>
              </div>
            </TimelineBody>
          </Card>
        </TimelineItem>
        <TimelineItem>
          <Card className="flex w-full items-start gap-3 px-4 py-3 transition-shadow hover:shadow-md">
            <TimelineHeader>
              <TimelineIcon>
                <DollarSign className="h-4 w-4" />
              </TimelineIcon>
            </TimelineHeader>
            <TimelineBody className="flex-1 !pb-0">
              <div className="space-y-0.5">
                <h3 className="text-sm leading-none font-semibold">
                  Payment completed for order #4395133
                </h3>
                <p className="text-muted-foreground text-xs">20 DEC 2:20 AM</p>
              </div>
            </TimelineBody>
          </Card>
        </TimelineItem>
      </div>
    </Timeline>
  )
}

Props

The timeline component is built using class-variance-authority and accepts the following props:

Timeline (Root Component)

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The orientation of the timeline
`color`	`"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error"`	`"secondary"`	The color scheme for timeline icons and separators
`className`	`string`	-	Additional CSS classes to apply to the timeline
`children`	`ReactNode`	-	The timeline items to display

TimelineItem

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the timeline item
`children`	`ReactNode`	-	The timeline header and body components

TimelineHeader

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the header
`children`	`ReactNode`	-	The separator and icon components

TimelineSeparator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the separator line

TimelineIcon

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the icon container
`children`	`ReactNode`	-	The icon or avatar to display

TimelineBody

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the body
`children`	`ReactNode`	-	The content to display in the timeline item

Best Practices

Use timelines to display chronological sequences of events
Keep timeline content concise and scannable
Use icons or avatars to enhance visual recognition
Choose appropriate colors to match the event type or importance
Ensure sufficient spacing between timeline items
Use consistent styling across all timeline items
Consider using cards for activity-style timelines
Provide clear titles and descriptions for each event
Use appropriate date/time formatting
Ensure the timeline is accessible with proper semantic HTML

The timeline component provides a flexible and accessible way to display chronological information. It's ideal for activity feeds, transaction history, project milestones, event logs, and any interface where a sequence of events needs to be presented clearly.

Textarea Tooltip

On This Page

Installation Usage Examples Timeline With Icon Timeline With Avatar Activities Timeline Props Timeline (Root Component)TimelineItem TimelineHeader TimelineSeparator TimelineIcon TimelineBody Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.