shadcn-html / timeline

Built with: CSS

Timeline

A vertical timeline for displaying sequential events. Built on <ol> with CSS-generated connector lines.

Component Skill — components/timeline/component-skill.md

Native basis

<ol> element with timeline items connected by a vertical line.

Web Platform APIs

Classes

.timeline .timeline-item .timeline-dot .timeline-content .timeline-title .timeline-description .timeline-time

Variants (data-variant)

activeAlternate background styling

Basic

Vertical timeline with title, description, and time.

  1. Project started

    Initial project setup and planning phase completed.

  2. Design phase

    Wireframes and prototypes created and approved by stakeholders.

  3. Development in progress

    Core features being implemented and tested.

  4. Launch

    Public release and marketing campaign.

<ol class="timeline">
  <li class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <p class="timeline-title">Event title</p>
      <p class="timeline-description">Description</p>
      <time class="timeline-time">January 2024</time>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-dot" data-variant="active"></div>
    <div class="timeline-content">
      <p class="timeline-title">Current step</p>
    </div>
  </li>
</ol>

Activity Feed

Timeline composed with .avatar and .badge for an activity feed pattern.

  1. @shadcnCN Cody Lindley Merged

    Merged pull request #42 — Add new components

  2. JD Jordan Davis Review

    Requested changes on the sidebar layout

  3. AS Alex Smith Comment

    Commented on issue #38

CSS view file

Connector line

@layer components {
  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .timeline-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;

    /* Connector line */
    &::before {
      content: '';
      position: absolute;
      left: 0.3125rem;
      top: 1rem;
      bottom: 0;
      width: 1px;
      background-color: var(--border);
    }

    &:last-child::before {
      display: none;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .timeline-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--border);
    flex-shrink: 0;
    margin-top: 0.375rem;
    position: relative;
    z-index: 1;

    &[data-variant="active"] {
      background-color: var(--primary);
    }
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
  }

  .timeline-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.4;
  }

  .timeline-description {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .timeline-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.125rem;
  }
}