Timeline | Bearnie

Aug 2
Order placed
We’ve received your order and sent a confirmation email.
Aug 3
Shipped
Your package left the warehouse.
Aug 5
Out for delivery
Arriving today between 9:00 and 17:00.

<Timeline>
  <TimelineItem>
    <TimelineTime datetime="2026-08-02">Aug 2</TimelineTime>
    <TimelineTitle>Order placed</TimelineTitle>
    <TimelineDescription>We've received your order and sent a confirmation email.</TimelineDescription>
  </TimelineItem>
  <TimelineItem>
    <TimelineTime datetime="2026-08-03">Aug 3</TimelineTime>
    <TimelineTitle>Shipped</TimelineTitle>
    <TimelineDescription>Your package left the warehouse.</TimelineDescription>
  </TimelineItem>
  <TimelineItem active>
    <TimelineTime datetime="2026-08-05">Aug 5</TimelineTime>
    <TimelineTitle>Out for delivery</TimelineTitle>
    <TimelineDescription>Arriving today between 9:00 and 17:00.</TimelineDescription>
  </TimelineItem>
</Timeline>

Installation

npx bearnie add timeline

Usage

import {
  Timeline,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
  TimelineDescription
} from "@/components/bearnie/timeline"

<Timeline>
  <TimelineItem>
    <TimelineTime datetime="2026-01-15">Jan 15</TimelineTime>
    <TimelineTitle>Something happened</TimelineTitle>
    <TimelineDescription>More detail about it.</TimelineDescription>
  </TimelineItem>
</Timeline>

Pure HTML and CSS — no JavaScript. The connecting line is drawn per item, so it works with any number of entries and stops at the last one.

Examples

Rich content

Items are containers — put anything below the title, like buttons or version badges.

August 31, 2026
Calendar and Navigation Menu
A date picker calendar with range selection, and a site navigation bar with hoverable panels.
Read the changelog →
August 30, 2026
New components: Marquee, Banner, Rating, Video
Plus sidebar persistence, sortable tables, and stepper gating.

<Timeline>
  <TimelineItem active>
    <TimelineTime datetime="2026-08-31">August 31, 2026</TimelineTime>
    <TimelineTitle>Calendar and Navigation Menu</TimelineTitle>
    <TimelineDescription>
      A date picker calendar with range selection, and a site navigation bar
      with hoverable panels.
    </TimelineDescription>
    <a href="/docs/changelog/" class="text-sm font-medium text-primary hover:underline">Read the changelog →</a>
  </TimelineItem>
  <TimelineItem>
    <TimelineTime datetime="2026-08-30">August 30, 2026</TimelineTime>
    <TimelineTitle>New components: Marquee, Banner, Rating, Video</TimelineTitle>
    <TimelineDescription>
      Plus sidebar persistence, sortable tables, and stepper gating.
    </TimelineDescription>
  </TimelineItem>
</Timeline>

Anatomy

Timeline - The <ol> list container
TimelineItem - One event: draws the dot and the connecting line
TimelineTime - A <time> element for the date
TimelineTitle - The event heading
TimelineDescription - Muted supporting text

Props

TimelineItem

Prop	Type	Default	Description
active	boolean	false	Fill the dot with the primary color to mark the current step
class	string	-	Additional CSS classes

TimelineTime

Prop	Type	Default	Description
datetime	string	-	Machine-readable date for the `<time>` element