N
neokit

Timeline

Display a sequence of events along a vertical or horizontal axis. Each <li> item uses timeline-start, timeline-middle, and timeline-end slots with <hr> connectors.

Vertical (default)

Content alternates left and right of the central axis.

timeline vertical
  • First Macintosh computer
    1984
  • 1998
    iMac
  • iPod
    2001
  • 2007
    iPhone
  • Apple Watch
    2015

Horizontal

Add timeline-horizontal via classes to lay items out left to right.

timeline horizontal
  • 1984
    First Mac
  • 1998
    iMac
  • 2001
    iPod
  • 2007
    iPhone
  • 2015
    Watch

Snap icon

timeline-snap-icon snaps the icon to the start of each item so content only appears on one side.

timeline snap-icon
  • First Macintosh computer
    The Apple Macintosh, later rebranded as the Macintosh 128K, was the first successful mass-market personal computer to feature a mouse and a graphical user interface.
  • iMac
    IMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998.
  • iPod
    The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc.
  • iPhone
    iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system.
  • Apple Watch
    The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication.

Colored connectors

Color the <hr> connectors with DaisyUI bg utilities to show progress or state.

timeline colors
  • Order placed
  • Payment confirmed
  • Packed
  • In transit
  • Delivered

Compact

timeline-compact places all content on the same side (end). Good for a changelog or activity feed.

timeline compact
  • release
    v2.4.0 released

    Added Table and Timeline components. Build time improved by 12%.

  • fix
    v2.3.2 patch

    Fixed Status ping animation in Safari. Corrected Stat figure slot z-index.

  • release
    v2.3.0 released

    Added Stat, Stats, Status, and List components.

  • fix
    v2.2.1 patch

    Resolved Kbd size='md' emitting unwanted class. Countdown --digits fix.

  • release
    v2.2.0 released

    Added Kbd, Diff, and Countdown components.

With avatars

Use an avatar image as the timeline-middle icon for a social activity feed style.

timeline with avatars
  • Alice Chen
    Alice Chen pushed 3 commits to main
    2 hours ago
  • Bob Russo
    Bob Russo opened a pull request in feat/timeline
    4 hours ago
  • Carol Kim
    Carol Kim merged feat/table → main
    yesterday
  • Dan Mitchell
    Dan Mitchell created branch feat/tooltip
    2 days ago